前端调用微信小程序的支付流程

发表时间：2021-2-3

发布人：葵宇科技

浏览次数：43

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("获取登录凭证失败");
     })
   }
 }