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

目录

• 1，前言
• 2，流程
• 3，参数说明
• 4，具体代码

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

往期文章

• 细数JS中实用且强大的操作符&运算符
• 微信小程序request请求的封装
• 微信小程序API交互的自定义封装

个人主页

• CSDN
• GitHub
• 简书
• 博客园
• 掘金