APP原生開發如何與H5進行交互

 

目前，越來(lái)越多(duō)的(de)APP開發會選擇原生與H5混合的(de)Hybrid App即混合模式APP。H5頁面很多(duō)時(shí)候都需要與原生 app 進行交互、溝通(tōng)（運行在 webview中），比如微信的(de) jssdk，通(tōng)過 window.wx 對(duì)象調用(yòng)一些原生 app 的(de)功能。下(xià)面我們就來(lái)聊一聊原生 app 與 H5交互的(de)原理(lǐ)。

原生 app 與H5的(de)交互，本質上說，就是兩種調用(yòng)：
app 調用(yòng) h5 的(de)代碼
h5 調用(yòng) app 的(de)代碼
 

1. app 調用(yòng) h5 的(de)代碼
因爲 app 是宿主，可(kě)以直接訪問 h5，所以這(zhè)種調用(yòng)比較簡單，就是在 h5 中曝露一些全局對(duì)象（包括方法），然後在原生 app 中調用(yòng)這(zhè)些對(duì)象。

2. h5 調用(yòng) app 的(de)代碼
因爲 h5 不能直接訪問宿主 app，所以這(zhè)種調用(yòng)就相對(duì)複雜(zá)一點。
這(zhè)種調用(yòng)常用(yòng)有兩種方式：
由 app 向 h5 注入一個(gè)全局js對(duì)象，然後在 h5 直接訪問這(zhè)個(gè)對(duì)象，
由 h5 發起一個(gè)自定義協議(yì)請求，app 攔截這(zhè)個(gè)請求後，再由 app 調用(yòng) h5 中的(de)回調函數。
 

（1）由 app 向 h5 注入一個(gè)全局js對(duì)象

這(zhè)種方式溝通(tōng)機制簡單，比較好理(lǐ)解，并且對(duì)于 h5 來(lái)說，沒有新的(de)東西，所以是比較推薦的(de)一種方式。但這(zhè)種方式可(kě)能存在安全隐患，詳細查看 你不知道的(de) Android WebView 使用(yòng)漏洞。

（2）由 h5 發起一個(gè)自定義協議(yì)請求

這(zhè)種方式要稍複雜(zá)一點，因爲需要自定義協議(yì)，這(zhè)對(duì)很多(duō)前端開發者來(lái)說是比較新的(de)東西。所以一般不推薦這(zhè)種方式，可(kě)以作爲第一種方式的(de)補充。
大(dà)緻需要以下(xià)幾個(gè)步驟：
由 app 自定義協議(yì)，
在 h5 定義好回調函數，
由 h5 發起一個(gè)自定義協議(yì)請求，
app 攔截這(zhè)個(gè)請求後，進行相應的(de)操作，獲取返回值
由 app 調用(yòng) h5 中的(de)回調函數。

以上就是原生 app 與 H5交互的(de)原理(lǐ)。