下(xià)載依賴

NPM庫

npm install weixin-jsapi

引入

import wx from 'weixin-jsapi'

拉起支付

// 點擊立即支付按鈕
payNow () {
    var $this = this;
    this.$post('/wx/pay/orderPayNow',    // 支付接口 
        {
            ... ...   一堆參數
            totalFee: this.totalFee          // 示例：總費用
        }
    ).then(function(res) {
        if(res.code == 1000){
            wx.ready(function(){
                wx.chooseWXPay({
                    appId:res.data.appId,     // appId
                    timestamp: res.data.timeStamp, // 支付簽名時間戳
                    nonceStr: res.data.nonceStr, // 支付簽名随機串
                    package: res.data.packageValue, // 統一支付接口返回的prepay_id參數值
                    signType: res.data.signType, // 簽名方式
                    paySign: res.data.paySign, // 支付簽名(簽名算法看微信開放文(wén)檔的js-sdk文(wén)檔的附錄1，當然這是後端的事情)
                    // 支付成功，跳入支付成功頁面，點擊完成按鈕會進入success和(hé)complete函數
                    success: function (res) {
                        // res.errMsg === 'chooseWXPay:ok'方式判斷前端返回,微信團隊鄭重提示：
                        // res.errMsg将在用戶支付成功後返回ok，但并不保證它絕對可(kě)靠， 切記。
                        // res.errMsg === 'chooseWXPay:cancel'  支付取消

                        if (res.errMsg === 'chooseWXPay:ok') {      // 支付成功進入這個(gè)判斷
                                $this.$toast('支付成功!')
                                $this.$router.replace({       // 支付成功後跳入自己需要額頁面
                                    path: "/payHistory",
                                })
                        } else if (res.errMsg === 'chooseWXPay:cancel') {    // 經過測試 用戶取消支付不會進入這個(gè)判斷，而是進入complate和(hé)cancel函數
                                $this.$toast('取消支付');
                        }
                        $this.$toast('success：' + res.errMsg)
                    },
                    // 不管支付成功與否，隻要拉起支付之後進行任何操作之後，都會進入complate函數
                    complete: function (res) {      
                        if (res.errMsg === 'chooseWXPay:ok') {           // 成功 res.errMsg === 'chooseWXPay:ok' // 支付成功提示頁面，點擊完成按鈕之後 
                                $this.$toast('支付成功!')
                                $this.$router.replace({
                                    path: "/payHistory",
                                })
                                // 或者關(guān)閉窗口// wx.closeWindow()  如(rú)果調用這個(gè)關(guān)閉接口，要在驗簽的時候配置jsapiList// WeixinJSBridge.call('closeWindow');
                        } else if (res.errMsg === 'chooseWXPay:cancel') {   // 取消 res.errMsg === 'chooseWXPay:cancel'
                                $this.$toast('取消支付');
                        }
                        $this.$toast('complete：' + res.errMsg)
                        // 對于下(xià)面這個(gè)說法：我經過實際測試：ios和(hé)Android支付成功後點擊完成按鈕都會進入success和(hé)complete函數，并且返回信息都是 res.errMsg === 'chooseWXPay:ok'
                        // 網友說法：對于安卓客戶端支付成功後不進入chooseWXPay函數success的問(wèn)題原因是：iOS和(hé)安卓返回的數據不同，實際如(rú)下(xià)：支付成功後：安卓客戶端返回的是 {"errMsg":"getBrandWCPayRequest:ok"}，而iOS返回的是{"err_Info":"success","errMsg":"chooseWXPay:ok"}，安卓找不到success入口
                    },
                    // 用戶取消支付--實際上進入cancel 和(hé) complate 函數
                    cancel: function (res) {     
                        $this.$toast('已取消支付');
                    },
                    // 支付失敗
                    fail: function (res) {
                        $this.$toast('支付失敗，請重試');
                    }
                })
            })
            // 驗簽錯誤或者其他錯誤
            wx.error(function (res) {
                $this.$toast('支付錯誤！')
            })
        }else{
            $this.$toast({
                message: '獲取支付信息失敗，請重試',
            });
        }
    }).catch(function(error){
        $this.$toast('繳費請求失敗！請重試');
    });
}

點擊這個(gè)完成按鈕，就會進入success和(hé)complate函數中(zhōng)，進行判斷就好了