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：