深究WeixinJSBridge未定义之因

gself 发布于2019-05-29 17:49 / 320人阅读

摘要：未使用微信如果网页中未使用微信用户在微信中打开网站可能会触发这个错误，目前看来只有忽略。关于微信支付方法监听事件之后再进行下一步操作方法直接使用文档中的支付代码，不要使用公众号支付文档里面的代码。

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/

服务器托管私有云是否未定义未定义值 seajs未定义 sysgen未定义

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/8966.html

使用 vue2.0 开发微信公众号下前后端分离的SPA站点的填坑之旅

摘要：目前正在写一个微信公众号的小项目，记录一下遇到的问题和解决方法主要是前端。前端提交时使用，在后端再取出对应的微信支付看了下文档，以前是需要用唤起支付，而现在则是把微信内置到了微信的浏览器中。目前正在写一个微信公众号的小项目，记录一下遇到的问题和解决方法（主要是前端）。内容持续更新中~ 主要实现前后端分离前端为 SPA 单页面使用微信的JSSDK微信支付技术方案后端使用 php ...

afishhhhh 2019-06-27 16:36 评论0 收藏0
使用 vue2.0 开发微信公众号下前后端分离的SPA站点的填坑之旅

摘要：目前正在写一个微信公众号的小项目，记录一下遇到的问题和解决方法主要是前端。前端提交时使用，在后端再取出对应的微信支付看了下文档，以前是需要用唤起支付，而现在则是把微信内置到了微信的浏览器中。目前正在写一个微信公众号的小项目，记录一下遇到的问题和解决方法（主要是前端）。内容持续更新中~ 主要实现前后端分离前端为 SPA 单页面使用微信的JSSDK微信支付技术方案后端使用 php ...

Taonce 2019-08-20 16:49 评论0 收藏0
不同浏览器下 autoplay 的限制策略和方案的整理

摘要：不同浏览器下的限制策略和方案的整理端浏览器的限制策略和应对方案使用在端测试的浏览器包括浏览器浏览器浏览器浏览器限制策略内容参考自年月份发布的正式关掉了声音自动播放静音自动播放总是允许的。不同浏览器下 autoplay 的限制策略和方案的整理 PC 端浏览器的限制策略和应对方案使用 Mac 在 PC 端测试的浏览器包括 Chrome 浏览器 Safari 浏览器 Firefox...

LMou 2019-08-23 15:27 评论0 收藏0
企业微信端项目登陆、获取用户信息流程等

摘要：步入正题吧身份认证网页授权登陆企业微信提供了的授权登陆方式，可以让从企业微信终端打开网页获取成员的身份信息，从而避免登陆环节。在开发之前，最好先过一遍官方的API，不然很难往下进行。企业微信API 先介绍几个基本的概念： cropid 每个企业都拥有一个唯一的cropid，要获取次信息可在管理后台我的企业-企业信息下查看企业ID（这个需要管理员权限的） userid 每个成员都有一...

Amio 2019-08-26 10:46 评论0 收藏0