本文為菜鳥窩作者劉婷的連載爱沟。菜
菜鳥窩-程序員的黃埔軍校
當(dāng)看到這個(gè)標(biāo)題的時(shí)候帅霜，很多人都覺得很熟悉啊，現(xiàn)在市場(chǎng)上面大多數(shù)的 App 都使用到了這個(gè)呼伸，使用原生 Native 嵌套 Html5身冀，而這種模式的出現(xiàn)，也出現(xiàn)了一個(gè)新的詞叫做 Hybrid App 括享，也就是混合 App搂根，這篇的文章主要就是來分享下 Hybrid App 的相關(guān)知識(shí)以及下如何實(shí)現(xiàn) Native 和 Html5 的交互。
App 的三種主要類別
目前主流 App 應(yīng)用程序主要分為三類铃辖，分別為 Web App剩愧、Native App 和 Hybrid App，也就是網(wǎng)頁(yè) App娇斩、原生 App 和混合 App仁卷。其中網(wǎng)頁(yè) 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è)應(yīng)用。
1.1 Web App 的優(yōu)點(diǎn)
（1）輕應(yīng)用基矮，借助于瀏覽器淆储，不需要太高的成本，所以開發(fā)成本相對(duì)較低家浇。
（2）直接可以在后臺(tái)服務(wù)器上面更新本砰，更新方便而且快。
（3）更新無需通知用戶钢悲，不需要手動(dòng)升級(jí)点额。
（4）在 IOS 、Android 和 Windows 等平臺(tái)和終端都可以使用莺琳，能夠跨多個(gè)平臺(tái)和終端还棱。
1.2 Web App 的缺點(diǎn)
（1）網(wǎng)頁(yè)的加載，只是臨時(shí)性的入口惭等。
（2）無法獲取系統(tǒng)級(jí)別的通知珍手，提醒，動(dòng)效等等辞做，缺少原生的一些功能琳要。
（3）用戶留存率低。
（4）設(shè)計(jì)受限制諸多秤茅。
（5）受制于網(wǎng)速等稚补，體驗(yàn)較差。
2. Native App 的詳細(xì)介紹
Native App 指的是原生程序框喳，一般依托于操作系統(tǒng)课幕，有很強(qiáng)的交互，是一個(gè)完整的 App五垮，可拓展性強(qiáng)乍惊，但是需要用戶下載安裝使用。
2.1 Native App 的優(yōu)點(diǎn)
（1）打造完美的用戶體驗(yàn)放仗。
（2）原生的應(yīng)用程序污桦，性能穩(wěn)定。
（3）操作速度快匙监，上手流暢凡橱。
（4）訪問本地資源（通訊錄，相冊(cè)）方便亭姥。
（5）設(shè)計(jì)出色的動(dòng)效稼钩，轉(zhuǎn)場(chǎng)。
（6）擁有系統(tǒng)級(jí)別的貼心通知或提醒达罗。
（7）用戶留存率高坝撑。
2.2 Native App 的缺點(diǎn)
（1）開發(fā)成本高（不同平臺(tái)有不同的開發(fā)語言和界面適配）静秆。
（2）維護(hù)成本高（例如一款A(yù)pp已更新至V5版本，但仍有用戶在使用 V2巡李， V3抚笔， V4 版本，需要更多的開發(fā)人員維護(hù)之前的版本）侨拦。
（3）更新緩慢殊橙，根據(jù)不同平臺(tái)，提交–審核–上線 等等不同的流程狱从，需要經(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 的體驗(yàn)驼卖。
（2）可以簡(jiǎn)單更新 APP 內(nèi)部的局部?jī)?nèi)容氨肌，擁有 Web App 的優(yōu)勢(shì)。
（3）結(jié)合了 Native App 和 Web App 的優(yōu)點(diǎn)款慨，性能也相對(duì)穩(wěn)定。
3.2 Hybrid App 的缺點(diǎn)
（1）受制于技術(shù)谬莹、網(wǎng)速等條件檩奠，跨平臺(tái)要求較高。
（2）原生和網(wǎng)頁(yè)的融合向不完善附帽，技術(shù)不是很成熟埠戳，還在不斷更新中。
（3）還是需要較高的開發(fā)和維護(hù)成本蕉扮。
4. 三種類別的對(duì)比
上面詳細(xì)介紹了三種類別的概念和優(yōu)缺點(diǎn)整胃，對(duì)于這三種類型的 App 也有了一定的認(rèn)識(shí)了，最后總結(jié)下這三種類型喳钟，看圖說話屁使。
上圖中對(duì)于 Web App 、Native App 和 Hybrid App 的主要特性奔则、平臺(tái)使用以及網(wǎng)絡(luò)要求做了詳細(xì)的對(duì)比蛮寂。
實(shí)現(xiàn) Native 和 Html5 的交互
說到交互的話，就可以簡(jiǎn)單的分為兩種了易茬，分別為 Android 調(diào)用 HTML 和 HTML 調(diào)用 Android酬蹋，下面是詳細(xì)的交互步驟及老。
1. 添加 WebView
在布局文件中添加 WebView 用來加載 Web 頁(yè)面的展示。
<WebView
android:id="@+id/webview"
android:layout_width="match_parent"
android:layout_height="match_parent"></WebView>
WebView 是 Android 原生中的控件之一范抓，直接在 xml 布局文件中添加即可骄恶。
2. 設(shè)置 WebView 支持 JS 腳本
如果需要 WebView 實(shí)現(xiàn)和原生的交互，那么就要讓 WebView 支持執(zhí)行 JS 的腳本匕垫。
webView.getSettings().setJavaScriptEnabled(true);
在 Html5 中的功能操作都是使用 JS 來實(shí)現(xiàn)的僧鲁，WebView 默認(rèn)是不支持 JS 腳本，所以這里必須要先設(shè)置支持執(zhí)行 JS 的腳本年缎。
3. 實(shí)現(xiàn) JS 調(diào)用 Android
在新建的 HTML5 頁(yè)面中添加一個(gè)輸入框 input 和 按鈕 button 控件悔捶，并且設(shè)置樣式，這里就不多講了单芜，主要的是要講如何實(shí)現(xiàn)交互蜕该。
首先在 Activity 中 new 一個(gè) JavascriptInterface，命名為 WebAppInterface洲鸠，也就是 JS 的腳本接口堂淡，用來交互使用，然后在 WebAppInterface 中添加方法 sayHello(String name);
@JavascriptInterface
public void sayHello(String name) {
Toast.makeText(context, "name=" + name, Toast.LENGTH_LONG).show();
}
方法上面的注解 @JavascriptInterface 必不可少扒腕，否則會(huì)報(bào)錯(cuò)的绢淀，在 Activity 中寫好方法后，就要在 Html5 頁(yè)面中添加調(diào)用 sayHello(String name) 的 function 方法瘾腰。
function sayhello(){
var name = document.getElementById("txtName").value;
window.app.sayHello(name);//傳參數(shù)給APP
}
獲取到輸入框 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 showName(name){
document.getElementById("txtName").value=name;
}
這里的 function 是用于給輸入框 input 設(shè)置 value 值楞抡。
然后在 Activity 中寫入對(duì) function 的調(diào)用，不過既然需要調(diào)用析藕，那就為原生界面 XML 布局添加一個(gè)按鈕召廷，給這個(gè)按鈕綁定點(diǎn)擊事件來調(diào)用 JS 腳本。
<Button
android:id="@+id/button"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="調(diào)用JS"/>
按鈕加好了账胧，之后就是綁定點(diǎn)擊事件竞慢。
button.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
//點(diǎn)擊事件
}
});
對(duì)于 JS 腳本的調(diào)用放在按鈕 button 的點(diǎn)擊事件中。
runOnUiThread(new Runnable() {
@Override
public void run() {
webView.loadUrl("javascript:showName('" 菜鳥窩 "')");
}
});
調(diào)用 JS 腳本 function治泥，將 "菜鳥窩" 字符串傳入到 Html5 的頁(yè)面輸入框 input 中梗顺。
最終效果圖
Native 和 Html5 的簡(jiǎn)單交互代碼都已經(jīng)寫好了，最后運(yùn)行獲取效果圖车摄。
點(diǎn)擊“調(diào)用 JS”按鈕寺谤，給 Html5 頁(yè)面的輸入框 input 賦予了 value 值——“菜鳥窩”仑鸥，然后點(diǎn)擊 Html5 頁(yè)面的 “say Hello” 按鈕來 Toast 出輸入框 input 的 value 值。
