好处：WeixinJSBridge不同于jssdk，不需要鉴权，是微信内置浏览器自带的接口。

1. 点击支付按钮事件

handlePay(){
  let that = this;
  if (typeof WeixinJSBridge == "undefined") {
    if (document.addEventListener) {
      document.addEventListener(
          "WeixinJSBridgeReady",
          that.onBridgeReady,
          false
      );
    } else if (document.attachEvent) {
      document.attachEvent("WeixinJSBridgeReady", that.onBridgeReady);
      document.attachEvent("onWeixinJSBridgeReady",that. onBridgeReady);
    }
  } else {
    this.onBridgeReady();
  }
}

2. 执行支付相关

onBridgeReady() {
  let that = this;

  let params = {
    // ... 支付相关参数，商品名称价格等等
  }
  // 调用获取支付签名接口
  getPaySign(params).then(({data})=>{
    let {appid:appId,timeStamp,nonce_str:nonceStr,packageStr,signType,sign:paySign} = data;

    WeixinJSBridge.invoke(
        "getBrandWCPayRequest",
        {
          appId, // 微信的appid
          timeStamp, //时间戳
          nonceStr, //随机串
          package: packageStr,  // 订单号
          signType, //微信签名方式：
          paySign //微信签名
        },
        function(res) {
          if (res.err_msg == "get_brand_wcpay_request:ok") {
            // 使用以上方式判断前端返回,微信团队郑重提示：
            //res.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠。
            that.$toast("支付成功")
          } else {
            that.$toast("支付失败，请重新支付");
          }
        }
    );
  })
}

3. 补充下 eslint 会针对WeixinJSBridge报错，需要添加下屏蔽(在package.json)

"eslintConfig": {
  "root": true,
  "env": {
    "node": true
  },
  "globals": {"WeixinJSBridge" : false},// 不要检测WeixinJSBridge
  "extends": [
    "plugin:vue/essential",
    "eslint:recommended"
  ],
  "parserOptions": {
    "parser": "babel-eslint"
  },
  "rules": {}
},