微信支付 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();
}

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

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

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！