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)
})
