webView對于每個iOS程序員并不陌生鲫尊，故JS與OC的交互是每個iOS程序員必須掌握的技能洲胖。而JS和OC就好比兩塊沒有交集的大陸希停，如果想要使它們相互通信就必須要建立一座“橋梁”下隧。然而它咨演，WebViewJavascriptBridge為我們建立了一座"橋梁"。好用风纠，好用的一塌糊涂况鸣，好用的無法無天，好用的不講道理竹观！
而且镐捧，微信也使用了這個庫。
注意：建議大家去github上看官方文檔以及demo臭增，不僅簡單還特別詳細!
那么現(xiàn)在我們來看看懂酱，怎么使用這個強大的庫！
集成
對于H5兄弟而已誊抛，他需要復制并粘貼 setupWebViewJavascriptBridge 到他的 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)
}
對于我們而已，只需集成即可芍锚。
1.將此添加到您的podfile并運行pod安裝以安裝:
pod 'WebViewJavascriptBridge', '~> 6.0'
2.導入頭文件
#import <WebViewJavascriptBridge/WebViewJavascriptBridge.h>
3..m文件
#import <WebViewJavascriptBridge/WebViewJavascriptBridge.h>
@interface ViewController () <UIWebViewDelegate>
@property (nonatomic, strong) UIWebView *webView;
@property WebViewJavascriptBridge* bridge;
@end
@implementation ViewController
- (void)viewDidLoad {
[super viewDidLoad];
[self.view addSubview:self.webView];
// 開啟WebViewJavascriptBridge 默認日志顯示昔园，例如打印的 “WVJB SEND:” 之類的
[WebViewJavascriptBridge enableLogging];
// 初始化WebViewJavascriptBridge 對象
self.bridge = [WebViewJavascriptBridge bridgeForWebView:self.webView];
// 設置WebViewJavascriptBridge 對象的代理
[self.bridge setWebViewDelegate:self];
}
JS 調(diào)用 OC
示例
JS
setupWebViewJavascriptBridge(function(bridge) {
bridge.callHandler('ObjC Echo', {'key':'value'}, function responseCallback(responseData) {
console.log("JS received response:", responseData) // oc回調(diào)的數(shù)據(jù)
})
})
OC
[self.bridge registerHandler:@"ObjC Echo" handler:^(id data, WVJBResponseCallback responseCallback) {
NSLog(@"ObjC Echo called with: %@", data); // 接收js的數(shù)據(jù)
responseCallback(data);
}];
ObjC Echo：方法名，兩端保持一致!
{'key':'value'}：js傳給oc的數(shù)據(jù)并炮，可為空默刚！
data：oc接收js的數(shù)據(jù)！
responseCallback(data)：oc回調(diào)給js數(shù)據(jù)逃魄，可以空荤西！
responseData：js接收回調(diào)數(shù)據(jù)，可為空伍俘！
場景1
點擊webview上的按鈕邪锌，跳轉(zhuǎn)到原生界面，不帶任何參數(shù)癌瘾！
JS
setupWebViewJavascriptBridge(function(bridge) {
bridge.callHandler('getMycluesIos', {'foo': null}, function(response) {
})
})
OC
[self.bridge registerHandler:@"getMycluesIos" handler:^(id data, WVJBResponseCallback responseCallback) {
// 直接跳轉(zhuǎn)界面
MyClueViewController *myClueVC = [[MyClueViewController alloc] init];
[self.navigationController pushViewController:myClueVC animated:YES];
}];
場景2
點擊webview上的按鈕觅丰，跳轉(zhuǎn)到原生界面，點擊時帶參數(shù)給原生界面妨退。
JS
setupWebViewJavascriptBridge(function(bridge) {
bridge.callHandler('getCluesDataIos', {'cluesdata': clues}, function(response) {
})
})
OC
[self.bridge registerHandler:@"getCluesDataIos" handler:^(id data, WVJBResponseCallback responseCallback) {
// data為json字符串
if ([[self dictionaryWithJsonString:data[@"cluesdata"]][@"code"] isEqual:@1]) {
ClueDetailViewController *clueDetailVC = [[ClueDetailViewController alloc] init];
clueDetailVC.leadsInfoId = [self dictionaryWithJsonString:data[@"cluesdata"]][@"data"][@"id"];
clueDetailVC.nameString = [self dictionaryWithJsonString:data[@"cluesdata"]][@"data"][@"customName"];
clueDetailVC.brandString = [self dictionaryWithJsonString:data[@"cluesdata"]][@"data"][@"intentionCar"];
clueDetailVC.stateString = [self dictionaryWithJsonString:data[@"cluesdata"]][@"data"][@"leadsStatusName"];
[self.navigationController pushViewController:clueDetailVC animated:YES];
}else {
[UIFactory creatTipsWithTitle:[self dictionaryWithJsonString:data[@"cluesdata"]][@"msg"] view:self.view];
}
}];
OC 調(diào)用 JS
示例
OC
[self.bridge callHandler:@"JS Echo" data:nil responseCallback:^(id responseData) {
NSLog(@"ObjC received response: %@", responseData);//JS回調(diào)數(shù)據(jù)
}];
JS
setupWebViewJavascriptBridge(function(bridge) {
bridge.registerHandler('JS Echo', function(data, responseCallback) {
console.log("JS Echo called with:", data)//接收OC數(shù)據(jù)
responseCallback(data)
})
})
JS Echo：方法名妇萄，兩端保持一致!
data：js接收oc的數(shù)據(jù)！
responseCallback(data)：js回調(diào)給oc數(shù)據(jù)咬荷，可為空冠句！
responseData：oc接收回調(diào)數(shù)據(jù)！
場景1
點擊h5上的按鈕幸乒，彈出原生控件（比如時間選擇框）懦底，把數(shù)據(jù)傳給h5界面！（只實現(xiàn)后半部分）
OC
[self.bridge callHandler:@"sendQudaoIos" data:@{@"dom":@"dkqd",@"text": model.canalName,@"id":model.channelId} responseCallback:^(id responseData) {
}];
JS
setupWebViewJavascriptBridge(function(bridge) {
bridge.registerHandler('sendQudaoIos', function(data, responseCallback) {
console.log("data)罕扎；
})
})
數(shù)據(jù)交互因它而變的簡單了聚唐！
推薦一篇文章：
深入剖析 WebViewJavascriptBridge
