iOS与H5界⾯JSBridge交互Demo
iOS与H5界⾯JSBridge交互Demo
最近公司需要加活动和新闻模块, boss看同样的设计稿, 我们iOS做⼀遍, 安卓做⼀遍, ⼩程序⼜做⼀遍; 所以决定⽤H5页⾯. 但我们Native不仅仅加载URL就⾏, 还需要跟H5有交互, 安卓⼤哥跟我慢慢填坑…
我⽤了⼀个library(GCWebviewJSBridge-iOS), github⽹址:
他的Demo不太容易看得懂, 看得我⼀脸懵逼, 我写了⼀个简洁明了的Demo
⾸先做好准⼯作, 建⽴⼀些基本的视图
iOS的准备⼯作
// 1.新建WebView
self.webView = [[UIWebView alloc] initWithFrame:self.view.bounds];
[self.view addSubview:self.webView];
// 2.加载⽹页
NSString *indexPath = [[NSBundle mainBundle] pathForResource:@"index" ofType:@"html"];
NSString *appHtml = [NSString stringWithContentsOfFile:indexPath encoding:NSUTF8StringEncoding error:nil];
NSURL *baseUrl = [NSURL fileURLWithPath:indexPath];
[self.webView loadHTMLString:appHtml baseURL:baseUrl];
// 3.开启⽇志
[GCWebviewJSBridge setEnableLogging];
// 4.给webView建⽴JS和OC的沟通桥梁
_bridge = [GCWebviewJSBridge bridgeForWebView:self.webView];
[_bridge setwebViewDelegate:self];
JS的准备⼯作
之前是只写⼀套, 发现iOS⾏了Android⼜不⾏了; Android⾏了iOS⼜不⾏了. 最后才知道需要写两套
// 这段代码是固定的，必须要放到js中
function setupWebViewJavascriptBridge(callback) {
//Android
if (window.GCWebviewAndroidJSBridge) {
callback(GCWebviewAndroidJSBridge)
} else {
document.addEventListener(
'GCWebviewAndroidJSBridgeReady'
, function() {
callback(GCWebviewAndroidJSBridge)
},
false
);
}
//iOS
if (window.GCWebviewJSBridge) {
return callback(GCWebviewJSBridge);
}
if (window.KBWVJSBCallBacks) {
return window.KBWVJSBCallBacks.push(callback);
}
window.KBWVJSBCallBacks = [callback];
var GCWVJSBIframe = ateElement('iframe');
GCWVJSBIframe.style.display = 'none';
GCWVJSBIframe.src = 'gcwvjsbscheme://__GC_BRIDGE_LOADED__';
document.documentElement.appendChild(GCWVJSBIframe);
setTimeout(function() { veChild(GCWVJSBIframe) }, 0);
}
⼀. iOS注册⽅法提供给JS调⽤
iOS注册访问相册⽅法
[_bridge registerObjCHandler:@"openCamera" handler:^(id data, GCWVJSBResponseCallback responseCallback) {
NSLog(@"需要%@图⽚", data[@"count"]);
UIImagePickerController *imageVC = [[UIImagePickerController alloc] init];
imageVC.sourceType = UIImagePickerControllerSourceTypePhotoLibrary;
[self presentViewController:imageVC animated:YES completion:nil];
}];
JS调⽤该⽅法的代码⽚段
JS调⽤打开相册⽅法
bridge.callHandler('openCamera', {'count':'10张'}, function responseCallback(responseData) {
console.log("OC中返回的参数:", responseData)
});
js教程removechild⼆. JS注册⽅法提供给iOS调⽤
iOS注册提供⽤户信息⽅法
/* JS给OC提供公开的API, 在OC中可以⼿动调⽤此API, 并且可以接收OC中传过来的参数，同时可回调OC */
// 获取⽤户信息
console.log("OC中传递过来的参数:", data);
// 把处理好的结果返回给OC
responseCallback({"userID":"DX001", "userName":"旋之华", "age":"18", "otherName":"旋之华"})
});
iOS调⽤JS中的⽅法, 获得⽤户信息
// 调⽤JS中的API
[self.bridge callHandler:@"getUserInfo" data:@{@"userId":@"DX001"} responseCallback:^(id responseData) {
NSString *userInfo = [NSString stringWithFormat:@"%@，姓名:%@，年龄:%@", responseData[@"userID"], responseData[@"userName"], responseData[@"age"]]; }];
⽂章写得不详细, 可以以下我的Demo直接看代码:
哎~ 这种⽅式实现，需要三⽅配合测试, 真的是很⿇烦啊~

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。