iOS开发趋势:Native与H5+JS 解决方案
来源:互联网 发布:什么是返利网和淘宝客 编辑:程序博客网 时间:2024/06/04 23:43
iOS开发趋势:Native与H5+JS 解决方案
版权声明:本文为博主原创文章,未经博主允许不得转载。
目录(?)[+]
支付宝红包火了,微信红包火了,作为开发者,敏感的就发现之前并不被看好的H5已经悄悄渗透进来,在原生(Native)代码中部分功能采用动态网页(HTML5+JavaScript)来实现,即保证了整体App的流畅度,又能及时推出一些活动和动态,目前主流App已经开始默认这种开发模式,未来的移动开发团队也需要H5的小伙伴加入进来了,实现动静结合,让页面更加灵活多变,接下来笔者就根据之前涉及到的项目经验来谈谈原生与网页交互的那些不得不说的琐事:
一、 原生代码中直接加载页面
1. 具体案例
加载本地/网络HTML5作为功能介绍页
2. 代码示例
//本地
//网络
3. 额外操作
a iOS中承载网页的容器是UIWebView,可以借助它的代理来监听网页加载情况;
b 在加载过程中,我们还可以获取该网页中的meta值,例如代码:
就是从meta中得到shareUrl对应的value值;
c 截获当前是发起的那种请求,以便native来做对应的控制,例如代码:
二、 原生代码操作页面元素
1. 具体案例
在嵌入H5后需要操作页面元素
2. 代码示例
a、获取当前页面的url。
b、获取页面title:
c、修改界面元素的值。
d、表单提交:
3. 代码说明
stringByEvaluatingJavaScriptFromString方法可以将javascript代码片段嵌入到页面中,通过这个方法就可以让iOS与UIWebView中的网页元素交互,例如上面的代码片段,它
功能非常的强大,用起来也相对简单,通过它我们可以很方便的操作页面元素,而且能直接插入一段JS方法,然后调用该方法执行;
三、 原生代码处理本地H5+JS
1. 具体案例
需要动态显示曲线图,如果直接加载绘制图形特别慢,所以采用本地放置模板,传入参数,然后模板自动绘制,提高体验,加快绘制;
2. 示例代码
3. 代码说明
a 这里需要采用绝对路径拖入H5模板,就是选择CreateFolder Reference, 只有这样才能保证H5能调用到本地的JS代码,不然加载不成功,这个最初找了很多原因,最后才发现是拖入时候选择问题;
b 如果要加入参数,注意需要先转成string,然后再转为URL;
四、 原生代码与网页交互通信
1. 具体案例
原生代码与H5相互调用方法,并传递参数,而且能回调数据;
2. 借助第三方实现
WebViewJavascriptBridge,该开源库非常完美的解决了原生代码与H5交互,即互殴;
3. 代码示例
1.初始化一个webview(viewdidload)
2.将此webview与WebViewJavascriptBridge关联(viewdidload)
此时webview就与js搭上桥了。下面就是方法的互调和参数的互传。
(1) js调oc方法(可以通过data给oc方法传值,使用responseCallback将值再返回给js)
这里注意testObjcCallback这个方法的标示。html那边的命名要跟ios这边相同,才能调到这个方法。当然这个名字可以两边商量着自定义。简单明确即可。
(2)oc调js方法(通过data可以传值,通过 response可以接受js那边的返回值 )
注意这里的 testJavascriptHandler也是个方法标示。
(3)oc给js传值(通过 response接受返回值 )
(4)oc给js传值(无返回值)
五、 总结
关于Native和H5的交互有各种形式,随着H5越来越成熟,未来的趋势就是两者形影不离,让App更具灵活性和实效性,也一定程度上提高了开发效率和迭代周期,是企业级移动应用开发的必选解决方案,推荐:IT面试宝典(典型)。
- iOS开发趋势:Native与H5+JS 解决方案
- iOS开发趋势:Native与H5+JS 解决方案
- iOS开发趋势:Native与H5+JS 解决方案
- iOS开发趋势:Native与H5+JS 解决方案
- Native与H5+JS 解决方案
- 【iOS开发】H5与Native交互之JSBridge技术
- iOS 开发之JS与Native交互
- iOS Native与 H5交互之 H5传递信息给 native
- ios native与js互调
- h5 与native
- Native与H5交互
- native与h5交互
- iOS原生APP与H5+JS交互
- ios与H5(JS)交互心得
- iOS开发中OC与H5网页交互之OC传值给JS(WKWebView)
- iOS原生与H5交互开发
- 混合开发 H5 与 ios、android 交互
- iOS开发 与H5进行交互
- Android Studio中新建和引用assets文件
- synchronized和lock的实现原理
- NOI2.2基本算法之递归和自调用函数 全排列 分析----如何写全排列函数
- APP加急审核
- RxAnroid之UI控件(View、Widget)RxBinding(同时异步执行多个Observable、同时异步执行多个任务)
- iOS开发趋势:Native与H5+JS 解决方案
- The node /hbase-unsecure is not in ZooKeeper.
- 过河问题_纪中2558_递推
- BZOJ 2669 局部极小值 CQOI2012
- css+jquery步骤进度条
- CodeForces 471B MUH and Important Things
- C++ const 修饰类的用法
- Lucene学习总结之三:Lucene的索引文件格式(3)
- java中引用指向问题