iOS开发进阶之旅-WebViewJavascriptBridge的使用

由于公司是一个电商平台，一些活动页面、商城首页对于灵活性要求比较高，对于这些灵活的页面，利用h5来开发是再合适不过的了。由于需求的驱动，在git上找到了WebViewJavascriptBridge，来实现h5与native的进行一些数据上的交互。经过一段时间的使用，对其有了一定的理解在此总结一下。

乍一看到WebViewJavascriptBridge的sample时，被里面的各种回调搞的有点难受，不过如果跳出来，从比较高的层次来看这个三方库的使用，暂时不去理会一些细枝末节思路会清晰很多。

WebViewJavascriptBridge实现交互的原理其实就是注册和调用的关系。

webView向OC传递数据：

OC注册handler，webView调用通过参数将数据传递进去，OC通过回调处理数据。

OC向webView传递数据也是一样的：

webView注册handler，OC通过参数将数据传递进去，webView通过回调处理数据。

对于WebViewJavascriptBridge的具体使用（OC端）

一个webView，一个bridge

javaScriptBridge是webView和native之间传递数据的桥梁，他的存在是依赖于一个webView的实例对象的，一般来说一个webView对应一个javaScriptBridge

@property
WebViewJavascriptBridge* bridge;

@property
UIWebView * webView;
bridge的初始化

[WebViewJavascriptBridge
enableLogging];

_bridge = [WebViewJavascriptBridge
bridgeForWebView:_webView
webViewDelegate:self
handler:^(id data,
WVJBResponseCallback responseCallback) {

}];
注册handler

[_bridge
registerHandler:@"testObjcCallback"
handler:^(id data,
WVJBResponseCallback responseCallback) {

      NSLog(@"testObjcCallback called: %@", data);

      responseCallback(@"Response from testObjcCallback");

}];

调用webView注册的handler

[_bridge
callHandler:@"testJavascriptHandler"
data:@{
@"foo":@"before ready"
}];

关于handler的调用

我们看到在WebViewJavascriptBridge中有两种类型的handler，这两种类型的handler的调用时机略有不同。
WebViewJavascriptBridge的调用时基于send和callhandler方法的。而这两种方法分别对应于以上两种handler。
js端调用bridge.send()对应于OC中初始化中的handler
js端调用bridge.callhandler对应于OC中注册的handler
关于handler中的参数
data：js传递给OC的数据，responseCallback，OC端拿到数据后并处理成功后针对js端的回调。

js端的使用
由于自己对于js是半瓶水的水平，就不在这里晃荡了，以下的这些为固定写法，js文件中必须包含这些代码

function connectWebViewJavascriptBridge(callback) {
if (window.WebViewJavascriptBridge) {
callback(WebViewJavascriptBridge)
} else {
document.addEventListener('WebViewJavascriptBridgeReady',   function() {
callback(WebViewJavascriptBridge)
}, false)
}
}

connectWebViewJavascriptBridge(function(bridge) {
bridge.init(function(message, responseCallback) {
log('JS got a message', message)
var data = { 'Javascript Responds':'Wee!' }
log('JS responding with', data)
responseCallback(data)
})
}

同理

oc中[_bridge send];对应于js中的bridge.init();
oc中的[_bridge callHandler:]方法，对应于js中的bridge.registerHandler();