iOS与H5界面JSBridge交互Demo
来源:互联网 发布:美橙互联和阿里云 编辑:程序博客网 时间:2024/05/20 18:05
iOS与H5界面JSBridge交互Demo
最近公司需要加活动和新闻模块, boss看同样的设计稿, 我们iOS做一遍, 安卓做一遍, 小程序又做一遍; 所以决定用H5页面. 但我们Native不仅仅加载URL就行, 还需要跟H5有交互, 安卓大哥跟我慢慢填坑…
我用了一个library(GCWebviewJSBridge-iOS), github网址:github.com/wheying/GCWebviewJSBridge-iOS
他的Demo不太容易看得懂, 看得我一脸懵逼, 我写了一个简洁明了的Demo
- 首先做好准工作, 建立一些基本的视图
- iOS的准备工作
// 1.新建WebViewself.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 = document.createElement('iframe'); GCWVJSBIframe.style.display = 'none'; GCWVJSBIframe.src = 'gcwvjsbscheme://__GC_BRIDGE_LOADED__'; document.documentElement.appendChild(GCWVJSBIframe); setTimeout(function() { document.documentElement.removeChild(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注册方法提供给iOS调用
- iOS注册提供用户信息方法
/* JS给OC提供公开的API, 在OC中可以手动调用此API, 并且可以接收OC中传过来的参数,同时可回调OC */// 获取用户信息bridge.registerHandler('getUserInfo', function(data, responseCallback) { 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直接看代码:Demo下载地址
哎~ 这种方式实现,需要三方配合测试, 真的是很麻烦啊~
阅读全文
0 0
- iOS与H5界面JSBridge交互Demo
- iOS与H5界面JSBridge交互Demo
- 【iOS开发】H5与Native交互之JSBridge技术
- WebView Native与H5交互—jsbridge
- rn封装原生jsbridge与H5交互
- H5与iOS交互
- iOS 与H5交互
- iOS 与h5交互
- iOS 与H5交互
- iOS与H5交互
- iOS 与 h5 交互
- iOS与h5交互
- iOS与h5交互
- JsBridge与客户端交互
- iOS 开发 objective-C界面与H5交互
- H5与Android IOS 交互
- H5与iOS原生交互
- Android 与H5交互的小Demo
- JavaScript基础之删除DOM
- HTML5基础知识汇总_(2)自定义属性及表单新特性
- Date类型转换
- 输出月份英文名(20 分)
- 快速了解什么是自然语言处理
- iOS与H5界面JSBridge交互Demo
- “轻’”而不“薄”的轻量应用服务器初使用体验
- servlet在tomcat下的配置及冲突
- poj 2096 期望DP 解题报告
- servlet的生命周期(容器如何管理servlet)
- Retrofit框架之拦截器
- Java疯狂详解之Spring_装配Bean
- c++通过Thrift向flume发送数据
- 安装 Tensorflow Object Detection API