微信公众号支付完整流程

一、微信支付相关文档

jsapi支付下单：https://pay.weixin.qq.com/wiki/doc/apiv3/apis/chapter3_1_1.shtml

jsapi支付场景：https://pay.weixin.qq.com/wiki/doc/api/jsapi.php?chapter=7_1

jsapi调起支付：https://pay.weixin.qq.com/wiki/doc/api/jsapi.php?chapter=7_7&index=6

后端统一下单接口：https://pay.weixin.qq.com/wiki/doc/api/jsapi.php?chapter=9_1

二、通过微信授权获取openid

授权成功获取凭证code传给后端，后端拿code换openid。发送请求调用微信官方接口（参数appid、密钥、code），用code凭证换取用户openid。

如何进行微信用户授权：点此链接跳转微信授权流程

三、微信支付代码

给提交支付按钮绑定事件payOrder

<van-button v-else block type="info" @click="payOrder" native-type="submit">
   微信支付
</van-button>
注意：因为使用的vant组件库，所以样式根据实际需求编写

2. 通过后端接口返回6个核心参数

// 调用后台接口获取配置参数
payOrder () {
  this.payno = payno(); // 随机生成的订单号（根据需求传递）
 // payTest接口：后端提供的统一下单接口，获取六个参数（appId、时间戳、随机串、package、签名方式、签名）
  payTest({ orderNo: this.payno, amount: this.chongzhiForm.paymoney }).then((res) => {
 // 打印后端返回的res，状态码200执行下面操作
    if (res.data.code == 200) {
      const pay_params = res.data.data  // 拿到返回的6个参数，在调起支付页面时使用
 // 检测支付环境 WeixinJSBridge
      if (typeof WeixinJSBridge === "undefined") {
        if (document.addEventListener) {
          document.addEventListener('WeixinJSBridgeReady', this.onBridgeReady, false);
        } else if (document.attachEvent) {
          document.attachEvent('WeixinJSBridgeReady', this.onBridgeReady);
          document.attachEvent('onWeixinJSBridgeReady', this.onBridgeReady);
        }
      } else {
        this.onBridgeReady(pay_params);  // 携带参数，调起支付页面
      }
    } else {
      alert('微信支付调起失败！');
    }
  }).catch((err) => {
    console.log(err);
  })
},

返回参数示例：

3. 调起支付页面相关代码

// params参数是payOrder中调用后台接口payTest获取的参数
onBridgeReady (params) {
  WeixinJSBridge.invoke(
    'getBrandWCPayRequest', {
    "appId": params.appId,         // 公众号名称，由商户传入
    "nonceStr": params.nonceStr,   // 支付签名随机串
    "package": params.package,     // 统一支付接口返回的prepay_id参数值
    "paySign": params.paySign,     // 支付签名
    "signType": params.signType,   // 签名方式
    "timeStamp": params.timeStamp, // 支付签名时间戳
  }, res => {
  // 电脑端不能查看res返回的err_msg，需要在手机端支付测试，可以下载vconsole插件查看返回的信息
    console.log(res);
    if (res.err_msg == "get_brand_wcpay_request:ok") {
      this.$toast.success('支付成功');
      this.$router.push({ name: "paysuccess" });  // 支付成功跳转页面，可以通过query传参
    } else if (res.err_msg == "get_brand_wcpay_request::fail") {
      this.$toast.fail('支付失败');
    } else if (res.err_msg == "get_brand_wcpay_request:cancel") {
      this.$toast.fail('取消支付');
    } else {
      console.log("支付异常");
    }
  });
},

4. 真机调试调起支付页面

四. 其他配置

1、下载vconsole插件查看支付时返回的信息

npm install vconsole

在main.js文件内进行注册：

import Vconsole from "vconsole";
let vConsole = new Vconsole();
export default vConsole;

安装完毕手机端和微信开发者工具右下角会出现绿色图标

查看支付结果：支付成功、取消支付、支付失败

返回结果值说明