微信小程序支付包含uniapp方法超詳細(xì)講解
本文只介紹前端的實(shí)現(xiàn)邏輯,所以不涉及申請微信支付API,因?yàn)樵摴δ苁呛蠖颂幚怼?/p>
一、了解微信支付流程
官方參考文檔:微信支付開發(fā)文檔
微信支付官方流程圖:

二、【前端】微信支付實(shí)現(xiàn)步驟
1.創(chuàng)建訂單接口
當(dāng)用戶點(diǎn)擊購買按鈕時(shí),首先第一步要?jiǎng)?chuàng)建訂單,后端需要提供下單接口(后端調(diào)用統(tǒng)一下單接口,也就是生成預(yù)支付交易單),該接口返回給前端一個(gè)訂單id,此時(shí)訂單處于待付款狀態(tài)

代碼示例:
// uniapp || 微信小程序
PlaceAnOrder(params).then((res) => {
const PayParams = { order_id: res.order_id }; // 接口返回的訂單ID
})
2.獲取支付參數(shù)
通過訂單id調(diào)用后端接口拿到支付參數(shù)(后端調(diào)用預(yù)支付接口的時(shí)候拿到的參數(shù)):appId、timeStamp、nonceStr、package、signType,不過要區(qū)別uniapp的寫法,和官方大有不同
| 字段名 | 變量名 | 必填 | 類型 | 示例值 | 描述 |
|---|---|---|---|---|---|
| 小程序ID | appId | 是 | String | wxd678efh567hg6787 | 微信分配的小程序ID |
| 時(shí)間戳 | timeStamp | 是 | String | 1490840662 | 時(shí)間戳從1970年1月1日00:00:00至今的秒數(shù),即當(dāng)前的時(shí)間 |
| 隨機(jī)串 | nonceStr | 是 | String | 5K8264ILTKCH16CQ2502SI8ZNMTM67VS | 隨機(jī)字符串,不長于32位。推薦隨機(jī)數(shù)生成算法 |
| 數(shù)據(jù)包 | package | 是 | String | prepay_id=wx2017033010242291fcfe0db70013231072 | 統(tǒng)一下單接口返回的 prepay_id 參數(shù)值,提交格式如:prepay_id=wx2017033010242291fcfe0db70013231072 |
| 簽名方式 | signType | 是 | String | MD5 | 簽名類型,默認(rèn)為MD5,支持HMAC-SHA256和MD5。注意此處需與統(tǒng)一下單的簽名類型一致 |
// 微信開發(fā)工具
PlaceAnOrder(params).then((res) => {
const wxPayParams = {
order_id: res.data.order_id,
};
fetchWxPay(wxPayParams).then((payRes) => {
const { data } = payRes; // data包含了appId、timeStamp、nonceStr、package、signType,后端已對格式做處理,格式參考上面表格
const payData = {
...data,
success(sucRes) {
console.log('success', sucRes);
},
fail(err) {
console.log('err', err);
},
complete() {
console.log('complete');
},
};
});
});
// uniapp
payApi(PayParams).then((payRes) => {
uni.getProvider({
service: 'payment',
success: function (res) {
let payConfing: any = {};
payConfing = {
provider: res.provider[0],
...payRes,
service: 5,
success(sucRes) {
console.log('success', sucRes);
},
fail(err) {
console.log('err', err);
},
complete() {
console.log('complete');
},
},
}
})
})
3.調(diào)用wx.requestPayment發(fā)起微信支付
當(dāng)一切參數(shù)都能拿到并且準(zhǔn)確無誤后調(diào)用微信官方接口wx.requestPayment,如果是uniapp則使用uni.requestPayment,具體參數(shù)說明參考:https://doc.dcloud.net.cn/uni-app-x/api/request-payment.html#requestpayment
// weixin wx.requestPayment(payData) // uniapp uni.requestPayment(payConfing)
總結(jié)
到此這篇關(guān)于微信小程序支付包含uniapp方法的文章就介紹到這了,更多相關(guān)微信小程序支付包含uniapp內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
JavaScript 字符串與數(shù)組轉(zhuǎn)換函數(shù)[不用split與join]
下面的代碼,不考慮他的運(yùn)行效率的話,思路不錯(cuò),大家可以看看,但在實(shí)際的應(yīng)用中,我們?nèi)匀皇褂胹plit或join來實(shí)現(xiàn)數(shù)組的操作。2009-12-12
uni-app小程序?qū)崿F(xiàn)微信在線聊天功能(私聊/群聊)
這篇文章主要介紹了uni-app小程序?qū)崿F(xiàn)微信在線聊天(私聊/群聊),今天記錄一下項(xiàng)目核心功能的實(shí)現(xiàn)過程。頁面UI以及功能邏輯全部來源于微信,即時(shí)聊天業(yè)務(wù)的實(shí)現(xiàn)使用socket.io,前端使用uni-app開發(fā),后端服務(wù)器基于node實(shí)現(xiàn),數(shù)據(jù)庫選擇mongoDB,需要的朋友可以參考下2023-02-02
JavaScript設(shè)計(jì)模式之代理模式簡單實(shí)例教程
這篇文章主要介紹了JavaScript設(shè)計(jì)模式之代理模式,簡單描述了代理模式的概念、功能、組成并結(jié)合實(shí)例形式較為詳細(xì)的分析了javascript代理模式的定義與使用相關(guān)操作技巧,需要的朋友可以參考下2018-07-07
javascript 一段左右兩邊隨屏滾動(dòng)的代碼
在不少的網(wǎng)站使用了這種技術(shù),一般就是兩邊的一些三個(gè)小塊排一起的廣告。2009-06-06
使用ngrok+express解決本地環(huán)境中微信接口調(diào)試問題
這篇文章主要介紹了使用ngrok+express解決本地環(huán)境中微信接口調(diào)試問題,需要的朋友可以參考下2018-02-02
判斷目標(biāo)是否是window,document,和擁有tagName的Element的代碼
判斷目標(biāo)是否是window,document,和擁有tagName的Element的代碼,需要的朋友可以參考下。2010-05-05
js自動(dòng)查找select下拉的菜單并選擇(示例代碼)
這篇文章主要介紹了js自動(dòng)查找select下拉的菜單并選擇(示例代碼)需要的朋友可以過來參考下,希望對大家有所幫助2014-02-02

