vue-微信付款

末蓝、 2021-12-11 15:59 225阅读 0赞

## 微信支付方法 ##

*  微信付款不需要初始化功能, 只需要在使用的时候调用就可以了

### 一. 引包 ###

<!DOCTYPE html>
    <html>
      <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1,user-scalable=no">
        <title></title>
        <script src="http://res.wx.qq.com/open/js/jweixin-1.4.0.js "></script>
      </head>
    
      <body>
        <div id="app"></div>
        
      </body>
    </html>

### 二. 编写支付公共方法 ###

*  里面一些必传的参数, 是通过后台获取的

// 微信支付的公共方法
    async function weChatPay(weChatPayData, payFormTypes, vinCodeIn) { 
      let appId = weChatPayData.appId;
      let timestamp = weChatPayData.timeStamp;
      let nonceStr = weChatPayData.nonceStr;
      //let signature = weChatPayData.signature;
      let packages = weChatPayData.packages;
      let paySign = weChatPayData.paySign;
      let payFormType = payFormTypes;
      let vinCode = vinCodeIn;
      let orderNum = weChatPayData.orderTradeNo;
      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: "MD5", // 签名方式，默认为'SHA1'，使用新版支付需传入'MD5'
          paySign: paySign, // 支付签名
          success: function(res) {  // 支付成功后的操作
            if (payFormType === "Y") { 
              window.location.href =
                "http://xxxxx.com/nwcc/historylist2";
            } else if (payFormType === "W") { 
              // W Z
              window.location.href = 
                 "http://xxxx.com/nwcc/maintainreport?reportType=W&vinCode=" +
                vinCode +
                "&orderTradeNo=" +
                orderNum; 
            } else if (payFormType === "Z") { 
              // W Z
              window.location.href = 
                "http://xxxx.com/nwcc/maintainreport?reportType=Z&vinCode=" +
                vinCode +
                "&orderTradeNo=" +
                orderNum; 
            }
          },
          fail: function(res) { 
            alert("支付失败!");
          }
        });
      });
      wx.error(function(res) { 
        // config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。
        alert("config信息验证失败");
      });
    }
    
    // 微信支付
    Vue.prototype.$wxPay = weChatPay;

### 三. 调起支付 ###

*  通过后台获取到微信config签名然后调用上面的方法, 只要签名正确就可以调起支付界面了

`觉得有用的话就点个赞吧`