VUE前后分离调起微信支付 jssdk

VUE前后分离调起微信支付

支付很简单,但每次都是在网上直接扒下来使用,老年人记忆,于是就自己记录一下,方便以后快速的粘贴复制;

第一步 :VUE 需要安装 微信支付模块

import wx from "weixin-js-sdk";

后端只给了授权接口和统一下单接口

this.pay() //调用
......   
// 调起接口
    pay() {
      if (!localStorage.getItem("isAppId")) {
        this.accredit();
      } else {
        const params = {
          pay_type: "wechat",
          id: this.majorId,
          // coupon_code: "",
        };
        this.$api.studentUserMsgsPay(params).then((res) => {
          const { data, code } = JSON.parse(res);
          let that = this;
          if (code == 200) {
            this.wexinPay(
              {
                appId: data.appId,
                nonceStr: data.nonceStr,
                package: data.package,
                signature: data.signature,
                paySign: data.paySign,
                signType: data.signType,
                timeStamp: data.timeStamp,
              },
              //成功回调函数
              (res) => {
                console.log(res);
                that.isPay = false;
                that.studentUserMsgsGetMajor();
                that.$toast({
                  position: top,
                  message: "支付成功",
                });
              }
            );
          } else {
            that.$toast({
              position: top,
              message: data,
            });
          }
        });
      }
    },

    // 微信支付接口封装
    wexinPay(data, cb, errorCb) {
      console.log(cb, errorCb);
      let that = this;
      //获取后台传入的数据
      let appId = data.appId;
      let nonceStr = data.nonceStr;
      let signature = data.signature;
      let packages = data.package;
      let paySign = data.paySign;
      let signType = data.signType;
      let timestamp = data.timeStamp;
      console.log("发起微信支付");
      //下面要发起微信支付了
      wx.config({
        debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
        appId: appId, // 必填，公众号的唯一标识
        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 (r) {
            console.log("支付成功返回：", r);
            that.isPay = false;
            that.studentUserMsgsGetMajor();
            if (r.errMsg == "chooseWXPay:ok") {
              that.$toast({
                position: top,
                message: "支付成功",
              });
            } else {
              that.$toast({
                position: top,
                message: "支付失败",
              });
            }
          },
          cancel: function (r) {
            console.log("支付返回cancel：", r);

            that.$toast({
              position: top,
              message: "取消支付",
            });
          },
          fail: function (r) {
            console.log("支付返回fail：", r);
            that.$toast({
              position: top,
              message: "支付失败了",
            });
          },
          // success: function (res) {
          //   // 支付成功后的回调函数
          //   cb(res);
          //   that.$toast({
          //         position: top,
          //         message: "支付成功",
          //       });
          // },
          // fail: function (res) {
          //   //失败回调函数
          //   errorCb(res);
          // },
        });
      });
      wx.error(function (res) {
        console.log(res);
        // config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。
        alert("config信息验证失败");
      });
    },

    // 授权
    accredit() {
      if (!location.href.split("code=")[1]) {
        let hrefUrl = window.location.href;
        const requer = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=wxf260de8fae92e608&redirect_uri=${hrefUrl}&response_type=code&scope=snsapi_userinfo&state=123#wechat_redirect`;
        window.location.href = requer;
        // console.log(requer);
      } else {
        const codes = location.href.split("code=")[1].split("&")[0];
        const params = {
          code: codes,
        };
        this.$api.studentUserUpdateOpenid(params).then((res) => {
          const { data, code } = JSON.parse(res);
          if (code == 200) {
            this.isAppId = true;
            localStorage.setItem("isAppId", this.isAppId);
          } else {
            this.$toast({
              position: top,
              message: data,
            });
          }
        });
      }
    },