現在移動端 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：

編輯：千鋒HTML5

作者：深予之 (@senntyou)

原文：https://segmentfault.com/a/1190000016759517