jsapi 調起微信支付的的踩坑

問題：

公眾微信號調起微信支付的時候，有的時候調起支付成功，有的時候調起支付失敗。利用抓包工具抓取數據顯示授權和調用后台的微信預支付訂單接口都成功並且都返回正確的數據。但是調起支付的時候傳入的data老是彈出{‘isTrusted:false’}，正常的data應該是調用生成預支付訂單的返回數據，即后台給返回的調起微信支付所需要的數據參數。我的代碼：

<script src="./js/jquery.js"></script>
<script src="http://res2.wx.qq.com/open/js/jweixin-1.4.0.js"></script>
<script src="./js/commom.js"></script>
<script>
    var code = GET('code');
    var data = JSON.parse(window.localStorage.getItem('data'));

    weixinPayFor(data);

    //微信生成預支付訂單(微信端)
    function weixinPayFor(data){
        var required_parameter = {
            totalprice:data.totalprice,
            orderNo:data.orderNo,
            code:code,
            url:'http://stg.keyidabj.com/mp/wx/cameraVipApp/payment.html',
        };
        postNet({
            param: required_parameter,
            action: "/getWeixinPayForPatriarch",
            successFull: function successFull(data) {
                // console.log(data);
                var result = data.result;
                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(result);
                }
            },
            failFull: function failFull(data){
                $('.loading').hide();
                $('.result-container').show();
                $('.result-main i').hide();
                $('.result-text').addClass('fail-text');
                toastText(data.info);
                let time = 5;
                setInterval(function () {
                    time--;
                    if(time>0){
                        $('.result-text').text(time+'s后頁面關閉');
                    }else {
                        window.history.go(-1);
                    }
                },1000)
            }
        });
    }

    function onBridgeReady(data){
        WeixinJSBridge.invoke(
            'getBrandWCPayRequest', {
                "appId":data.appid,     //公眾號名稱，由商戶傳入
                "timeStamp":data.timestamp,       //時間戳，自1970年以來的秒數
                "nonceStr":data.nonce_str, //隨機串
                "package":data.packageStr,
                "signType":data.signType,         //微信簽名方式：
                "paySign":data.paySign //微信簽名
            },
            function(res){
                if(res.err_msg == "get_brand_wcpay_request:ok"){
                    $('.loading').hide();
                    $('.result-container').show();
                    $('.result-main i').addClass('success');
                    $('.result-text').text('支付成功');
                    $('.result-text').addClass('success-text');

                }else if(res.err_msg == "get_brand_wcpay_request:cancel"){
                    // toastText('支付取消啦');
                    // errorAlert('您已取消支付');
                    $('.loading').hide();
                    $('.result-container').show();
                    $('.result-main i').addClass('fail');
                    $('.result-text').text('支付取消');
                    $('.result-text').addClass('fail-text');
                }else if(res.err_msg == "get_brand_wcpay_request:fail"){
                    $('.loading').hide();
                    $('.result-container').show();
                    $('.result-main i').addClass('fail');
                    $('.result-text').text('支付失敗');
                    $('.result-text').addClass('fail-text');
                }
            });
    }

    function backIndex(){
        window.location.href='./index.html';
    }
</script>

原因：
調起微信支付的時候，頁面會加載微信的js，會在所有的script標簽后面添加一行script用來加載微信的js，而我自己寫的js代碼沒有在所有的js文件加載完成之后調用。即沒有用$(function(){ }); 代碼包裹起來我的邏輯。會導致加載此頁面的時候從上往下執行。
而調用微信預支付訂單的接口是異步請求。如果異步請求返回的數據慢於微信js加載。則正常走調起微信支付。如果微信js加載完成慢於調用微信預支付訂單的接口返回數據。由於

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(result);
}

這段判斷，此時WeixinJSBridge 未初始化完成，故值為undefined 走if語句，此時的onBridgeReady方法沒有要求傳參數，故取不到data數據，調起支付的參數全都找不到，故調起支付失敗。

解決方法：
1.修改if語句。
將if語句修改為如下：

if (typeof WeixinJSBridge == "undefined"){
    if( document.addEventListener ){
        document.addEventListener('WeixinJSBridgeReady', function (){
            onBridgeReady(result);
        }, false);
    }else if (document.attachEvent){
        document.attachEvent('WeixinJSBridgeReady', function (){
            onBridgeReady(result);
        });
        document.attachEvent('onWeixinJSBridgeReady', function (){
            onBridgeReady(result);
        });
    }
}else{
    onBridgeReady(result);
}
當微信預支付訂單調用完成且微信js未加載完成時，走if判斷，此時頁面會監聽有沒有WeixinJSBridgeReady，此時是沒有，調起微信支付的時候將預支付訂單返回的數據傳給onBridgeReady函數作為參數。就仍可以調起微信支付。

方法2：
將自己的js邏輯代碼用$(function(){});包裹起來，即在所有的js代碼加載完成之后執行$(function(){});里面的函數代碼，也可以達到想要的效果。

總結：
1.理解微信瀏覽器的運行機制，異步函數的運行機制。
2.寫代碼要注意走查，每一步要清除是做什么的，代碼如何在瀏覽器上運行。
3.有目的性的排查問題，多思考，少些盲從的摸索會事半功倍。