微信支付 WeixinJSBridge.invoke

最近在项目中用到了微信支付，但是在对接完成后突然发现一个很有意思的问题。

一、问题：在微信浏览器中支付的时候，需要点两次支付按钮才会调用起微信支付

         支付过程中出现的现象，就是在点击支付的时候，界面上会显示正在登录，而后页面上没有其他反应，然后点击第二次的时候正常就可以拉起微信支付了。

那我们就定位一下问题，为什么不能一次性调用成功呢。

最后，在官网文档上面看见了

地址：https://pay.weixin.qq.com/wiki/doc/apiv3/open/pay/chapter2_3.shtml

  function onBridgeReady() {
      WeixinJSBridge.invoke('getBrandWCPayRequest', {
          "appId": "wx2421b1c4370ecxxx",   //公众号ID，由商户传入    
          "timeStamp": "1395712654",   //时间戳，自1970年以来的秒数    
          "nonceStr": "e61463f8efa94090b1f366cccfbbb444",      //随机串    
          "package": "prepay_id=wx21201855730335ac86f8c43d1889123400",
          "signType": "RSA",     //微信签名方式：    
          "paySign": "oR9d8PuhnIc+YZ8cBHFCwfgpaK9gd7vaRvkYD7rthRAZ\/X+QBhcCYL21N7cHCTUxbQ+EAt6Uy+lwSN22f5YZvI45MLko8Pfso0jm46v5hqcVwrk6uddkGuT+Cdvu4WBqDzaDjnNa5UK3GfE1Wfl2gHxIIY5lLdUgWFts17D4WuolLLkiFZV+JSHMvH7eaLdT9N5GBovBwu5yYKUR7skR8Fu+LozcSqQixnlEZUfyE55feLOQTUYzLmR9pNtPbPsu6WVhbNHMS3Ss2+AehHvz+n64GDmXxbX++IOBvm2olHu3PsOUGRwhudhVf7UcGcunXt8cqNjKNqZLhLw4jq\/xDg==" //微信签名
      },
      function(res) {
          if (res.err_msg == "get_brand_wcpay_request:ok") {
              // 使用以上方式判断前端返回,微信团队郑重提示：
              //res.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠。
          }
      });
  }
  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();
  }	  

随后检查了一下自己的代码：

if (WeixinJSBridge && payParam.appId) {
    WeixinJSBridge.invoke('getBrandWCPayRequest', payParam, function(res) {
	    if (res.err_msg == "get_brand_wcpay_request:ok") {
		    // 使用以上方式判断前端返回,微信团队郑重提示：
		    //res.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠。
		}
	});
} else {

}

原来是我没有写 WeixinJSBridgeReady 中加载导致微信环境第一次要去加载(所以会显示正在登录中)

那接下来我们把代码补充完整记录一下

二、解决方法

let onBridgeReady = () => {
    if (WeixinJSBridge && payParam.appId) {
        WeixinJSBridge.invoke('getBrandWCPayRequest', payParam, function(res) {
            if (res.err_msg == "get_brand_wcpay_request:ok") {
                // 使用以上方式判断前端返回,微信团队郑重提示：
                //res.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠。
                console.log('支付成功');
            }
            resolve(res);
        });
    } else {
        console.log('请在微信浏览器中打开支付');
    }
}

// 检测支付环境中的 WeixinJSBridge
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();
}

那么这个问题就是暂时告一段落了，在此也提醒自己一定要细致细致再细致。

如果有什么问题，请大家指教。