下載依賴

NPM庫

npm install weixin-jsapi

引入

import wx from 'weixin-jsapi'

拉起支付

// 點擊立即支付按鈕
payNow () {
    var $this = this;
    this.$post('/wx/pay/orderPayNow',    // 支付接口 
        {
            ... ...   一堆參數(shù)
            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, // 統(tǒng)一支付接口返回的prepay_id參數(shù)值
                    signType: res.data.signType, // 簽名方式
                    paySign: res.data.paySign, // 支付簽名(簽名算法看微信開放文檔的js-sdk文檔的附錄1，當然這是后端的事情)
                    // 支付成功，跳入支付成功頁面，點擊完成按鈕會進入success和complete函數(shù)
                    success: function (res) {
                        // res.errMsg === 'chooseWXPay:ok'方式判斷前端返回,微信團隊鄭重提示：
                        // res.errMsg將在用戶支付成功后返回ok，但并不保證它絕對可靠， 切記。
                        // res.errMsg === 'chooseWXPay:cancel'  支付取消

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

點擊這個完成按鈕，就會進入success和complate函數(shù)中，進行判斷就好了