现象

前几天分到一个bug，部分用户在使用微信支付时，支付失败，我分别用ios和安卓测试了下，两者都是支付失败！

案桌出错1.png

分析和解决思路

正好自己的手机在微信支付时会弹出，“调用支付JSAPI缺少参数：appId”，根据错误提示预测是appId的问题，于是在微信开发者工具中调试代码，发现appid一直都有正确值。度娘未果，都是在说ajax请求回来的json，直接传入到支付方法中，会提示这个错误，需要json转成object才行。我检查了代码，我们用的的确是object，但还是报错，而且是部分手机报错，脑壳疼......看来只能靠自己了。

//我们原来的代码
zhifu:function(){
    $.ajax({
        type: "POST",
        url: localStorage['url'] + "/api/xxx",
        data: data,
        success: function (result) {
            if (result.code == 0) {
                var appid = result.resultData.appid;
                var timestamp = result.resultData.timestamp;
                var packages = result.resultData.package;
                var paySign = result.resultData.paySign;
                var noncestr = result.resultData.noncestr;
                onBridgeReady(appid, timestamp, noncestr, packages, paySign);
            }
        },
        error: function (data) {}
    });

    function onBridgeReady(appid, timestamp, noncestr, packages, paySign) {
        WeixinJSBridge.invoke(
                'getBrandWCPayRequest', {
                    "appId": appid,
                    "timeStamp": timestamp,
                    "nonceStr": noncestr,
                    "package": packages,
                    "signType": "MD5",
                    "paySign": paySign
                },
                function (res) {
                    if (res.err_msg == "get_brand_wcpay_request:ok") {
                        window.location.href="pay_success.html";
                    }
                });
    }

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

打开微信开发者工具，调试页面时，发现支付方法被调用了2次，回想了在安卓上支付时，如果是清缓存后支付，会先弹出支付窗口，不到一秒再弹缺少appid错误；再次打开页面支付时，是先弹错误，再弹支付窗口。ios上无论什么情况只弹错误，无它。

调试支付了2次.png

回看代码，再对比官方文档，发现WeixinJSBridge判断这部分，是在页面载入时就执行的，而我们的代码是支付时，先执行支付方法，再执行WeixinJSBridge判断，所以导致支付2次。既而我把if (typeof WeixinJSBridge == "undefined")这段放到js最外层，另外支付方法也改了，调用不再传参，而是定义了全局变量存放支付参数，经测试，ios和安卓支付都正常。

ios成功.png

总结

在没有前人总结的结果下，需要自己多思考，多调试，大胆假设，严谨求证。多多理解官方文档！