vue---微信JSAPI支付

最近在用VUE做公众号开发，需要用到微信支付，下面做一个详细的记录。

开发功能之前需要详细看一下：微信JSAPI文档

https://pay.weixin.qq.com/wiki/doc/api/jsapi.php?chapter=9_1

V3看这个：建议使用上面的，网关统一

https://pay.weixin.qq.com/wiki/doc/apiv3/apis/chapter3_1_4.shtml

 首先安装：weixin-jsapi

npm install weixin-jsapi

后端写好微信下单接口，前端请求后端接口，进行统一下单，下单后后端需要返会的数据如下：

{
    message: "操作成功",
    code: 200,
    data: {
        appId: "wx311847e9aaa09a53",
        nonceStr: "VWKpxkT8e2PbcQZV",
        package: "prepay_id=wx30155832040065d8944db6d134d19a0000",
        sign: "CE0A41BF162B3313D8480853D199E0FB",
        signType: "MD5",
        timeStamp: "1672387111"
    }
}

微信能够成功下单，返会这些信息，那么微信JSAPI支付已经弄了差不多了，调用微信支付进行付款就可以了。

// 调起微信支付
wxPrepay(key) {
  let that = this;
  getPrepayId({ id: key }).then(res => {
    let { appId, nonceStr, timeStamp, sign } = res.data;
    let prepayId = res.data.package;
    wx.config({
      debug: false, // 测试阶段可用 true 打包返回给后台用 false
      appId: appId,
      timestamp: timeStamp,
      nonceStr: nonceStr,
      signature: sign,
      jsApiList: ['chooseWXPay']
    });
    wx.ready(function(){
      wx.chooseWXPay({
        appId: appId,
        timestamp: timeStamp, // 时间戳
        nonceStr: nonceStr, // 随机字符串
        package: prepayId, // 统一支付接口返回的prepay_id参数值
        signType: 'MD5', //  签名方式，默认为'SHA1'，使用新版支付需传入'MD5'
        paySign: sign, // 支付签名
        success: function (res) {
          that.Toast('支付成功');
        },
        cancel: function (res) {
          that.Toast('支付取消');
        },
        fail: function (res) {
          that.Toast('支付失败');
        }
      });
    });
  });
}

参考文档：

https://blog.csdn.net/weixin_42124196/article/details/88971031

打完收工！