當(dāng)看到這個標(biāo)題的時候，很多人都覺得很熟悉啊,，現(xiàn)在市場上面大多數(shù)的 App 都使用到了這個,，使用原生 Native 嵌套 Html5，而這種模式的出現(xiàn),，也出現(xiàn)了一個新的詞叫做 Hybrid App ,，也就是混合 App，這篇的文章主要就是來分享下 Hybrid App 的相關(guān)知識以及下如何實(shí)現(xiàn) Native 和 Html5 的交互,。

App 的三種主要類別

目前主流 App 應(yīng)用程序主要分為三類,，分別為 Web App、Native App 和 Hybrid App,，也就是網(wǎng)頁 App,、原生 App 和混合 App。其中網(wǎng)頁 App 主要是借助于瀏覽器就可以直接運(yùn)行使用,，原生 App 是原生的應(yīng)用程序,，混合 App 就是前面兩者的結(jié)合體。

1. Web App 的詳細(xì)介紹

Web App 指采用 Html5 語言寫出的 App,，不需要下載安裝,。類似于現(xiàn)在所說的輕應(yīng)用。生存在瀏覽器中的應(yīng)用,，基本上可以說是觸屏版的網(wǎng)頁應(yīng)用,。

1.1 Web App 的優(yōu)點(diǎn)

（1）輕應(yīng)用，借助于瀏覽器,，不需要太高的成本,，所以開發(fā)成本相對較低。
（2）直接可以在后臺服務(wù)器上面更新,，更新方便而且快,。
（3）更新無需通知用戶，不需要手動升級,。
（4）在 IOS ,、Android 和 Windows 等平臺和終端都可以使用，能夠跨多個平臺和終端,。

1.2 Web App 的缺點(diǎn)

（1）網(wǎng)頁的加載,，只是臨時性的入口。
（2）無法獲取系統(tǒng)級別的通知,，提醒,，動效等等，缺少原生的一些功能,。
（3）用戶留存率低,。
（4）設(shè)計受限制諸多。
（5）受制于網(wǎng)速等,，體驗較差,。

2. Native App 的詳細(xì)介紹

Native App 指的是原生程序，一般依托于操作系統(tǒng),，有很強(qiáng)的交互,，是一個完整的 App，可拓展性強(qiáng),，但是需要用戶下載安裝使用,。

2.1 Native App 的優(yōu)點(diǎn)

（1）打造完美的用戶體驗。
（2）原生的應(yīng)用程序,，性能穩(wěn)定,。
（3）操作速度快，上手流暢,。
（4）訪問本地資源（通訊錄,，相冊）方便,。
（5）設(shè)計出色的動效，轉(zhuǎn)場,。
（6）擁有系統(tǒng)級別的貼心通知或提醒,。
（7）用戶留存率高。

2.2 Native App 的缺點(diǎn)

（1）開發(fā)成本高（不同平臺有不同的開發(fā)語言和界面適配）,。
（2）維護(hù)成本高（例如一款A(yù)pp已更新至V5版本,，但仍有用戶在使用 V2， V3,， V4 版本,，需要更多的開發(fā)人員維護(hù)之前的版本）。
（3）更新緩慢,，根據(jù)不同平臺,，提交–審核–上線 等等不同的流程，需要經(jīng)過的流程較復(fù)雜,。

3. Hybrid App 的詳細(xì)介紹

Hybrid App 指的是半原生半Web的混合類 App,，需要下載安裝,，看上去類似 Native App,，但只有很少的 UI Web View，訪問的內(nèi)容是 Web,，比如淘寶,、京東等 App 都是這種類型的。

3.1 Hybrid App 的優(yōu)點(diǎn)

（1）極力去打造類似于 Native App 的體驗,。
（2）可以簡單更新 APP 內(nèi)部的局部內(nèi)容,，擁有 Web App 的優(yōu)勢。
（3）結(jié)合了 Native App 和 Web App 的優(yōu)點(diǎn),，性能也相對穩(wěn)定,。

3.2 Hybrid App 的缺點(diǎn)

（1）受制于技術(shù)、網(wǎng)速等條件,，跨平臺要求較高。
（2）原生和網(wǎng)頁的融合向不完善,，技術(shù)不是很成熟,，還在不斷更新中。
（3）還是需要較高的開發(fā)和維護(hù)成本,。

4. 三種類別的對比

上面詳細(xì)介紹了三種類別的概念和優(yōu)缺點(diǎn)，對于這三種類型的 App 也有了一定的認(rèn)識了,，最后總結(jié)下這三種類型，看圖說話,。

對比圖

上圖中對于 Web App ,、Native App 和 Hybrid App 的主要特性,、平臺使用以及網(wǎng)絡(luò)要求做了詳細(xì)的對比。

實(shí)現(xiàn) Native 和 Html5 的交互

說到交互的話,，就可以簡單的分為兩種了,，分別為 Android 調(diào)用 HTML 和 HTML 調(diào)用 Android，下面是詳細(xì)的交互步驟,。

1. 添加 WebView

在布局文件中添加 WebView 用來加載 Web 頁面的展示,。

WebView 是 Android 原生中的控件之一，直接在 xml 布局文件中添加即可,。

2. 設(shè)置 WebView 支持 JS 腳本

如果需要 WebView 實(shí)現(xiàn)和原生的交互，那么就要讓 WebView 支持執(zhí)行 JS 的腳本,。

在 Html5 中的功能操作都是使用 JS 來實(shí)現(xiàn)的,，WebView 默認(rèn)是不支持 JS 腳本，所以這里必須要先設(shè)置支持執(zhí)行 JS 的腳本,。

3. 實(shí)現(xiàn) JS 調(diào)用 Android

在新建的 HTML5 頁面中添加一個輸入框 input 和 按鈕 button 控件,，并且設(shè)置樣式，這里就不多講了,，主要的是要講如何實(shí)現(xiàn)交互,。

首先在 Activity 中 new 一個 JavascriptInterface，命名為 WebAppInterface,，也就是 JS 的腳本接口,，用來交互使用，然后在 WebAppInterface 中添加方法 sayHello(String name);

方法上面的注解 @JavascriptInterface 必不可少,，否則會報錯的,，在 Activity 中寫好方法后，就要在 Html5 頁面中添加調(diào)用 sayHello(String name) 的 function 方法,。

獲取到輸入框 input 的內(nèi)容,，然后調(diào)用 Android 中的 sayHello(String name) 方法，將內(nèi)容使用 Toast 彈出來,。

4. 實(shí)現(xiàn) Android 調(diào)用 JS

實(shí)現(xiàn) Android 調(diào)用 JS 和實(shí)現(xiàn) JS 調(diào)用 Android 正好是反過來的,，Android 調(diào)用 JS 是要實(shí)現(xiàn)在原生的界面中調(diào)用 Html5 中的 function 方法，就先寫好 function。

這里的 function 是用于給輸入框 input 設(shè)置 value 值,。

然后在 Activity 中寫入對 function 的調(diào)用,，不過既然需要調(diào)用，那就為原生界面 XML 布局添加一個按鈕,，給這個按鈕綁定點(diǎn)擊事件來調(diào)用 JS 腳本,。

按鈕加好了，之后就是綁定點(diǎn)擊事件,。

對于 JS 腳本的調(diào)用放在按鈕 button 的點(diǎn)擊事件中,。

調(diào)用 JS 腳本 function，將 '菜鳥窩' 字符串傳入到 Html5 的頁面輸入框 input 中,。

最終效果圖

Native 和 Html5 的簡單交互代碼都已經(jīng)寫好了,，最后運(yùn)行獲取效果圖。