16/08/04/wed
JS與OC交互的第三方框架：WebViewJavascriptBridge
之前講的JS與OC的交互使用的是JavascriptCore，但是有限制的是適用于iOS7之后，且對(duì)于兩種方式的學(xué)習(xí)之后，個(gè)人的理解是，如果多數(shù)需求為 js 與 oc 之間的調(diào)用，只是做調(diào)用處理的話，推薦使用原生的JavascriptCore ，如果多數(shù)需求為 js 與 oc 之間的傳值，數(shù)據(jù)傳輸可以考慮使用第三方庫WebViewJavascriptBridge
WebViewJavascriptBridge 是支持到 iOS6 之前的版本的，用于支持 native 的 iOS與javascript 交互。如果需要支持到 iOS6 之前的 app，使用它是很不錯(cuò)的。本篇講講WebViewJavascriptBridge 的基本原理及詳細(xì)講講如何去使用，包括iOS端的使用和JS端的使用。
WebViewJavascriptBridge 的功能如名字一樣就如一座橋，鏈接 OC 與 JS ，使用起來也比較規(guī)范，簡單。基本上就是在一端注冊(cè)方法，在另一端進(jìn)行方法調(diào)用。
OC端的使用
WebViewJavascriptBridge 的創(chuàng)建與關(guān)聯(lián)
//首先使用cocoapods導(dǎo)入WebViewJavascriptBridge，再導(dǎo)入頭文件
/#import "WebViewJavascriptBridge.h"
//聲明一個(gè)全局的bridge
@property WebViewJavascriptBridge* bridge;
//綁定bridge與webview
self.bridge = [WebViewJavascriptBridge bridgeForWebView:webView];
OC端的注冊(cè)與調(diào)用
//OC端的注冊(cè)
//注冊(cè)jscalloc方法，js調(diào)用oc,data為oc回調(diào)給js的參數(shù)
[self.bridge registerHandler:@"jscalloc" handler:^(id data, WVJBResponseCallback responseCallback) {
NSLog(@"ObjC Echo called with: %@", data);
responseCallback(data);
}];
------------------------------------------------------------------
//OC端的調(diào)用
//調(diào)用js中注冊(cè)的showapiinner方法，不傳入數(shù)據(jù)，沒有回調(diào)
[_bridge callHandler:@"showapiinner"];
//調(diào)用js中注冊(cè)的showapiinner方法，傳入數(shù)據(jù)str，沒有回調(diào)
[_bridge callHandler:@"showapiinner" data:str];
//調(diào)用js中注冊(cè)的showapiinner方法，傳入數(shù)據(jù)str，且有回調(diào)（可以獲取到回調(diào)參數(shù)responData）
[_bridge callHandler:@"showapiinner" data:str responseCallback:^(id responseData) {
NSLog(@"%@",responseData);
}];
JS端的使用
JS端使用前的關(guān)聯(lián)
//此段代碼需要放在JS文件里面，如果引用的是HTML文件，需要將此段寫入<script>標(biāo)簽內(nèi)
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) {
`在此函數(shù)里寫所有的JS注冊(cè)和調(diào)用方法`
})
JS端的注冊(cè)與調(diào)用
//JS端的注冊(cè)
//JS端注冊(cè)JSEcho方法，可供OC端調(diào)用，同時(shí)有參數(shù)回調(diào)給OC端
bridge.registerHandler('JSEcho', function(data, responseCallback) {
console.log("JS Echo called with:", data)
responseCallback(data)
})
------------------------------------------------------------------
//JS端的調(diào)用
//JS端的調(diào)用OC端注冊(cè)的ObjCEcho方法，在調(diào)用的時(shí)候傳入?yún)?shù){'key':'value'}，也收到了OC端的回調(diào)數(shù)據(jù)responseData
bridge.callHandler('ObjCEcho', {'key':'value'}, function responseCallback(responseData) {
console.log("JS received response:", responseData)
})
