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

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。

完事。

评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值