虽然原生方法也可以满足我们一些日常的OC与H5交互需求，但是一旦交互需求多了，代码就会显得很凌乱和松散；WebViewJavascriptBridge就为我们解决了这样的问题，他可以很轻松简单的在OC和JS之间传送消息，还是可以方便的携带参数，处理回调，极大的提高了我们的开发效率。
首先不管你是手动或是pods，要先把WebViewJavascriptBridge集成到我们的工程里来，然后倒入头文件#import "WebViewJavascriptBridge.h"
OC部分准备
- 创建WebViewJavascriptBridge的实例属性
@property WebViewJavascriptBridge* bridge;
- 创建webView，然后与bridge绑定，并设置代理
WKWebView *webView = [[WKWebView alloc] initWithFrame:self.view.bounds];
[self.view addSubview:webView];
_bridge = [WebViewJavascriptBridge bridgeForWebView:webView];
[_bridge setWebViewDelegate:self];
JS部分准备
- JS初始配置
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 = 'https://__bridge_loaded__';
document.documentElement.appendChild(WVJBIframe);
setTimeout(function() { document.documentElement.removeChild(WVJBIframe) }, 0)
}
- 实现函数和回调
setupWebViewJavascriptBridge(function(bridge) {
/* Initialize your app here */
bridge.registerHandler('testJavascriptHandler', function(data, responseCallback) {
log('ObjC 传来=', data)
var responseData = { 'JS':'回调给OC' }
log('JS 收到=', responseData)
responseCallback(responseData)
})
bridge.callHandler('testObjcCallback', {'来自JS': 'hello OC'}, function(response) {
log('JS 收到回调=', response)
}
})
调用
- JS调用OC
[_bridge registerHandler:@"testObjcCallback" handler:^(id data, WVJBResponseCallback responseCallback) {
NSLog(@"testObjcCallback方法被调用了，参数: %@", data);
responseCallback(@"通知JS收到消息");
}];
在OC中注册JS的testObjcCallback的方法监听，当JS的testObjcCallback函数被调用后，我们就会在上边拿到回调以及参数，并且可以用responseCallback()回调给JS。
- OC调用JS
id data = @{ @"来自OC": @"hello JS" };
[_bridge callHandler:@"testJavascriptHandler" data:data responseCallback:^(id response) {
NSLog(@"testJavascriptHandler 收到了: %@", response);
}];
当我们在OC中通过callHandler方法调用JS的testJavascriptHandler函数，在JS中该函数就会被调用，并把参数传递过去。
总结
WebViewJavascriptBridge可以很灵活实在OC和JS的调用和传参，而且每个方法单独注册回调，代码很清晰。而且api简单易上手，学习成本不高，可以为你解决ios原生方法里那些多重判断带来的代码臃肿、逻辑混乱。
