VUE 微信公众号中调起微信支付

VUE 微信公众号中调起微信支付

这几天公司要求写一个微信公众号的在线充值，所以就需要调起微信中的微信支付。

首先我们要引入一个JSSDK 。可以在index.html里直接引入。也可下来之后import一下。我是直接在index.html里直接引入的。下边是我引入的路径。

<script src="http://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>

然后我们需要在页面加载的时候来，通过config接口，权限验证。这里边需要几个参数都是后台提供的。下边是我验证的代码。

    let URL = { url: encodeURI(window.location.href.split("#")[0]) };
    this.$http.post("/api/memberCenter/getJdkSign", URL).then(res => {
      var data = JSON.parse(res.body.data);//转为Json
      if (res.body.code == 200) {
        this.wx.config({
          debug: false,// 开启调试模式,调用的所有api的返回值会在客户端alert出来
          appId: data.appId,// 必填，公众号的唯一标识
          timestamp: data.timestamp,// 必填，生成签名的时间戳
          nonceStr: data.nonceStr,// 必填，生成签名的随机串
          signature: data.signature,// 必填，签名
        });
      }
    });

接下来就是点击支付按钮的时候调用的微信支付方法。我用的可能不是最新的，见谅啊。下边是我的代码。

   let data = {
        userId: this.uid,
        stationId: this.stationId,
        settleMoney: this.settleMoney,
        membershipType: this.membershipType,
        accountType: this.CardDistinguish,
        entityCardNum: this.entityCardNum,
        rechActivityId: this.rechActivityId
      };
      this.$http
        .post("/api/pay/transactions", data)
        .then(res => {
          if (res.body.code == 200) {
            var dataone = res.body.data;
            WeixinJSBridge.invoke(
              "getBrandWCPayRequest",
              {
                appId: dataone.appId, //公众号名称，由商户传入
                timeStamp: dataone.timeStamp, //时间戳，自1970年以来的秒数
                nonceStr: dataone.nonceStr, //随机串
                package: dataone.package,//这个package是比较坑的他的格式必须是                        prepay_id=wx22104854834640694c34f15a1066605800，是必须！！！！！！！！！！！！！！
                //我在写的时候就碰见了这个坑
                 signType: "RSA", //微信签名方式：
                paySign: dataone.paySign //微信签名
              },
              function(res) {
                if (res.err_msg == "get_brand_wcpay_request:ok") {
                  this.$router.push({
                    path: "/FuelCard"
                  });
                  // 使用以上方式判断前端返回,微信团队郑重提示：
                  //res.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠。
                } else {
                  alert("支付失败，走这里");
                }
              }
            );
          }
        })
        .catch(err => {
          console.log(err);
        });

如果你的vue项目是路由模式是history模式，那就万事大吉了。
如果你的项目是hash模式，那么对不起请你转成history模式，因为后台在验证的时候需要你的路由模式是history模式。

嗯呐，好的。微信支付写完了，在唤起微信支付的时候，心里还是有点小成就感的。我的代码应该是直接粘上就可以用。遇到什么问题可以加我微信。hu13204600595。

完事。

本文地址：https://blog.csdn.net/weixin_45680713/article/details/107507900