APP原生(shēng)開(kāi)發如(rú)何與H5進行(xíng)交互ε÷

來(lái)源：lexintech.com ≠ε¶δ 發布時(shí)間(jiān)：2019-05-17

目前，越來(lái)越多(duō)的(de)APP開(kāi)發會(huì)選擇原生(shēng)與H5混合的(de)Hybrid App®♠÷即混合模式APP。H5頁面很(hěn)多(duō)時(sh®φ¶í)候都(dōu)需要(yào)與原生(shēng) ₩>app 進行(xíng)交互、溝通(tōng)（運行(xφ‍íng)在 webview中），比如(rú)微(wēi)信的(de) js $•sdk，通(tōng)過 window.wx 對(duì)象調用(yòng)δ§→一(yī)些(xiē)原生(shēng) app 的($→≠de)功能(néng)。下(xià)面我們就(jiù)來(lái)聊一(yī)&↓→↑聊原生(shēng) app 與 H5交互的(de)原理π¶→©(lǐ)。
原生(shēng) app 與 H5交互的(de)原理(lǐ)

原生(shēng) app 與H5的(de)交互，本質£♣★上(shàng)說(shuō)，就(jiù)是(shì)兩種調用®₽(yòng)：
app 調用(yòng) h5 的(de)代碼
h5 調用(yòng) app 的(de)代α€♣碼

1. app 調用(yòng) h5 的(de)代碼
因為(wèi) app 是(shì)宿主，可(kě)以直接訪問(wè₽ ₽n) h5，所以這(zhè)種調用(yòng)比較簡單，就(j↓÷iù)是(shì)在 h5 中曝露一(yī)些(xiē)全局對§∞φ(duì)象（包括方法），然後在原生(shēnαg) app 中調用(yòng)這(zhè)些(xiē)↔×₹對(duì)象。

2. h5 調用(yòng) app 的(de)÷<☆'代碼
因為(wèi) h5 不(bù)能(néε¥∏&ng)直接訪問(wèn)宿主 app，所以這(z₹↕♦αhè)種調用(yòng)就(jiù)相(xiàng)對(du₩λì)複雜(zá)一(yī)點。
這(zhè)種調用(yòng)常用(yòng)有(yǒ↑α€u)兩種方式：
由 app 向 h5 注入一(yī)個(gè φ)全局js對(duì)象，然後在 h5 直接訪問(wèn)這(zhè)個(gè© γ₹)對(duì)象，
由 h5 發起一(yī)個(gè)自(zì)定義協ε≈議(yì)請(qǐng)求，app 攔截這(zhè)個(gè)≠€請(qǐng)求後，再由 app 調用(↔γφ∑yòng) h5 中的(de)回調函數(shù)。

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

這(zhè)種方式溝通(tōng)機(jī>¥•)制(zhì)簡單，比較好(hǎo)理(lǐ)解，‌≠并且對(duì)于 h5 來(lái)說(shuōπ↕)，沒有(yǒu)新的(de)東(dōngΩ✔)西(xī)，所以是(shì)比較推薦的(£$de)一(yī)種方式。但(dàn)這(zhè)種方式可(kě)能(n∞₩‍éng)存在安全隐患，詳細查看(kàn) ♦→ ☆你(nǐ)不(bù)知(zhī)道(dào)的(de) And ×roid WebView 使用(yòng)漏洞。 ™

（2）由 h5 發起一(yī)個(gè)自(zì)定義協議(yì)₩±<請(qǐng)求

這(zhè)種方式要(yào)稍複雜(zá)一(yī)點，因為(wè β÷$i)需要(yào)自(zì)定義協議(yì)，這(zhè)對(duì)€'≠很(hěn)多(duō)前端開(kāi)發者來(lái)說(shuō)是(s•¥‌✔hì)比較新的(de)東(dōng)西(x ©✔ī)。所以一(yī)般不(bù)推薦這(zhè)種方式，可(kě)以作(↑☆★zuò)為(wèi)第一(yī)種方式的(de)¥®™補充。
大(dà)緻需要(yào)以下(xià)幾個(gè)步♥γ驟：
由 app 自(zì)定義協議(yì)，
在 h5 定義好(hǎo)回調函數(shù)，
由 h5 發起一(yī)個(gè)自(zì)定義協議(yì)請(qǐn✔™g)求，
app 攔截這(zhè)個(gè)請(qǐng)求>λ後，進行(xíng)相(xiàng)應的(de)操作(z€>πuò)，獲取返回值
由 app 調用(yòng) h5 中的(de)回調函數(shù)。

以上(shàng)就(jiù)是(shì©≥₩≥)原生(shēng) app 與 H5交互的(de)原理(lǐ)。

上(shàng)一(yī)篇：APP開(kāi)發如(rú)何做(zuò)好(hǎo)移動端★£∑的(de)适配
下(xià)一(yī)篇：測試工(gōng)程師(shī)在APP開(kāi)發中的(de)重要★&↕(yào)性