【微信支付】精选干货带你使用微信公众号调起微信支付

前言

最近搞了个微信公众号拉起微信支付的功能项目，看了微信官方文档之后，我从不懂变成了迷糊，又看了几遍之后，发现我从迷糊变成了懵逼状态。加上和后端开发人员沟通之后，各自的理解方式是真的不一样呀。

下面就结合官方文档和自己的理解，整理出一份干货文档。（由于我是使用vue开发的，所以下面的文章会结合vue来进行说明。）

安装和引入jssdk

在需要调用 JS 接口的页面引入如下 JS 文件，（支持https）：http://res.wx.qq.com/open/js/jweixin-1.6.0.js

如需进一步提升服务稳定性，当上述资源不可访问时，可改访问：http://res2.wx.qq.com/open/js/jweixin-1.6.0.js （支持https）。

根据官方文档中的说明，我们可以直接引入以上两个js文件中的一个。

如果你使用了npm包管理工具的话，是可以直接使用npm进行安装的，这样就不需要配置安全域名、白名单之类的了。

npm install weixin-js-sdk

页面中添加支付按钮

👉 没有任何样式的按钮，这里使用的是vant按钮组件

<template>
  <div class="pay">
    <van-button type="primary" @click="handlePay">支付</van-button>
  </div>
</template>

生命周期中配置config

👉 官方文档中，需要引入wx.config、wx.ready等方法

👉 我们可以在vue生命周期函数 - beforeCreate方法中引用这些配置方法

在使用wx.config等方法时，需要在当前页面中引入jssdk哦。

import wx from "weixin-js-sdk"

beforeCreate() {
    payjsapi().then((res) => {
      console.log(res);
      this.wxData = res.data;
      this.wxData.package = "prepay_id=" + res.data.prepay_id;
      wx.config({
        appId: res.data.appid, // 必填，公众号的唯一标识
        timestamp: res.data.timestamp, // 必填，生成签名的时间戳
        nonceStr: res.data.nonce_str, // 必填，生成签名的随机串
        signature: res.data.sign, // 必填，签名
        jsApiList: ["chooseWXPay"], // 必填，需要使用的JS接口列表
      });
      wx.ready(() => {});
      wx.error((e) => {
        console.error(e);
      });
    });
}

• payjsapi是后端接口，用axios封装的，可以根据自己的需求来定义

由于微信支付参数原因，前端需要将prepay_id字段配置成package

this.wxData.package = "prepay_id=" + res.data.prepay_id;

• jsApiList中配置的是微信支付的js接口方法

支付方法

👉 根据文档中的描述，微信支付分为两个版本，而且两个版本的文档简直是天差地别呀。

👉 点击进入微信支付V2开发文档

👉 点击进入微信支付V3开发文档

👉 点击支付按钮时，请求微信支付方法

methods: {
    handlePay() {
      wx.chooseWXPay({
        timeStamp: this.wxData.timestamp,
        nonceStr: this.wxData.nonce_str,
        package: this.wxData.package, 
        signType: "RSA",
        paySign: this.wxData.sign,
        appId: this.wxData.appid,
        success: function (res) {
          // 支付成功后的回调函数
          console.log("支付成功回调", res);
        },
        fail: function (res) {
          console.log("支付失败回调", res);
        },
      });
    },
  }

• signType在v2文档中，默认是MD5，但是实际默认是HMAC-SHA256

• 但是不管你使用哪种方式进行签名加密，都会提示你签名方式不对，所以我就去采用了V3文档中的RSA方式

• 大家可以打开微信签名校验工具试试两种签名是否可以验证成功。
  
• 鉴于V2文档中的签名算法规则后端人员看起来比较懵逼，所以就采用了V3文档中的方式。
  

签名算法文档说明

V2文档

V3文档

V2 和 V3 差异对比

👉 对比之后，发现V3的规则比较适合后端开发人员查看，相对来说比较简洁。

有一个需要特别注意的点就是，参数需要加 \n, 参数需要加 \n, 参数需要加 \n 重要的事情说三遍

总结一下

微信支付功能不难，但是旧版本的文档对于开发人员来说不是特别友好（可能对于我来说是不太友好的）。

注意一下

在请求微信支付时，所有的参数均需要后端返回，返回参数需要和生成签名的参数一致，包括随机字符和时间戳。