1，前言
分享一個完整的微信小程序支付流程中，前端要做的模塊。
2，流程
在調用wx.requestPayment之前，需要准備一些參數，流程如下
1，調用 wx.login() 獲取 臨時登錄憑證code ，並調用wx.request回傳到服務端。
2，服務端調用 auth.code2Session 接口，換取用戶唯一標識 OpenID 和 會話密鑰 session_key。
3，前端拿到服務端返還的參數后，調用wx.requestPayment。
下面是我畫的一個流程圖
3，參數說明
如上，一共五個參數，參數名區分大小寫，參數名寫錯或者參數類型搞錯都不行。
4，具體代碼
pay () {
let _this = this;
//此處5個變量為我項目需要，與微信支付無關
let { userId, needPay, price, walletNum, classId } = this.data;
if(needPay === 0){ //如果還需微信支付的金額為 0 則全部走錢包支付
HTTP.buyPay(userId , price, classId)
.then(res => {
if(res.status === "y"){
FN.Alert(res.info)
.then(() => {
wx.navigateBack();
})
};
});
}else{//進入微信支付
FN.wxLogin()
.then(res => {
this.setData({
code:res
},() => {
HTTP.payCourse(userId, classId, walletNum, needPay, res)// 調服務端，拿到支付密匙
.then(res => {
if(res.status === "y"){
let obj = res.infoObject.wxpayInfo;
wx.requestPayment({// 調起微信支付
timeStamp: obj.timestamp,
nonceStr: obj.nonceStr,
package: obj.wxPackage,
signType: obj.signType,
paySign: obj.sign,
success (res) {
FN.Alert("支付成功")
.then(() => {
wx.navigateBack();
})
},
fail (res) {
_this.setData({
isShow:false,
payPwd:"",
pwdFocus:false
}, () => {
if(res.errMsg.indexOf("cancel") > -1){
FN.Toast("取消支付");
}else{
FN.Toast("支付失敗");
}
})
}
})
}
})
});
})
.catch(res => {
FN.Toast("獲取登錄憑證失敗");
})
}
}
如果看了覺得有幫助的，我是@鵬多多，歡迎 點贊 關注 評論；
END
往期文章
個人主頁