雖然原生方法也可以滿足我們一些日常的OC與H5交互需求拭荤，但是一旦交互需求多了，代碼就會(huì)顯得很凌亂和松散躲胳；WebViewJavascriptBridge就為我們解決了這樣的問題，他可以很輕松簡(jiǎn)單的在OC和JS之間傳送消息揩瞪，還是可以方便的攜帶參數(shù)疹鳄，處理回調(diào)拧略，極大的提高了我們的開發(fā)效率。
首先不管你是手動(dòng)或是pods瘪弓，要先把WebViewJavascriptBridge集成到我們的工程里來垫蛆，然后倒入頭文件#import "WebViewJavascriptBridge.h"
OC部分準(zhǔn)備
- 創(chuàng)建WebViewJavascriptBridge的實(shí)例屬性
@property WebViewJavascriptBridge* bridge;
- 創(chuàng)建webView，然后與bridge綁定腺怯，并設(shè)置代理
WKWebView *webView = [[WKWebView alloc] initWithFrame:self.view.bounds];
[self.view addSubview:webView];
_bridge = [WebViewJavascriptBridge bridgeForWebView:webView];
[_bridge setWebViewDelegate:self];
JS部分準(zhǔn)備
- 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)
}
- 實(shí)現(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中注冊(cè)JS的testObjcCallback的方法監(jiān)聽，當(dāng)JS的testObjcCallback函數(shù)被調(diào)用后呛占，我們就會(huì)在上邊拿到回調(diào)以及參數(shù)虑乖，并且可以用responseCallback()回調(diào)給JS。
- OC調(diào)用JS
id data = @{ @"來自O(shè)C": @"hello JS" };
[_bridge callHandler:@"testJavascriptHandler" data:data responseCallback:^(id response) {
NSLog(@"testJavascriptHandler 收到了: %@", response);
}];
當(dāng)我們?cè)贠C中通過callHandler方法調(diào)用JS的testJavascriptHandler函數(shù)栓票，在JS中該函數(shù)就會(huì)被調(diào)用决左，并把參數(shù)傳遞過去愕够。
總結(jié)
WebViewJavascriptBridge可以很靈活實(shí)在OC和JS的調(diào)用和傳參走贪，而且每個(gè)方法單獨(dú)注冊(cè)回調(diào)，代碼很清晰惑芭。而且api簡(jiǎn)單易上手坠狡，學(xué)習(xí)成本不高，可以為你解決ios原生方法里那些多重判斷帶來的代碼臃腫遂跟、邏輯混亂逃沿。
