深究WeixinJSBridge未定义之因
发布在Fundebug2017年2月23日view:2639前端开发Express前端工程师
在文章任何区域双击击即可给文章添加【评注】!浮到评注点上可以查看详情。

对于Fundebug这样一个没有使用微信JS-SDK的产品来说,我们竟然收到了WeixinJSBridge is not defined 的报错:

Fundebug 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;
  • ……

由此可见,这是一个很普遍的问题。但是如果没有在测试阶段偶然遇到又没有使用线上错误监控的话,很难发现这个问题。而越来越多的客户开始使用我们Fundebug做bug监控,很有可能遇到这个问题。我们在这里将错误的原因做一个深入调查和分析,让大家少走弯路。

什么是微信JS-SDK ?

引用官方文档: 微信JS-SDK是微信公众平台面向网页开发者提供的基于微信内的网页开发工具包。 通过使用微信JS-SDK,网页开发者可借助微信高效地使用拍照、选图、语音、位置等手机系统的能力,同时可以直接使用微信分享、扫一扫、卡券、支付等微信特有的能力。

一问一答

  • 我没有用到微信JS-SDK, 为什么会报这个错呢?

    答: 微信内置浏览器会有WeixinJSBridge,但是需要一定的加载时间。

  • 我使用了微信JS-SDK, 但是为什么会出错呢?

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

如何解决

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

  • 如果网页中未使用微信JS-SDK, 用户在微信中打开网站可能会触发这个错误,目前看来只有忽略。因为是微信JS-SDK自身的问题,我们也无法控制。

  • 关于微信支付

    • 方法一: 改为监听ready事件之后再进行下一步操作

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

    • 方法二: 直接使用JS-SDK文档中的支付代码,不要使用公众号支付文档里面的代码。参考: 微信支付

后记: 关于这个问题的帖子从2014年开始就有了,然而到现在依然存在,可见一直没有修复好!

参考链接

[0] Fundebug: https://fundebug.com

1 微信支付: https://mp.weixin.qq.com/wiki/7/aaa137b55fb2e0456bf8dd9148dd613f.html#.E5.8F.91.E8.B5.B7.E4.B8.80.E4.B8.AA.E5.BE.AE.E4.BF.A1.E6.94.AF.E4.BB.98.E8.AF.B7.E6.B1.82

[2] Uncaught ReferenceError: WeixinJSBridge is not defined: http://www.henkuai.com/forum.php?mod=viewthread&tid=7450

[3] Uncaught ReferenceError: WeixinJSBridge is not defined问题: http://www.henkuai.com/thread-8365-1-1.html

[4] 微信支付问题:Uncaught ReferenceError: WeixinJSBridge is not defined: http://www.java-bbs.com/thread-14-1-1.html

[5] 传说中的WeixinJSBridge和微信rest接口: http://bbs.blueidea.com/thread-3103040-1-1.html

[6] 监听wxbridge加载后再唤起微信支付: https://github.com/whq731/mobile-problems/blob/master/%E7%9B%91%E5%90%ACwxbridge%E5%8A%A0%E8%BD%BD%E5%90%8E%E5%86%8D%E5%94%A4%E8%B5%B7%E5%BE%AE%E4%BF%A1%E6%94%AF%E4%BB%98.md

评论
发表评论
2年前
赞了此文章!
WRITTEN BY
Fundebug
https://fundebug.com, 线上bug实时监控
TA的新浪微博
PUBLISHED IN
Fundebug

Fundebug提供Web前端JavaScript代码的线上错误(bug)监测。支持所有浏览器, 包括IE8, 后台通过智能聚合,将大量看似不同实则相同的错误聚合到一起,减少干扰。而且Fundebug插件的使用十分简单: 只需要添加一行代码,三分钟就可以享受实时线上错误监测服务。欢迎您免费使用! 官方网站:https://fundebug.com

我的收藏