1、當前頁面沒有注冊:
需要登錄微信支付商家后台,添加支付路徑授權
2、安裝 weixin-js-sdk 微信SDK npm install weixin-js-sdk --save
3、引入 import wx from 'weixin-js-sdk';
4、在 created()中 執行一個函數獲取APPID等參數進行微信授權
fetchGetsignpackageAction(){ let param = {}; param.url = window.location.href; fetchGetsignpackage(param).then((res) => { let resData = res.data; if (resData.respHeader.resultCode === 0) { const Data = resData.respBody; wx.config({ debug: false, appId: Data.appId, timestamp: Data.timestamp, nonceStr: Data.nonceStr, signature: Data.signature, jsApiList: [ 'checkJsApi', 'onMenuShareAppMessage', 'onMenuShareTimeline', 'updateAppMessageShareData', 'updateTimelineShareData', 'hideMenuItems', 'showMenuItems', 'hideAllNonBaseMenuItem', 'showAllNonBaseMenuItem', 'getNetworkType', 'getLocation', 'hideOptionMenu', 'showOptionMenu', 'closeWindow', 'scanQRCode', 'chooseWXPay' ] }); }else{ Toast({ message: retData.respHeader.message || "網絡異常", }); } })
fetchGetsignpackage() axios請求返回的參數如下:
5、點擊支付調起微信支付執行的方法:
okFryWxPayHandler(){ let reqBody = {}; reqBody.orderId = this.orderId; reqBody.payType = this.payType; reqBody.openId = Cookies.get("openId"); fetchOrderPayMsg(reqBody).then((res) => { let resData = res.data; if(resData.respHeader.resultCode == 0){ let msg = JSON.parse(resData.respBody); let _this = this; wx.chooseWXPay({ "timestamp": msg["timestamp"], // 支付簽名時間戳,注意微信jssdk中的所有使用timestamp字段均為小寫。但最新版的支付后台生成簽名使用的timeStamp字段名需大寫其中的S字符 "nonceStr": msg["nonceStr"], // 支付簽名隨機串,不長於 32 位 "package": msg["package"], // 統一支付接口返回的prepay_id參數值,提交格式如:prepay_id=***) "signType": msg["signType"], // 簽名方式,默認為'SHA1',使用新版支付需傳入'MD5' "paySign": msg["paySign"], // 支付簽名 success: function (res) { // 支付成功后的回調函數 // alert(res); _this.submitActive = true; _this.$router.push({path: '/busi/paySuccess',query: {price: _this.totalPrice}}); }, cancel: function () { _this.submitActive = true; } }); }else{ this.submitActive = false; Toast({ message: resData.respHeader.message, }); } }); }
nuxt中 由於路徑問題,微信支付沒辦法成功。。。。