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

蜡笔小心_
750 阅读3分钟

持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第2天，点击查看活动详情

前言

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

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

安装和引入jssdk

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

如需进一步提升服务稳定性，当上述资源不可访问时，可改访问：res2.wx.qq.com/open/js/jwe… （支持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等方法

image.png

👉 我们可以在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接口方法

支付方法

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

image.png

👉 点击进入微信支付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规则差异V2
JSON参数格式XML
POST、GET、PUT、PATCH、DELETE提交方式POST
AES-256-GCM加密回调加密无需加密
RSA加密敏感加密RSA加密
UTF-8编码方式UTF-8
非对称密钥SHA256-RSA签名方式MD5或HMAC-SHA256

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

image.png

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

总结一下

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

注意一下

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

avatar
文章
阅读
粉丝