VUE前後分離調起微信支付

第一步 :VUE 需要安裝 微信支付模塊

npm install weixin-js-sdk
//加入需要引入的模塊
import wx from "weixin-js-sdk";

第二步 封裝 微信支付方法

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: 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 (res) {
 // 支付成功後的回調函數
 cb(res);
 },
 fail: function (res) {
 //失敗回調函數
 errorCb(res);
 }
 });
 });
 wx.error(function (res) {
 // config信息驗證失敗會執行error函數，如簽名過期導致驗證失敗，具體錯誤信息可以打開config的debug模式查看，也可以在返回的res參數中查看，對於SPA可以在這裏更新簽名。
 /*alert("config信息驗證失敗");*/
 });
 }

第三步 向後臺請求數據 成功獲取 轉入微信支付方法 調起 微信支付

 //請求後臺接口獲取數據 準備進行微信支付 
 that.axios.post("user/recommend", data).then(res => {
 //成功狀態下 
 if (res.data.status) {
 // 存儲微信支付數據data
 let data = res.data.data;
 console.log("即將跳轉微信支付");
 //函數爲分裝過得 (就是調用微信支付)
 http.wexinPay(
 {
 appId: data.appId,
 nonceStr: data.nonceStr,
 package: data.package,
 paySign: data.paySign,
 signType: data.signType,
 timeStamp: data.timeStamp
 },
 //成功回調函數
 res => {
 that.$router.push({ path: "/vip" });
 }
 );
 } 
 else {
 that.$message.error(res.data.message);
 }
 });