本文實例為大家分享了vue前后分離調(diào)起微信支付的具體代碼，供大家參考，具體內(nèi)容如下

@ VUE調(diào)起微信支付

VUE前后分離調(diào)起微信支付

支付很簡單,但每次都是在網(wǎng)上直接扒下來使用,老年人記憶,于是就自己記錄一下,方便以后快速的粘貼復(fù)制;

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

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

第二步：封裝 微信支付方法

wexinPay(data, cb, errorCb) {  //獲取后臺傳入的數(shù)據(jù)  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('發(fā)起微信支付')  //下面要發(fā)起微信支付了  wx.config({   debug: false, // 開啟調(diào)試模式,調(diào)用的所有api的返回值會在客戶端alert出來，若要查看傳入的參數(shù)，可以在pc端打開，參數(shù)信息會通過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, // 統(tǒng)一支付接口返回的prepay_id參數(shù)值，提交格式如：prepay_id=***）    signType: signType, // 簽名方式，默認為'SHA1'，使用新版支付需傳入'MD5'    paySign: paySign, // 支付簽名    success: function (res) {     // 支付成功后的回調(diào)函數(shù)     cb(res);    },    fail: function (res) {     //失敗回調(diào)函數(shù)     errorCb(res);    }   });  });  wx.error(function (res) {   // config信息驗證失敗會執(zhí)行error函數(shù)，如簽名過期導(dǎo)致驗證失敗，具體錯誤信息可以打開config的debug模式查看，也可以在返回的res參數(shù)中查看，對于SPA可以在這里更新簽名。   /*alert("config信息驗證失敗");*/  }); }

第三步：向后臺請求數(shù)據(jù) 成功獲取 轉(zhuǎn)入微信支付方法 調(diào)起 微信支付

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