【避坑指“难”】小程序支付功能，最详细的数据签名加密，坑都给你排完了，还不能致富吗？

官方给出的支付api ：wx.requestPayment(Object object)

官方demo看起来是有点迷糊的，网上很多实例也只是把demo包装了一下，没有讲到支付功能的核心，比方说看下面的例子🌰

wx.requestPayment({
  timeStamp: '',
  nonceStr: '',
  package: '',
  signType: 'MD5',
  paySign: '',
  success (res) { },
  fail (res) { }
})

• timeStamp：时间戳，从 1970 年 1 月 1 日 00:00:00 至今的秒数，即当前的时间
• nonceStr：随机字符串，长度为32个字符以下
• package：统一下单接口返回的 prepay_id 参数值，提交格式如：prepay_id=***
• signType：MD5签名算法，应与后台下单时的值一致
• paySign：签名，具体见微信支付文档
• success：接口调用成功的回调函数
• fail：接口调用失败的回调函数
• complete：接口调用结束的回调函数（调用成功、失败都会执行）

眼睛看懂了吗，没有！！完全没明白！！甚至更加困惑了！！

下面就让我们好好踏上支付（致富）之路吧！

一、开发之前把支付文档看两遍

微信支付开发文档

最基本的交互图得弄明白

二、代码实现

接下来按照demo调起支付接口需要传的参数，依次实现

1、timeStamp

在utils.js中封装——获取时间戳函数

const handleTiemStamp = () => {
  return parseInt(new Date().getTime() / 1000) + ''
}

2、nonceStr

在utils.js中封装——随机获取32位字符串函数

const handleRandomString = () => { 
  var chars = 'ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz2345678';
  var maxPos = chars.length;
  var pwd = '';
  for (var i = 0; i < 32; i++) {
    pwd += chars.charAt(Math.floor(Math.random() * maxPos));
  }
  return pwd
}

3、package

prepayId是在请求购买接口时，后端返回的，当我们拿到prepayId字段时候，需要做一个拼接（微信规定的）

package: `prepay_id=${res.data.prepayId}`

4、signType

与后端约定统一用MD5，保持一致性

signType: 'MD5'

5、paySign

支付流程中，最麻烦，最需要细心的地方

官方给的：签名安全规范 所以，依葫芦画瓢

我们要传的参数是：timeStamp + nonceStr + package + signType + paySign

按照排序，写一个处理签名的函数

 handlePaySign() {
    var stringSign = `appId=你的小程序appId它是唯一的&nonceStr=${this.data.nonceStr}&package=prepay_id=${this.data.prepayId}&signType=MD5&timeStamp=${this.data.timeStamp}&key=你的小程序key它也是唯一的`
    var sign = MD5(stringSign).toUpperCase()
    this.setData({ 
      paySign: sign //把它存起来，传参的时候用
    })
  },

注意，MD5库需要提前npm install一下，并引入 const MD5 = require('md5-js');

6、最后

wx.requestPayment({
        timeStamp: that.data.timeStamp,
        nonceStr: that.data.nonceStr,
        package: `prepay_id=${res.data.prepayId}`,
        signType: 'MD5',
        paySign: that.data.paySign,
        success(res) {
         console.log('支付成功')
        },
        fail(res) {
         console.log('支付失败')
        }
})

三、效果展示

完成，快去致富吧伙伴们！