移動H5頁面微信支付踩坑之旅（微信支付、單頁面路由模擬、按鈕加鎖、輪詢等常見功能）

開發背景：

.net混合開發的vue模板語法的單頁面應用，因此不存在腳手架以及沒有路由能夠跳轉。

項目描述：

須要寫兩個頁面，在訂單詳情頁須要點擊「請輸入手機號」進入手機號綁定頁面，手機號綁定成功後自動跳轉到訂單詳情頁，若是該手機號已經綁定成功，則不顯示「請輸入手機號」（即不可點擊進入下一個頁面），只顯示該手機號。

項目思路：

在單頁面中使用v-show控制兩個頁面的切換，因此須要模擬真實兩個頁面的跳轉，即改變hash值而且監聽歷史條目變化。

1、監聽而且覆蓋微信的回退事件

當兩個頁面在同一路由下，從「手機號綁定」頁面點擊微信的返回時不會進入「確認訂單」頁面，會直接返回，因此經過在url尾部添加能夠識別的hash值而且使用方法進行監聽，以此判斷回到哪一個頁面。

知識點儲備：

關於window.onpopstate事件實際上是popstate事件在 window對象上的事件處理程序。每當處於激活狀態的歷史記錄條目發生變化時,popstate事件就會在對應window對象上觸發.
由於給url加上了hash值雖然不會從新發出http請求可是會改變瀏覽器的訪問歷史。因此即便進入了「手機號綁定」頁面，popstate也能監聽到。

1. 關於hash值
2. 關於思路
3. 關於js從新加載與刷新

代碼：

在「請輸入手機號」的點擊事件中加上能夠辨識的hash值

事件寫在methods中
複製代碼

inputPhoneNumber() {
        this.index = false;
        console.log("添加hash值");
        location.hash = "second";
        console.log("顯示綁定手機號的hash值");
        console.log(window.location);
},
複製代碼

監聽事件寫在mouted鉤子函數中
複製代碼

mounted() {
        var url = window.location.href;
        window.onpopstate = function () {                 
            console.log("監聽回退事件");
            if (location.hash.indexOf("#second") > -1) {
                           
            } else {
                window.location.href = url;  
                }
            }
    }
複製代碼

2、H5微信支付代碼

思路：

1.在確認訂單頁面點擊當即付款時，進行手機號是否綁定判斷，若是填寫手機號才能夠進行下一步
2.調用接口向後臺發送請求來拿去調用微信支付的參數（公衆號商戶付款的參數）；
3.根據後臺返回的參數進行判斷，若是訂單未完成，就調用微信支付的內置接口，若是存在訂單，則跳轉到訂單完成頁面。
4.根據微信支付返回參數進行判斷，若是返回ok則調用後臺接口進行輪詢，查詢訂單是否完成。根據後臺狀態碼進行成功失敗的頁面跳轉。

代碼：

付款按鈕：

toPayMoney() {
        console.log("觸發當即付款按鈕");
        var that = this;
        var returnUrl = location.href;
        that.disabled = true;
        if (!this.phone) {
            that.dialogVisible = true;
            that.infoMessage = "請先輸入手機號";
            console.log("確認訂單，手機號不存在時");
        } else {
            console.log("確認訂單，手機號存在時");
            that.selectParams();  //查詢參數
            console.log("確認訂單，手機號存在時，查詢支付參數");
        }
    },
複製代碼

查詢支付的參數：

selectParams() {
                        var that = this;
                        var returnUrl = location.href;
                          $.ajax({
                                url: '/api/wxpay/unifiedorder',
                                type: "GET",
                                cache: false,
                                dataType: 'json',
                                data: { number: this.number },
                                success: function (data) {
                                    if (data.code === 200) {
                                        if (data.data.isValid == true) {       
                                            return location.href = "/pay/subscription/" + @Model.SubscriptionID +"/finish?tradeNo=" + @Model.Number;
                                        } else {
                                            var json =data.data.jsParams;
                                            console.log("json" + (data.data.jsParams));
                                            //調起微信支付
                                            function onBridgeReady() {
                                                WeixinJSBridge.invoke(
                                                    'getBrandWCPayRequest', {
                                                        "appId": json["appId"],     //公衆號名稱，由商戶傳入
                                                        "timeStamp": json["timeStamp"],         //時間戳，自1970年以來的秒數
                                                        "nonceStr": json["nonceStr"], //隨機串
                                                        "package": json["package"],
                                                        "signType": json["signType"],         //微信簽名方式：
                                                        "paySign": json["paySign"] //微信簽名
                                                    },

                                                    function checkPayRes(res) {
                                                        console.log("請求後臺參數而且調用了微信支付");
                                                        //setInterval()
                                                        if (res.err_msg == "get_brand_wcpay_request:ok") {
                                                            that.polling();
                                                            // 使用以上方式判斷前端返回,微信團隊鄭重提示：res.err_msg將在用戶支付成功後返回    ok，但並不保證它絕對可靠。
                                                        } else {

                                                        }
                                                    }
                                                );
                                            }

                                            if (typeof WeixinJSBridge === "undefined") {
                                                if (document.addEventListener) {
                                                  
                                                    document.addEventListener('WeixinJSBridgeReady', onBridgeReady, false);
                                                } else if (document.attachEvent) {
                                         document.attachEvent('WeixinJSBridgeReady', onBridgeReady);
                                                    document.attachEvent('onWeixinJSBridgeReady', onBridgeReady);
                                                }
                                            } else {
                                                
                                                onBridgeReady();
                                            }
                                        }
                                    } 
                                },
                                error: function (data) {
                                    console.log("調用後臺查詢訂單未成功");
                                }
                            })
                    },
複製代碼

短輪詢的函數

polling() {
                        var that = this;
                          $.ajax({
                                 url: '/api/wxpay/unifiedorder',
                                 type: "GET",
                                 cache: false,
                                 dataType: 'json',
                                 data: { number: this.number },
                                  success: function (data) {
                                      if (code.data === 100) {
                                            console.log("狀態碼101須要持續輪詢查詢");
                                              setInterval(that.polling(), 1000);
                                      } else if (code.data === 200) {
                                          clearInterval(that.polling());
                                          console.log("狀態碼200須要持續輪詢查詢");
                                          console.log("支付成功");
                                          location.href = "/pay/subscription/" + @Model.SubscriptionID +"/finish?tradeNo=" + @Model.Number;
                                            } else {
                                                  console.log(data.msg);
                                            }
                                     }
                          })
                   }
                 
複製代碼

3、按鈕加鎖解鎖

其實上面的代碼已經包括了部分加鎖與解鎖功能，下面寫一下思路：

1. 使用button的 disabled屬性
2. 使用v-bind給每一個按鈕綁定變量。