vue--微信支付


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中 由於路徑問題,微信支付沒辦法成功。。。。

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM