JS与OC交互第三方框架：WebViewJavascriptBr

16/08/04/wed

JS与OC交互的第三方框架：WebViewJavascriptBridge

• 之前讲的JS与OC的交互使用的是JavascriptCore，但是有限制的是适用于iOS7之后，且对于两种方式的学习之后，个人的理解是，如果多数需求为 js 与 oc 之间的调用，只是做调用处理的话，推荐使用原生的JavascriptCore ，如果多数需求为 js 与 oc 之间的传值，数据传输可以考虑使用第三方库WebViewJavascriptBridge

• WebViewJavascriptBridge 是支持到 iOS6 之前的版本的，用于支持 native 的 iOS与javascript 交互。如果需要支持到 iOS6 之前的 app，使用它是很不错的。本篇讲讲WebViewJavascriptBridge 的基本原理及详细讲讲如何去使用，包括iOS端的使用和JS端的使用。

• WebViewJavascriptBridge 的功能如名字一样就如一座桥，链接 OC 与 JS ，使用起来也比较规范，简单。基本上就是在一端注册方法，在另一端进行方法调用。

OC端的使用

WebViewJavascriptBridge 的创建与关联

//首先使用cocoapods导入WebViewJavascriptBridge，再导入头文件
/#import "WebViewJavascriptBridge.h"
//声明一个全局的bridge
@property WebViewJavascriptBridge* bridge;
//绑定bridge与webview
self.bridge = [WebViewJavascriptBridge bridgeForWebView:webView];

OC端的注册与调用

//OC端的注册
//注册jscalloc方法，js调用oc,data为oc回调给js的参数
[self.bridge registerHandler:@"jscalloc" handler:^(id data, WVJBResponseCallback responseCallback) {
    NSLog(@"ObjC Echo called with: %@", data);
    responseCallback(data);
}];
------------------------------------------------------------------
//OC端的调用
//调用js中注册的showapiinner方法，不传入数据，没有回调
[_bridge callHandler:@"showapiinner"];
//调用js中注册的showapiinner方法，传入数据str，没有回调
[_bridge callHandler:@"showapiinner" data:str];
//调用js中注册的showapiinner方法，传入数据str，且有回调（可以获取到回调参数responData）
 [_bridge callHandler:@"showapiinner" data:str responseCallback:^(id responseData) {
  NSLog(@"%@",responseData);
    }];

JS端的使用

JS端使用前的关联

//此段代码需要放在JS文件里面，如果引用的是HTML文件，需要将此段写入<script>标签内
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)
}
setupWebViewJavascriptBridge(function(bridge) {
    `在此函数里写所有的JS注册和调用方法`
})

JS端的注册与调用

//JS端的注册
//JS端注册JSEcho方法，可供OC端调用，同时有参数回调给OC端
    bridge.registerHandler('JSEcho', function(data, responseCallback) {
        console.log("JS Echo called with:", data)
        responseCallback(data)
    })
------------------------------------------------------------------
//JS端的调用
//JS端的调用OC端注册的ObjCEcho方法，在调用的时候传入参数{'key':'value'}，也收到了OC端的回调数据responseData
    bridge.callHandler('ObjCEcho', {'key':'value'}, function responseCallback(responseData) {
        console.log("JS received response:", responseData)
    })