深究WeixinJSBridge未定义之因

Fundebug并无使用微信JS-SDK，然而却收到了WeixinJSBridge is not defined的报错：

咱们的用户也收到了相似的错误报警，而且不少开发者都遇到相似的问题:

• 个人微信项目，没有用到微信JS-SDK，但iphone部分手机点击某些功能无效，后来加了window.onerror监控，发现有Uncaught ReferenceError: WeixinJSBridge is not defined报错;
• 从微信进入支付中心直接唤起微信支付时有时会抛出ReferenceError：weixinJSBridge is not defined的异常;
• 使用AppCan生成Web/微信App版，调用微信JSAPI支付方式，提示WeixinJSBridge内置对象undefined;
• ......

因而可知，这是一个很是广泛的问题。可是若是没有在测试阶段没有遇到过，而后又没有作线上错误监控的话，就很难发现这个问题。咱们在这里将这个错误进行一些分析，让你们少走弯路。

什么是微信JS-SDK?

这里引用官方文档:

微信JS-SDK是微信公众平台面向网页开发者提供的基于微信内的网页开发工具包。经过使用微信JS-SDK，网页开发者可借助微信高效地使用拍照、选图、语音、位置等手机系统的能力，同时能够直接使用微信分享、扫一扫、卡券、支付等微信特有的能力，为微信用户提供更优质的网页体验。

Q&A

我没有使用微信JS-SDK, 为何会报错呢？

微信内置浏览器会有WeixinJSBridge，可是须要必定的加载时间。

我使用了微信JS-SDK, 为何会报错呢？

微信webview注入钩子有时序问题：在WeixinJSBridge还未注入以前，就已经成功注入其它依赖于WeixinJSBridge的其它XX模块。在XX模块中调用WeixinJSBridge就会失败。

如何解决？

若是你开发一款移动应用，必不可少要考虑分享到微信的功能；若是你开发网页，那么用户之间的分享更多的也是经过微信。那么这个问题到底有多严重，如何解决也变得相当重要。

未使用微信JS-SDK

若是网页中未使用微信JS-SDK, 用户在微信中打开网站可能会触发这个错误，目前看来只有忽略。由于是微信JS-SDK自身的问题，咱们也没法控制。

关于微信支付

方法1

监听ready事件以后再进行下一步操做

if (typeof window.WeixinJSBridge == "undefined") {
     $(document).on('WeixinJSBridgeReady', function() {
         $('#weiXinPay').click();
     });
 } else {
     $('#weiXinPay').click();
 }

方法2

直接使用JS-SDK文档中的支付代码，不要使用公众号支付文档里面的代码。具体请参考微信JS-SDK说明文档 - 微信支付

PS: 关于这个问题的帖子从2014年开始就有了，然而问题依然存在，但愿微信的同窗可以给出官方的解决方案。

参考连接

• Uncaught ReferenceError: WeixinJSBridge is not defined
• Uncaught ReferenceError: WeixinJSBridge is not defined问题
• 微信支付问题：Uncaught ReferenceError: WeixinJSBridge is not defined
• 传说中的WeixinJSBridge和微信rest接口
• 监听wxbridge加载后再唤起微信支付

关于Fundebug

Fundebug专一于JavaScript、微信小程序、微信小游戏、支付宝小程序、React Native、Node.js和Java实时BUG监控。 自从2016年双十一正式上线，Fundebug累计处理了7亿+错误事件，获得了Google、360、金山软件、百姓网等众多知名用户的承认。欢迎免费试用！

版权声明

转载时请注明做者Fundebug以及本文地址：
https://blog.fundebug.com/2017/02/18/weixinjsbridge-is-not-defined/