微信支付的坑(jsapi)

具体流程网上都有,主要说一下前端开发者应该主要的,简单的说就两步。

1,获取所需要的参数信息(和后台开发沟通)

getWxPayInf() {
      PayApi.GetWxPay({ money: Math.abs(+this.payNumber), Title: this.title })
        .then(res => {
          if (res.ErrorCode == 1) {
            if (typeof WeixinJSBridge == "undefined") {
              if (document.addEventListener) {
                document.addEventListener(
                  "WeixinJSBridgeReady",
                  onBridgeReady,
                  false
                );
              } else if (document.attachEvent) {
                document.attachEvent("WeixinJSBridgeReady", onBridgeReady);
                document.attachEvent("onWeixinJSBridgeReady", onBridgeReady);
              }
            } else {
              this.onBridgeReady(res.Data);
            }
          }
        })
        .catch(err => {
          console.log(err);
        });
    },

2,调用微onBridgeReady(wxdata) {      let { appId, timeStamp, nonceStr, paySign } = wxdata;

      let _that = this;
      let paySuccess = JSON.stringify({
        MerchantID: +window.localStorage.getItem("userID"),
        Payment: Math.abs(+this.payNumber),
        Title: this.title,
        BillDetails: this.payIdArray,
        PayMethodName: "WXZF",
        OrderNo: wxdata.orderno
      });
      WeixinJSBridge.invoke(//在微信环境下就有这个对象,不用担心
        "getBrandWCPayRequest",
        {
          appId: appId, //公众号名称,由商户传入
          timeStamp: timeStamp, //时间戳,自1970年以来的秒数
          nonceStr: nonceStr, //随机串
          package: wxdata.package,
          signType: "MD5", //微信签名方式:
          paySign: paySign //微信签名
        },
        function(res) {
          if (res.err_msg == "get_brand_wcpay_request:ok") {
            // 使用以上方式判断前端返回,微信团队郑重提示:
            //res.err_msg将在用户支付成功后返回ok,但并不保证它绝对可靠。
            let wxcode = window.localStorage.getItem("wxcode");
            window.location.href = '根据业务逻辑进行跳转';
       这个里面很坑,不能写逻辑,目前我发现只能跳转页面,
       使用vue的this.$router.push是不可以的
       alert()都不填出来 
    
       window.location.href才可以跳转,如果跳转发现url传参有坑可以看我上一篇文章
} else if (res.err_msg == "get_brand_wcpay_request:cancel") { _that.$vux.alert.show({ content: "用户取消支付" }); } else { _that.$vux.alert.show({ content: "支付失败" }); } } ); },

 

posted @ 2020-03-25 22:52  OneIsA  阅读(378)  评论(0编辑  收藏  举报