h5与app交互
现在移动端 web 应用,很多时候都需要与原生 app 进行交互、沟通(运行在 webview中),比如微信的 jssdk,通过 window.wx 对象调用一些原生 app 的功能。所以,这次就来捋一捋 h5 与原生 app 交互的原理。
h5 与原生 app 的交互,本质上说,就是两种调用:
app 调用 h5 的代码
h5 调用 app 的代码
1. app 调用 h5 的代码
因为 app 是宿主,可以直接访问 h5,所以这种调用比较简单,就是在 h5 中曝露一些全局对象(包括方法),然后在原生 app 中调用这些对象。
javascript:
android:
ios:
2. h5 调用 app 的代码
因为 h5 不能直接访问宿主 app,所以这种调用就相对复杂一点。
这种调用常用有两种方式:
由 app 向 h5 注入一个全局 js 对象,然后在 h5 直接访问这个对象
由 h5 发起一个自定义协议请求,app 拦截这个请求后,再由 app 调用 h5 中的回调函数
2.1 由 app 向 h5 注入一个全局 js 对象
这种方式沟通机制简单,比较好理解,并且对于 h5 来说,没有新的东西,所以是比较推荐的一种方式。但这种方式可能存在安全隐患,详细查看 你不知道的 Android WebView 使用漏洞。
android:
ios:
javascript:
2.2 由 h5 发起一个自定义协议请求
这种方式要稍复杂一点,因为需要自定义协议,这对很多前端开发者来说是比较新的东西。所以一般不推荐这种方式,可以作为第一种方式的补充。
大致需要以下几个步骤:
由 app 自定义协议,比如 sdk://action?params
在 h5 定义好回调函数,比如 window.bridge={getDouble:value=>{},getTriple:value=>{}}
由 h5 发起一个自定义协议请求,比如 location.href='sdk://double?value=10'
app 拦截这个请求后,进行相应的操作,获取返回值
由 app 调用 h5 中的回调函数,比如 window.bridge.getDouble(20);
javascript:
android:
ios:
最新文章
- python file
- vue之watch用法
- 与你相遇好幸运,Sail.js新建模型控制器
- C#的索引器
- (转)unity中基于alpha通道的shadow volume实现
- bzoj 1061 志愿者招募(最小费用最大流)
- P151、面试题27:二叉搜索树与双向链表
- Java基础知识强化之集合框架笔记58:Map集合之LinkedHashMap类的概述
- Linux下安装SVN服务(CentOS7下)
- 使用jquery 1.7 及以后的版本 attr 问题
- js预解析问题总结
- Mac上搭建基于Github的Hexo博客
- ElasticSearch和ElasticSearch Head环境搭建和数据模拟
- O2O、B2B、C2C(通俗讲解)
- 51nod 1232 完美数
- 安装 RabbitMQ
- 算法学习——决策单调性优化DP
- 【PyQt5-Qt Designer】添加图片+鼠标点击
- webWorker
- linux的内存文件系统tmpfs
热门文章
- Kohana Cache
- 【HDOJ6701】Make Rounddog Happy(启发式合并)
- Android环境配置之正式版AndroidStudio1.0
- TCP服务器并发编程构架:完成端口IOCP模式
- Coffee Chicken
- java配置环境变量 jdk1.8
- 关于c++ error : passing "; ";as"; "; discards qualifiers
- 《SQL Server 2012 T-SQL基础》读书笔记 - 8.数据修改
- view组件
- 虚拟主机支持apk