微信小程序充值及充值回调后的处理

最新推荐文章于 2024-04-05 21:50:59 发布

转载最新推荐文章于 2024-04-05 21:50:59 发布 · 1.2k 阅读

1 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/yaoyuqian/p/8232962.html

文章标签：

#后端 #前端 #移动开发 #ViewUI

本文介绍微信小程序中的充值流程。用户点击充值按钮后，前端通过POST方式请求后端接口，并传递充值金额等参数。后端处理请求后返回微信统一下单参数，前端调用wx.requestPayment接口实现支付。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

微信小程序的充值流程与 H5 或公众号大致差不多，这里简单说一下前端在充值时候的一些操作流程。

用户在小程序中发起充值请求时，一般会先请求自己的服务器，将充值的参数发送给后端，然后后端会去请求微信充值，得到微信返回的统一下单的参数再返回给前端。前端调用

wx.requestPayment API 即可唤起微信小程序的支付页面，此时用户输入正确的支付密码即可支付成功。具体流程如下：

1. 比如说页面上有一个充值按钮，点击充值按钮时可以获取到用户请求充值的参数。　　

wx.request({
　　url: "后端的充值接口",
   method: "POST",
   dataType: "json",
   header: {
     'content-type': 'application/x-www-form-urlencoded'
   },
   data: {
     amount: amount,  // 充值金额
     token: token,
     openId: openId
   },
   success: function (res) {
     if (res.data.code == '1') {
       that.setData({
         payParams: res.data.data  // 后端从微信得到的统一下单的参数
       })
       that.xcxPay();  // 拿到统一下单的参数后唤起微信支付页面
     } 
   }
})

2. 调用 wx.requestPayment 唤起微信支付界面。

wx.requestPayment({
　  'timeStamp': that.data.payParams.timestamp.toString(),  // 时间戳必须是字符串，否则会报错
   'nonceStr': that.data.payParams.str,
   'package': 'prepay_id=' + that.data.payParams.prepay_id,  // 这里的值必须是 prepay_id=XXXXXXXXX 的格式，否则也会报错
   'signType': 'MD5',
   'paySign': that.data.payParams.sign,
   'success': function (res) { 
　　　　// 这里应该是 res.errMsg , 跟公众号的支付返回的参数不一样，公众号是 err_msg, 就因为没注意到这个，折腾了很长时间
   　　if(res.errMsg == "requestPayment:ok"){  // 调用支付成功
      　　wx.redirectTo({
              url: '../chargelist/chargelist'   // 充值成功后的处理，可以跳转，也可以根据自己的需要做其他处理
         })
      }else if(res.errMsg == 'requestPayment:cancel'){
　　　　　　// 用户取消支付的操作
　　　 }
   },
   'fail': function (res) {
   　　return false;
   },
   'complete': function (res) { }
})