淺析"WeixinJSBridge is not defined"

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 年開始就有了，然而問題依然存在，希望微信的同學能夠給出官方的解決方案。

如何過濾"WeixinJSBridge is not defined"錯誤？

如果您使用了Fundebug的前端網頁 JavaScript 錯誤監控服務，然后并不希望收到"WeixinJSBridge is not defined"的報錯的話，闊以通過配置filters屬性來過濾這個錯誤：

fundebug.filters = [
    {
        message: /WeixinJSBridge is not defined/
    }
];

參考鏈接

• 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/