客户端相关知识学习(三)之Android原生与H5交互的实现
Android原生与H5交互的实现
H5调用原生的方式
方式可能有多种,根据开发经验,接触过两种方式。
方法一:Android向H5注入全局js对象,也就是H5调Android
1.首先对WebView进行初始化
WebSettings settings = webview.getSettings(); settings.setJavaScriptEnabled(true); //允许在WebView中使用js |
2.创建一个类JavaScriptMetod,专门用来给js提供可调用的方法
3.创建该类的构造方法,提供两个参数,WebView对象和上下文对象
private Context mContext; private WebView mWebView; public JavaScriptMethod(Context context, WebView webView) { mContext = context; mWebView = webView; } |
4.创建一个字符串常量,作为android与js通信的接口,即字符串映射对象
public static final String JAVAINTERFACE = "javaInterface"; |
5.接下来就是创建给js调用的方法,方法的参数接收一个json字符串(注意:在Android4.2之后,为了提高代码安全性,方法必须使用注解@JavascriptInterface,否则无法调用)
@JavascriptInterface //andorid4.2(包括android4.2)以上,如果不写该注解,js无法调用android方法 public void showToast(String json){ Toast.makeText(context, json, Toast.LENGTH_SHORT).show(); } |
6.在WebView初始化代码中执行如下代码
//创建上面创建类的对象 JavaScriptMetod m = new JavaScriptMetod(this, webview); //其实就是告诉js,我提供给哪个对象给你调用,这样js就可以调用对象里面的方法 //第二个参数就是该类中的字符串常量 webview.addJavascriptInterface(m, JavaScriptMetod.javaInterface); 现在,在js中就可以调用JavaScriptMetod中的方法了,调用方式如下 //参数一般为json格式 var json = {"name":"javascript"}; //javaInterface是上面所说的字符串映射对象 window.javaInterface.showToast(JSON.stringify(json)); |
网络上介绍js与android原生交互的文章里,大部分都是上面这种方式,但是这种方式并不适用于ios,也就是说,window.javaInterface.showToast(JSON.stringify(json))这样的js代码并不适用于ios,如果用以上的方法,就得分别为android和ios各
写一套js代码。这样很显然是不太合理的,所以在实际开发中,一般都使用接下来的第二种方法。
方法二:H5发起自定义协议请求,Android拦截请求,再由Android调用H5中的回调函数
这种方法实现的思想是js发出一个url请求,并将所需的参数添加到该url中。android端通过webView.setWebViewClient()拦截url,解析url中携带的参数,并根据参数信息进行相应的操作。
1.与方法一相同,首先都需要对webview进行初始化
WebSettings settings = webview.getSettings(); settings.setJavaScriptEnabled(true); //允许在WebView中使用js |
2.首先看js中的代码是怎么写的
$("#showtoast").click(function () { var json = {"data": "I am a toast"}; window.location.href="protocol://android?code=toast&data="+JSON.stringify(json); }); $("#call").click(function () { var json = {"data": "10086"}; window.location.href="protocol://android?code=call&data="+JSON.stringify(json); }); |
这里定义两个点击事件,分别控制android显示toast和打电话的操作。其中,protocol://android为自定义的H5与android间的通信协议,与http请求进行区分。code规定了要进行的操作,data为传输的数据。
3.android中的代码
webView.setWebViewClient(new WebViewClient() { @Override public boolean shouldOverrideUrlLoading(WebView view, String url) { /** * 通过判断拦截到的url是否含有pre,来辨别是http请求还是调用android方法的请求 */ String pre = "protocol://android"; if (!url.contains(pre)) { //该url是http请求,用webview加载url return false; } //该url是调用android方法的请求,通过解析url中的参数来执行相应方法 Map map = getParamsMap(url, pre); String code = map.get("code"); String data = map.get("data"); parseCode(code, data); return true; } }); |
其中,getParamsMap()方法从拦截到的url解析出code,data参数,parseCode()方法将根据不同的code进行相应的操作,代码如下:
private Map getParamsMap(String url, String pre) { ArrayMap queryStringMap = new ArrayMap<>(); if (url.contains(pre)) { int index = url.indexOf(pre); int end = index + pre.length(); String queryString = url.substring(end + 1); String[] queryStringSplit = queryString.split("&"); String[] queryStringParam; for (String qs : queryStringSplit) { if (qs.toLowerCase().startsWith("data=")) { //单独处理data项,避免data内部的&被拆分 int dataIndex = queryString.indexOf("data="); String dataValue = queryString.substring(dataIndex + 5); queryStringMap.put("data", dataValue); } else { queryStringParam = qs.split("="); String value = ""; if (queryStringParam.length > 1) { //避免后台有时候不传值,如“key=”这种 value = queryStringParam[1]; } queryStringMap.put(queryStringParam[0].toLowerCase(), value); } } } return queryStringMap; } private void parseCode(String code, String data) { if(code.equals("call")) { try { JSONObject json = new JSONObject(data); String phone = json.optString("data"); //执行打电话的操作,具体代码省略 PhoneUtils.call(this, phone); } catch (JSONException e) { e.printStackTrace(); } return; } if(code.equals("toast")) { try { JSONObject json = new JSONObject(data); String toast = json.optString("data"); Toast.makeText(this, toast, Toast.LENGTH_SHORT).show(); } catch (JSONException e) { e.printStackTrace(); } return; } } |
最后,特别说明一下shouldOverrideUrlLoading()方法的返回值问题,该方法的返回值有三种:
返回true,即根据代码逻辑执行相应操作,webview不加载该url;
返回false,除执行相应代码外,webview加载该url;
返回super.shouldOverrideUrlLoading(),点进父类中,我们可以看到,返回的还是false。
转载于:https://www.cnblogs.com/kunmomo/p/11556135.html
客户端相关知识学习(三)之Android原生与H5交互的实现相关推荐
- 蚂蚁mPaaS框架控制台打印 原生与h5交互数据 和 RPC接口返回数据 都是Unicode乱码如何处理
1.原生与h5交互数据 具体的参考之前博客:https://blog.csdn.net/qq_15509071/article/details/113876172 这里修改为: - (void)use ...
- android h5和原生方法调用,Android原生与H5通信
如今,混合开发似乎成为了主流.H5拥有跨平台的优势,却存在性能上的问题正好可以用搭建原生壳承载H5代码的方式去解决. 如何理解这种方式,就好像说Android原生代码封装外壳,内部包含H5代码作为核心 ...
- 客户端相关知识学习(一)之混合开发,为什么要在App中使用H5页面以及应用场景、注意事项...
混合开发 随着移动互联网的高速发展,常规的开发速度已经渐渐不能满足市场需求.原生H5混合开发应运而生,目前,市场上许多主流应用都有用到混合开发,例如支付宝.美团等.下面,结合我本人的开发经验,简单谈一 ...
- 客户端相关知识学习(五)之什么是webView
webview是什么?作用是什么?和浏览器有什么关系? Android系统中内置了一款高性能 webkit 内核浏览器,在 SDK 中封装为一个叫做 WebView 组件也就是说WebView是一个基 ...
- 客户端相关知识学习(四)之H5页面如何嵌套到APP中
Android原生如何渲染H5页面 Android与 H5 的交互方式大概有以下 1 种: 利用WebView进行交互(系统API) iOS原生如何渲染H5页面 iOS 与 H5 的交互方式大概有以下 ...
- 客户端相关知识学习(二)之h5与原生app交互的原理
前言 现在移动端 web 应用,很多时候都需要与原生 app 进行交互.沟通(运行在 webview中),比如微信的 jssdk,通过 window.wx 对象调用一些原生 app 的功能.所以,这次 ...
- Android原生h5互跳控制,Android原生与H5交互方式
Demo 地址:码云 一.Android API提供的官方交互方式 1.webView.getSettings().setJavaScriptEnabled(true);设置webview运行执行js ...
- Android原生与h5js交互
为了方便原生开发和Html之间数据传递,在静态页面的情况下可以改变原生开发的页面: 实现 新建一个Activity,布局里面放一个WebView 布局 <?xml version="1 ...
- 移动开发平台 mPaaS iOS端原生与WKWebView交互原理(如何打印蚂蚁框架所有原生与h5交互数据)
这个问题不难,但网上却搜不到,自己写写当做科普吧 mPaaS使用的就是系统提供的最原始的交互方式,包括 WKWebView调用原生 和 原生调用WKWebView WKWebView调用原生 调用原生 ...
最新文章
- 算法 字符串转换为以为数组
- 《设计模式 基于C#的工程化实现及扩展》 - 书摘精要
- input高级限制级用法
- 关系重叠?实体嵌套?曝光偏差?这个模型统统都搞得定!
- 使用ant design Pro开发项目的小结
- jupyter kernel_新乡联通案例分享:Jupyter开发环境配置的常用技巧
- 中国移动wlan优化app-截图
- 都是宝宝:北京孩子3成不玩电子游戏睡眠状况最好 江苏孩子起得最早
- 学习数学到底有什么用?
- [Mac OS] Homebrew简介及安装wine
- IP协议与MAC地址详解
- 离奇的 FRM-18108 ,FRM-10102
- python是高级语言还是低级语言_高级与低级编程语言的解释,哪一种更容易上手?...
- linux 将当前时间往后调整2分钟_linux调整系统时间 永久 z | 学步园
- 简单人口问题(指数增长)
- 10个比Visio更好的流程图制作软件
- 基础操作案例 :ArcGIS PRO基础教程(一)
- 低成本更清晰,下一代视频编码技术将如何实现这一目标?
- redhat7.6配置网络yum源
- FileOutputStream flush()
热门文章
- 信号的高级特性-核心转储文件
- “Survey of machine learning techniques for malware analysis ”
- java中static{}语句块详解
- .html?t=1a=2类似传递参数到flex中
- Python 学习之列表
- 进入保护模式(三)——《x86汇编语言:从实模式到保护模式》读书笔记17
- sql注入及mybatis防止sql注入
- Spring IOC 组件概述
- 深入理解AbstractQueuedSynchronizer(AQS)
- DM368开发 --IPNC 设置过程