H5微信jsapi支付流程

   

         
微信支付
      
第一步 微信用户授权获取code:
        accreditWeChat() {
      //授权后 回调地址转码
      let url = urlencode(window.location.href);
      if (判断页面URL上面有没有code参数) {
        //没有code即说明用户未授权 引导授权
        window.location.href = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${
          this.encryParams.appId
        }&redirect_uri=${url}&response_type=code&scope=snsapi_userinfo&state=123#wechat_redirect`;
      } else {
        console.log("已经获得code 获取jsapi调用弹窗的参数");
        this.sendAxios(
         参数
        );
      }
    },
第二步 获取jsapi调用弹窗的参数(因为参数 这里是在后端提供的 要发请求):
    sendAxios(参数) {
        axios({
        method:'get',
        url:'接口',
        params:参数,
    }).then(res => {
        if (res.data.status == 0 ) {
            //第三调起判断
          this.TunedUp(res.data.params);
        } else {
          console.log("请求失败", res);
        }
      });
    },
第三步 判断是否为微信环境调起支付弹窗:
  TunedUp(params) {
      // 支付只能在微信内置浏览器才有效果,在其他浏览器里面是无效的，进行判断
      if (typeof WeixinJSBridge == "undefined") {
        console.log("请在微信客户端打开");

        if (document.addEventListener) {
          document.addEventListener(
            "WeixinJSBridgeReady",
            this.onBridgeReady(params),
            false
          );
        } else if (document.attachEvent) {
          document.attachEvent(
            "WeixinJSBridgeReady",
            this.onBridgeReady(params)
          );
          document.attachEvent(
            "onWeixinJSBridgeReady",
            this.onBridgeReady(params)
          );
        }
      } else {
        this.onBridgeReady(params);
      }
    },
第四步支付弹窗
     onBridgeReady(params) {
      let that = this;
      WeixinJSBridge.invoke(
        "getBrandWCPayRequest",
        {
          appId: params.weixinAppId, //公众号ID，由商户传入
          timeStamp: params.weixinTimestamp, //时间戳，自1970年以来的秒数
          nonceStr: params.weixinNonceStr, //随机串
          package: params.weixinPackage,
          signType: params.weixinSignType, //微信签名方式：
          paySign: params.weixinSign //微信签名
        },
        function(res) {
          if (res.err_msg == "get_brand_wcpay_request:ok") {
            // 使用以上方式判断前端返回,微信团队郑重提示：
            //res.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠。
            that.$alertMsg("支付成功");
            console.log("支付成功");
           
          } else {
            that.$alertMsg("支付取消");

            console.log("支付取消");
          }
        }
      );
    }