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：