深究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/