欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2022-06-22 11:41:59
VUE 微信公众号中调起微信支付VUE 微信公众号中调起微信支付这几天公司要求写一个微信公众号的在线充值,所以就需要调起微信中的微信支付。首先我们要引入一个JSSDK 。可以在index.html里直接引入。也可下来之后import一下。我是直接在index.html里直接引入的。下边是我引入的路径。然后我们需要在页面加载的时候来,...

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

相关标签: vue