Android原生与H5交互的实现
来源:互联网 发布:ubuntu 配置保存 编辑:程序博客网 时间:2024/05/17 20:32
转自:http://blog.csdn.net/so_huangbo/article/details/55522205?utm_source=itdadao&utm_medium=referral
随着移动互联网的高速发展,常规的开发速度已经渐渐不能满足市场需求。原生H5混合开发应运而生,目前,市场上许多主流应用都有用到混合开发,例如支付宝、美团等。下面,结合我本人的开发经验,简单谈一下对混合开发的认识以及实现方式。
混合开发的优点
优点显而易见,由前端工程师写一个页面,多个平台都可以运行,省了android和ios工程师不少事,无形中提高了开发效率,节约了开发成本。
缺点
凡是使用过的人都知道,H5的界面显示在手机上,对点击、触摸、滑动等事件的响应并不如原生控件那样流畅,甚至还会出现卡顿。这样也很正常,如果体验跟原生控件一样好的话,也就没android(ios)工程师什么事了。
H5调用原生的方式
方式可能有多种,根据我本人的开发经验,我接触过两种方式。
第一种
1.首先对WebView进行初始化
- 1
- 2
2.创建一个类JavaScriptMetod,专门用来给js提供可调用的方法
3.创建该类的构造方法,提供两个参数,WebView对象和上下文对象
- 1
- 2
- 3
- 4
- 5
- 6
4.创建一个字符串常量,作为android与js通信的接口,即字符串映射对象
- 1
5.接下来就是创建给js调用的方法,方法的参数接收一个json字符串(注意:在Android4.2之后,为了提高代码安全性,方法必须使用注解@JavascriptInterface,否则无法调用)
- 1
- 2
- 3
- 4
- 5
6.在WebView初始化代码中执行如下代码,
- 1
- 2
- 3
- 4
- 5
现在,在js中就可以调用JavaScriptMetod中的方法了,调用方式如下
- 1
- 2
- 3
- 4
网络上介绍js与android原生交互的文章里,大部分都是上面这种方式,但是这种方式并不适用于ios,也就是说,window.javaInterface.showToast(JSON.stringify(json))这样的js代码并不适用于ios,如果用以上的方法,就得分别为android和ios各写一套js代码。这样很显然是不太合理的,所以在实际开发中,一般都使用接下来的第二种方法。
第二种
这种方法实现的思想是js发出一个url请求,并将所需的参数添加到该url中。android端通过webView.setWebViewClient()拦截url,解析url中携带的参数,并根据参数信息进行相应的操作。
1.与方法一相同,首先都需要对webview进行初始化
- 1
- 2
2.首先看js中的代码是怎么写的,
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
这里定义两个点击事件,分别控制android显示吐司和打电话的操作。其中,protocol://android为自定义的H5与android间的通信协议,与http请求进行区分。code规定了要进行的操作,data为传输的数据。
2.android中的代码
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
其中,getParamsMap()方法从拦截到的url解析出code,data参数,parseCode()方法将根据不同的code进行相应的操作,代码如下:
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
最后,特别说明一下shouldOverrideUrlLoading()方法的返回值问题,该方法的返回值有三种:
1.返回true,即根据代码逻辑执行相应操作,webview不加载该url;
2.返回false,除执行相应代码外,webview加载该url;
3.返回super.shouldOverrideUrlLoading(),点进父类中,我们可以看到,返回的还是false。
- Android原生与H5交互的实现
- Android原生与H5交互的实现
- Android原生与H5交互的实现
- H5与android原生的JS交互
- android 原生与h5交互
- h5页面与Android原生页面交互
- H5页面与Android原生页面交互
- h5与原生代码交互
- H5与iOS原生交互
- JavaScriptCore原生与H5交互
- android原生和H5交互
- Android与H5的交互
- Android与H5的交互
- Android与H5的交互
- Android与H5的交互
- android与H5的交互
- Android--实现H5与Native交互的两种方式
- WebAPP(H5)与原生APP的交互设计区别
- log4j.properties配置详解与实例
- http 请求转发服务器
- 开启数据科学生涯的45种方式
- 罗马数字与阿拉伯数字的相互转换
- Quartz 2D(二)颜色和颜色空间、变换
- Android原生与H5交互的实现
- SubList分页-008-StudentDao接口
- 复旦大学:医学生+程序员+炉石传说=?
- MySQL替换oracle里ROW_NUMBER () OVER ( PARTITION BY '' ORDER BY ' ' DESC )的方法
- SubList分页-009-SubListStudentDAOImpl类
- glusterfs分布式文件系统详细原理
- 程序员最讨厌的编程语言和技术…想不到PHP也有今天
- SubList分页-010-Pager类
- css/js解决 页面多次点击时出现部分蓝色