关于微信公众号调起支付

最新推荐文章于 2024-07-26 18:01:53 发布

The young ProMonkey

最新推荐文章于 2024-07-26 18:01:53 发布

阅读量593

点赞数

分类专栏：微信公众号开发文章标签： vue.js

本文链接：https://blog.csdn.net/LiShuo_2019/article/details/115483130

版权

微信公众号开发专栏收录该内容

1 篇文章 0 订阅

订阅专栏

vue微信公众号项目中调起微信支付并发起支付的流程

首先在public文件夹下的index.html引入微信JS-SDK
<script src="http://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>

废话不多说直接上代码

// 定义微信支付代码，下面直接调用
wexinPay(data, cb, errorCb) {
      //获取后台传入的数据
      let appId = data.appId;
      let timestamp = data.timeStamp;
      let nonceStr = data.nonceStr;
      let signature = data.signature;
      let packages = data.package;
      let paySign = data.paySign;
      let signType = data.signType;
      console.log("发起微信支付");
      //下面要发起微信支付了
      wx.config({
        debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
        appId: "xxxxxxxxxxxx", // 必填，公众号的唯一标识
        timestamp: timestamp, // 必填，生成签名的时间戳
        nonceStr: nonceStr, // 必填，生成签名的随机串
        signature: signature, // 必填，签名，见附录1
        jsApiList: ["chooseWXPay"], // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
      });
      wx.ready(function () {
        wx.chooseWXPay({
          timestamp: timestamp, // 支付签名时间戳，注意微信jssdk中的所有使用timestamp字段均为小写。但最新版的支付后台生成签名使用的timeStamp字段名需大写其中的S字符
          nonceStr: nonceStr, // 支付签名随机串，不长于 32 位
          package: packages, // 统一支付接口返回的prepay_id参数值，提交格式如：prepay_id=***）
          signType: signType, // 签名方式，默认为'SHA1'，使用新版支付需传入'MD5'
          paySign: paySign, // 支付签名
          success: function (res) {
            // 支付成功后的回调函数
            cb(res);
          },
          fail: function (res) {
            //失败回调函数
            errorCb(res);
          },
        });
      });
      wx.error(function (res) {
        // config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。
        alert("config信息验证失败");
      });
    },
// 请求接口 拿到注入信息 
// 实际项目中可能会对axios api进行二次封装，这里就不多做处理了
 axios.post("xxxxxx", {
          xxxxx: "",
          xxxxx: "",
       }).then((res) => {
          console.log(res.data);
          if (res.data.ret == "ok") {
            let data = res.data.object;
            // 这里传入参数
            this.wexinPay(
              {
                appId: data.appId,
                nonceStr: data.nonceStr,
                package: data.package,
                paySign: data.paySign,
                signType: data.signType,
                timeStamp: data.timeStamp,
              },
              //成功回调函数
              (res) => {
                this.$toast("支付成功");
                this.$router.push("/home");
              }
            );
          } else {
            this.$toast(res.data.msg);
          }
        });