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集成的同学别忘记改源码。