微信浏览器内调用支付JSAPI

主要还是得核对参数 没什么难度

前端主要做的就是获取支付参数 拉起支付
技术用的是vue
没有进行封装 正常使用没问题

// 点击按钮购买会员 JSapi

JSapiZifuvip(i) {
  console.log(i);
  let that = this;
  this.axios(
    config +
      "/order/purchaseMember?userId=" +
      localStorage.getItem("userId") +
      "&commodityNumber=" +
      i,
    {
      sessionId: this.sessionId,
      userId: localStorage.getItem("userId"),
      spbillCreateIp: this.clientIp,
      method: "POST",
      headers: {
        Authorization: localStorage.getItem("token")
      }
    }
  )
    .then(res => {
      // console.log(res, '支付信息')
      that.closeFullScreen(that.openFullScreen()); // 取消加载
      // 获取请求参数
      this.axios({
        url:
          config +
          "/pay?type=WX_JSAPI&&orderNumber=" +
          res.data.orderNumber,
        headers: {
          Authorization: localStorage.getItem("token")
        },
        // data: {
        //   userId : localStorage.getItem("userId"),
        // },
        method: "post"
      })
        .then(res2 => {
          console.log(res2.data, "打印的请求参数JSAPI", res2.data.data);
          that.params = res2.data.data;
          console.log(that.params, "this.params", res2.data.data);
          // 点击支付时候调用
          if (typeof WeixinJSBridge === "undefined") {
            if (document.addEventListener) {
              document.addEventListener(
                "WeixinJSBridgeReady",
                this.onBridgeReady(that.params),
                false
              );
            } else if (document.attachEvent) {
              document.attachEvent(
                "WeixinJSBridgeReady",
                this.onBridgeReady(that.params)
              );
              document.attachEvent(
                "onWeixinJSBridgeReady",
                this.onBridgeReady(that.params)
              );
            }
          } else {
            this.onBridgeReady(that.params);
          }
        })
        .catch(err => {
          that.closeFullScreen(that.openFullScreen()); // 取消加载
          console.log(err);
        });
    })
    .catch(err => {
      that.closeFullScreen(that.openFullScreen()); // 取消加载
      console.log(err);
    });
},

// 获取支付需要的参数
onBridgeReady(params) {
  console.log(params, "打印的params");
  const that = this;
  WeixinJSBridge.invoke(
    "getBrandWCPayRequest",
    {
      appId: params.appId, // 公众号名称，由商户传入
      timeStamp: params.timeStamp, // 支付签名时间戳，注意微信jssdk中的所有使用timestamp字段均为小写。成签但最新版的支付后台生名使用的timeStamp字段名需大写其中的S字符
      nonceStr: params.nonceStr, // 支付签名随机串，不长于 32 位
      package: params.package, // 统一支付接口返回的prepay_id参数值，提交格式如：prepay_id=\*\*\*）
      signType: params.signType, // 签名方式，默认为'SHA1'，使用新版支付需传入'MD5'
      paySign: params.paySign // 支付签名
    },
    function(res) {
      if (res.err_msg === "get_brand_wcpay_request:ok") {
        that.getUserInfo(); // 这里是查询订单是否支付完成，然后执行成功和失败的业务逻辑
      } else if (res.err_msg === "get_brand_wcpay_request:fail") {
        alert("支付失败！");
      }
    }
  );
},

`