前端調用微信小程序的(de)支付流程

發表時(shí)間：2021-2-3

發布人(rén)：融晨科技

浏覽次數：66

1，前言

分享一個(gè)完整的(de)微信小程序支付流程中，前端要(yào / yāo)做的(de)模塊。

2，流程

在(zài)調用wx.requestPayment之(zhī)前，需要(yào / yāo)準備一些參數，流程如下

1，調用 wx.login() 獲取臨時(shí)登錄憑證code ，并調用wx.request回傳到(dào)服務端。

2，服務端調用 auth.code2Session 接口，換取用戶唯一标識 OpenID 和(hé / huò) 會話密鑰 session_key。

3，前端拿到(dào)服務端返還的(de)參數後，調用wx.requestPayment。

下面是(shì)我畫的(de)一個(gè)流程圖

3，參數說(shuō)明

如上(shàng)，一共五個(gè)參數，參數名區分大(dà)小寫，參數名寫錯或者參數類型搞錯都不(bù)行。

4，具體代碼

pay () {
   let _this = this;
   //此處5個(gè)變量爲(wéi / wèi)我項目需要(yào / yāo)，與微信支付無關
   let { userId, needPay, price, walletNum, classId } = this.data;
   if(needPay === 0){ //如果還需微信支付的(de)金額爲(wéi / wèi) 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)// 調服務端，拿到(dào)支付密匙
         .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("獲取登錄憑證失敗");
     })
   }
 }