WKWebView使用WebViewJavascriptBridge需要注意的地方

H5和原生端交互，用WebViewJavascriptBridge其實挺簡單的。只要參照github上的Demo即可。

• 注意點一：如果註冊了bridge後，與H5的調用無法成功，檢查一下H5小夥伴代碼裏有沒有以下片段。這一段JS代碼是不能改的，必須原樣copy。

function setupWebViewJavascriptBridge(callback) {
    if (window.WebViewJavascriptBridge) { return callback(WebViewJavascriptBridge); }
    if (window.WVJBCallbacks) { return window.WVJBCallbacks.push(callback); }
    window.WVJBCallbacks = [callback];
    var WVJBIframe = document.createElement('iframe');
    WVJBIframe.style.display = 'none';
    WVJBIframe.src = 'wvjbscheme://__BRIDGE_LOADED__';
    document.documentElement.appendChild(WVJBIframe);
    setTimeout(function() { document.documentElement.removeChild(WVJBIframe) }, 0)
}

如果沒有這段js代碼，紅框裏的代碼就不會執行。

這句代碼[_base injectJavascriptFile]是注入js文件，也是交互的關鍵。在執行這行代碼之前，有這麼一個判斷[_base isBridgeLoadedURL:url]。點進去查看，具體方法如下：

-(BOOL)isBridgeLoadedURL:(NSURL*)url {
    return ([[url scheme] isEqualToString:kCustomProtocolScheme] && [[url host] isEqualToString:kBridgeLoaded]);
}
/*
#define kCustomProtocolScheme @"wvjbscheme"
#define kQueueHasMessage      @"__WVJB_QUEUE_MESSAGE__"
#define kBridgeLoaded         @"__BRIDGE_LOADED__"
*/

如果H5代碼不加上述規定的js代碼，那麼這個if語句裏傳入的url永遠都是最原始傳入html的地址，return NO，因此也就不會執行[_base injectJavascriptFile]。

• 注意點二：Run以後發現Crash了，在官網的Demo裏也同樣會Crash。原因是某個回調調用了多次。這個Crash只有在WKWebView會發生，用UIWebView是好的。

解決方法如下，加一行代碼即可。參考issue。不知爲何，作者始終沒有合併這個issue也沒有修復這個bug，所以通過cocoapods集成的同學別忘記改源碼。