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();