公众号支付jssdk支付回调不生效，使用jsapi

公众号支付jssdk支付回调不生效，使用jsapi
最近在使用vue开发微信公众号h5,有支付的功能，本来使用的jssdk，我们的需求是支付完需要在支付成功的回调调用查询状态的接口，然后跳转页面 但是jssdk的成功回调不触发，再网上找了很多文档，还是没什么结果，然后换了一种方式 使用的是jsapi
在微信内部可以直接唤起微信浏览器的内置对象 WeixinJSBridge

jsapi支付文档：

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

下面就是主要代码啦

      <div @click="membership">开通会员</div>

methods:{
     kaitong() {
        let params = {
          cardId: this.cardid, //会员卡ID
          payChannel: this.payChannel,//支付渠道 我们分为 微信内部和浏览器h5支付
        };
        cardbuy(params)
          .then((res) => { //这个接口主要是查询订单并返回订单信息，所有信息由后端返回会比较严谨
            if (res.responseCode === 10000) {
              if (res.responseData.id) {
              //接口成功返回后调用getpayapp这个方法
                this.getpayapp(res.responseData.id);
              }
            }
          })
          .catch((err) => {
            console.error("支付失败", err);
          });
    },
}

getpayapp方法通过payChannel 来区分调用不同的接口

    //获取订单参数
    getpayapp(id) {
      if (this.payChannel === "微信JSAPI") {
        getWXJSParam(id)
          .then((res) => {
            if (res.responseCode === 10000) {
              this.starToPay(res.responseData, id);
            }
          })
          .catch((err) => {
            this.$toast("获取订单信息失败");
          });
      } else {
        getWXH5Param(id)
          .then((res) => {
            if (res.responseCode === 10000) {
              this.starToPay(res.responseData);
            }
          })
          .catch((err) => {
            console.error("获取订单信息失败", err);
          });
      }
    },

下面就是支付的重点了 starToPay方法中的两个参数payargs：是一些支付必要参数，id:是当前订单id 是为了支付成功后查状态使用的

    //支付流程开始
    starToPay(payargs, id) {
      var that = this;
      let params = {
        appId: payargs.appId, //公众号ID，由商户传入
        timeStamp: payargs.timeStamp, //时间戳，自1970年以来的秒数
        nonceStr: payargs.nonceStr, //随机串
        package: payargs.package,
        signType: payargs.signType, //微信签名方式：
        paySign: payargs.paySign,
      };
      if (typeof WeixinJSBridge == "undefined") {
        if (document.addEventListener) {
          document.addEventListener(
            "WeixinJSBridgeReady",
            function () {
              this.onBridgeReady(params, id);
            },
            false
          );
        } else if (document["attachEvent"]) {
          document["attachEvent"]("WeixinJSBridgeReady", function () {
            this.onBridgeReady(params, id);
          });
          document["attachEvent"]("onWeixinJSBridgeReady", function () {
            this.onBridgeReady(params, id);
          });
        }
      } else {
        this.onBridgeReady(params, id);
      }
    },

成功回调我加了一个定时器，查询订单状态 只是为了更严谨，防止订单查询失败的情况 因为微信支付有可能会有延迟

    onBridgeReady(Data, id) {
      const _this = this;
      // eslint-disable-next-line no-undef
      WeixinJSBridge.invoke("getBrandWCPayRequest", Data, function (res) {
        if (res.err_msg == "get_brand_wcpay_request:ok") {
          // _this.payding(id);
          // window.location.href = "http://www.domido313.com/duoWo";
          let count = 3;
          let timer = setInterval(() => {
            if (count > 0 && count <= 3) {
              count--;
              //查询订单并修改订单状态 
              selectPayStatus(id)
                .then((res) => {
                  if (res.responseData === 1) {
                    clearInterval(timer);
                    window.location.href = "要跳转的地址";
                  }
                })
                .catch((err) => {
                  this.$toast("查询订单状态失败", err);
                });
            } else {
              clearInterval(timer);
              window.location.href = "要跳转的地址";
              timer = null;
            }
          }, 1000);
        }
      });
    },

希望可以帮到大家呀！！！