雖然原生方法也可以滿足我們一些日常的OC與H5交互需求，但是一旦交互需求多了，代碼就會顯得很凌亂和松散；WebViewJavascriptBridge就為我們解決了這樣的問題，他可以很輕松簡單的在OC和JS之間傳送消息，還是可以方便的攜帶參數(shù)，處理回調(diào)，極大的提高了我們的開發(fā)效率。
首先不管你是手動或是pods，要先把WebViewJavascriptBridge集成到我們的工程里來，然后倒入頭文件#import "WebViewJavascriptBridge.h"
OC部分準備
- 創(chuàng)建WebViewJavascriptBridge的實例屬性
@property WebViewJavascriptBridge* bridge;
- 創(chuàng)建webView，然后與bridge綁定，并設置代理
WKWebView *webView = [[WKWebView alloc] initWithFrame:self.view.bounds];
[self.view addSubview:webView];
_bridge = [WebViewJavascriptBridge bridgeForWebView:webView];
[_bridge setWebViewDelegate:self];
JS部分準備
- JS初始配置
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 = 'https://__bridge_loaded__';
document.documentElement.appendChild(WVJBIframe);
setTimeout(function() { document.documentElement.removeChild(WVJBIframe) }, 0)
}
- 實現(xiàn)函數(shù)和回調(diào)
setupWebViewJavascriptBridge(function(bridge) {
/* Initialize your app here */
bridge.registerHandler('testJavascriptHandler', function(data, responseCallback) {
log('ObjC 傳來=', data)
var responseData = { 'JS':'回調(diào)給OC' }
log('JS 收到=', responseData)
responseCallback(responseData)
})
bridge.callHandler('testObjcCallback', {'來自JS': 'hello OC'}, function(response) {
log('JS 收到回調(diào)=', response)
}
})
調(diào)用
- JS調(diào)用OC
[_bridge registerHandler:@"testObjcCallback" handler:^(id data, WVJBResponseCallback responseCallback) {
NSLog(@"testObjcCallback方法被調(diào)用了，參數(shù): %@", data);
responseCallback(@"通知JS收到消息");
}];
在OC中注冊JS的testObjcCallback的方法監(jiān)聽，當JS的testObjcCallback函數(shù)被調(diào)用后，我們就會在上邊拿到回調(diào)以及參數(shù)，并且可以用responseCallback()回調(diào)給JS。
- OC調(diào)用JS
id data = @{ @"來自OC": @"hello JS" };
[_bridge callHandler:@"testJavascriptHandler" data:data responseCallback:^(id response) {
NSLog(@"testJavascriptHandler 收到了: %@", response);
}];
當我們在OC中通過callHandler方法調(diào)用JS的testJavascriptHandler函數(shù)，在JS中該函數(shù)就會被調(diào)用，并把參數(shù)傳遞過去。
總結
WebViewJavascriptBridge可以很靈活實在OC和JS的調(diào)用和傳參，而且每個方法單獨注冊回調(diào)，代碼很清晰。而且api簡單易上手，學習成本不高，可以為你解決ios原生方法里那些多重判斷帶來的代碼臃腫、邏輯混亂。
