webView对于每个iOS程序员并不陌生，故JS与OC的交互是每个iOS程序员必须掌握的技能。而JS和OC就好比两块没有交集的大陆，如果想要使它们相互通信就必须要建立一座“桥梁”。然而它，WebViewJavascriptBridge为我们建立了一座"桥梁"。好用，好用的一塌糊涂，好用的无法无天，好用的不讲道理！
而且，微信也使用了这个库。
注意：建议大家去github上看官方文档以及demo，不仅简单还特别详细!
那么现在我们来看看，怎么使用这个强大的库！
集成
对于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 调用 OC
示例
JS
setupWebViewJavascriptBridge(function(bridge) {
bridge.callHandler('ObjC Echo', {'key':'value'}, function responseCallback(responseData) {
console.log("JS received response:", responseData) // oc回调的数据
})
})
OC
[self.bridge registerHandler:@"ObjC Echo" handler:^(id data, WVJBResponseCallback responseCallback) {
NSLog(@"ObjC Echo called with: %@", data); // 接收js的数据
responseCallback(data);
}];
ObjC Echo：方法名，两端保持一致!
{'key':'value'}：js传给oc的数据，可为空！
data：oc接收js的数据！
responseCallback(data)：oc回调给js数据，可以空！
responseData：js接收回调数据，可为空！
场景1
点击webview上的按钮，跳转到原生界面，不带任何参数！
JS
setupWebViewJavascriptBridge(function(bridge) {
bridge.callHandler('getMycluesIos', {'foo': null}, function(response) {
})
})
OC
[self.bridge registerHandler:@"getMycluesIos" handler:^(id data, WVJBResponseCallback responseCallback) {
// 直接跳转界面
MyClueViewController *myClueVC = [[MyClueViewController alloc] init];
[self.navigationController pushViewController:myClueVC animated:YES];
}];
场景2
点击webview上的按钮，跳转到原生界面，点击时带参数给原生界面。
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 调用 JS
示例
OC
[self.bridge callHandler:@"JS Echo" data:nil responseCallback:^(id responseData) {
NSLog(@"ObjC received response: %@", responseData);//JS回调数据
}];
JS
setupWebViewJavascriptBridge(function(bridge) {
bridge.registerHandler('JS Echo', function(data, responseCallback) {
console.log("JS Echo called with:", data)//接收OC数据
responseCallback(data)
})
})
JS Echo：方法名，两端保持一致!
data：js接收oc的数据！
responseCallback(data)：js回调给oc数据，可为空！
responseData：oc接收回调数据！
场景1
点击h5上的按钮，弹出原生控件（比如时间选择框），把数据传给h5界面！（只实现后半部分）
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)；
})
})
数据交互因它而变的简单了！
推荐一篇文章：
深入剖析 WebViewJavascriptBridge
网友评论