现在移动端 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:

h5与app交互的更多相关文章

  1. h5 与app交互

    http://www.jianshu.com/p/7151987f012d JSContext *context = [self.webView valueForKeyPath:@"docu ...

  2. h5 与原生 app 交互的原理

    现在移动端 web 应用,很多时候都需要与原生 app 进行交互.沟通(运行在 webview中),比如微信的 jssdk,通过 window.wx 对象调用一些原生 app 的功能.所以,这次就来捋 ...

  3. 客户端相关知识学习(二)之h5与原生app交互的原理

    前言 现在移动端 web 应用,很多时候都需要与原生 app 进行交互.沟通(运行在 webview中),比如微信的 jssdk,通过 window.wx 对象调用一些原生 app 的功能.所以,这次 ...

  4. 通过页面调用APP【H5与APP互通】

    现在H5和App原生的内容原来越互通,所涉及的业务也越来越复杂和融合,所以如何互相之间方便的调用才是王道. 场景1 比如用hybrid获取地理位置和短信信息,这当然需要框架封装好,比如利用框架的bri ...

  5. APP交互

    交互设计基本功!5个值得学习的APP交互方式http://www.uisdc.com/5-interactive-design-worth-learning 移动App交互设计10大趋势–你用到了吗? ...

  6. Android - 和其他APP交互 - 获得activity的返回值

    启用另一个activity不一定是单向的.也可以启用另一个activity并且获得返回值.要获得返回值的话,调用startActivityForResult()(而不是startActivity()) ...

  7. Android - 和其他APP交互 - 把用户带到其他app

    Android的重要功能之一就是app可以根据要执行的操作让用户启动另外一个app.例如,app有一个商业地址然后想要在地图上显示,并不需要在app中加一个显示地图的activity,可以直接用Int ...

  8. 安卓Native和H5页面进行交互

    安卓Native和H5页面进行交互 1.H5页面调用安卓Native界面 1)通过给webView添加JsInterface,安卓提供接口,让H5来进行调用    a)安卓写一个类,里面的方法需要用通 ...

  9. 微信公众号、H5、APP三者各有什么优势?

    昨天给大家分享了一个现在很热的H5,众所周知,当下H5手机网站.微信公众号.APP这三种载体都越来越火了,而且三者都有各自的一些优势和劣势. HTML5(H5) H5之所以能引发如此广泛的效应,根本在 ...

随机推荐

  1. mysql AND运算符 语法

    mysql AND运算符 语法 作用:在 WHERE 子语句中把两个或多个条件结合起来.佛山大理石方尺 语法:SELECT * FROM 表名 WHERE 字段1 运算符 值 AND 字段2 运算符 ...

  2. Java的基本使用

    1.如何运行一个Java源码 打开文本编辑器,输入以下代码: public class Hello { public static void main(String[] args) { System. ...

  3. 浙大PAT CCCC L3-014 周游世界 ( 最短路变形 )

    题目链接 题意 : 中文题请点链接,挺复杂的... 分析 : 乍一看是个最短路,实际就真的是个最短路.如果没有 “ 在有多条最短路径的时候输出换乘次数最少的” 这一条件的约束,那么这题就是直接建图然后 ...

  4. Django REST framework入门 (转自中文文档)

    快速入门 我们将创建一个简单的允许管理员用户查看和编辑系统中的用户和组的API. 项目设置 创建一个名为 tutorial 的新django项目,然后启动一个名为 quickstart 的新app. ...

  5. [POJ1637]Sightseeing tour:混合图欧拉回路

    分析 混合图欧拉回路问题. 一个有向图有欧拉回路当且仅当图连通并且对于每个点,入度\(=\)出度. 入度和出度相等可以联想到(我也不知道是怎么联想到的)网络流除了源汇点均满足入流\(=\)出流.于是可 ...

  6. sqlserver高版本往低版本迁移

    本例为sql2012 还原到sql2008. 要实现的功能是把sql2012的数据库备份到sql2008,数据库名字为Test,并且这两个数据库在不同的电脑中. 微软的软件设计方案基本上都是新版本兼容 ...

  7. 续上文,Unity3D面试ABC

    http://www.unitymanual.com/blog-3573-685.html 最先执行的方法是: 1.(激活时的初始化代码)Awake,2.Start.3.Update[FixUpdat ...

  8. Spring Boot 中使用 spring-boot-devtools (使用 Gradle 作为构建工具)

    Spring Boot 中使用 spring-boot-devtools (使用 Gradle 作为构建工具) 本文使用 Gradle 作为构建工具,关于 Gradle 构建工具,可以理解为是 Mav ...

  9. iOS Beta 升级或降级

    https://sspai.com/post/45442 public beta网站上安装profile, 去手机看更新 developer beta, 登录开发者网站, downloads, 下载p ...

  10. Java 与 C++ 的比较

    参考 Java 中,一切皆是类 Java 中,所有数据或方法都要放在类中.如果想获得与全局函数等价的功能,可将static方法和static数据放在类里.而 C++ 中有 struct 结构.enum ...