前端做微信支付（vue）

微信支付主要工作量在后端，前端就是调用后端给的微信支付接口，获取微信支付的相关参数：

首先你的安装微信支付模块并引入它

// npm install weixin-js-sdk
import wx from "weixin-js-sdk";

接下来你需要后端给你一个接口文档

类似于这样的

在就是你调用接口了，看代码吧：

1，点击立即支付的代码

toPay() {
      //请求后台接口获取数据 准备进行微信支付
      let param = {
        openId: sessionStorage.getItem("openId"),
        orderCode: this.orderInfo.orderCode,
        insuredAmt: this.orderInfo.insuredAmt,
        orderBody: "订单" + this.orderInfo.orderCode,
        tradeType: "JSAPI",
        clientIp: this.cip,
        remarks: "测试微信支付"
      };
      apiWechatData(param).then(res => {
        //成功状态下
        if (res.code == 200) {
          // 存储微信支付数据data
          let data = res.data;
          console.log(data);
          //调用微信支付
          this.wexinPay(
            {
              appId: data.appId,
              timeStamp: data.timeStamp,
              nonceStr: data.nonceStr,
              package: data.package,
              signType: data.signType,
              outTradeNo: data.outTradeNo,
              paySign: data.paySign
            },
            //成功回调函数
            res => {
              this.$router.push({ path: "/pay" });
            },
            res => {
              this.$notify({
                type: "danger",
                message: "支付失败"
              });
            }
          );
        } else {
          this.$notify({
            type: "danger",
            message: "支付异常"
          });
        }
      });
    },
    

2.微信支付的方法（拿来即用）

wexinPay(data, cb, errorCb) {
     //获取后台传入的数据
     let appId = data.appId;
     let timestamp = data.timeStamp;
     let nonceStr = data.nonceStr;
     let paySign = data.paySign;
     let outTradeNo = data.outTradeNo;
     let packages = data.package;
     let signType = data.signType;
     console.log("发起微信支付");
     //下面要发起微信支付了
     wx.config({
       debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
       appId: appId, // 必填，公众号的唯一标识
       timestamp: timestamp, // 必填，生成签名的时间戳
       nonceStr: nonceStr, // 必填，生成签名的随机串
       paySign: paySign, // 必填，签名，见附录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) {
       console.log("config信息验证失败");
     });
   }

注意事项：为了确保支付成功，你不能简单凭借接口中返回的成功状态就断定支付成功了，你需要根据轮循访问后端的订单接口看是否支付成功