如果你開始學(xué)習(xí)手機(jī) App 開發(fā)，就一定會(huì)聽到 H5 這個(gè)詞。它是目前的主流開發(fā)技術(shù)之一，容易上手，開發(fā)周期短、成本低、兼容傳統(tǒng) Web 開發(fā)。但是，很少有文章詳細(xì)介紹，H5 到底是什么技術(shù)，有什么原理，跟其他技術(shù)的差異在哪里。

一、H5 的含義

表面上看，手機(jī) App 都是同樣的東西，就是手機(jī)上的應(yīng)用程序，點(diǎn)擊圖標(biāo)就能運(yùn)行，但是它們的底層技術(shù)不一樣。按照開發(fā)技術(shù)，App 可以分成三大類。

• 原生應(yīng)用（native application，簡(jiǎn)稱 native App）
• Web 應(yīng)用（web application，簡(jiǎn)稱 Web App）
• 混合應(yīng)用（hybrid application，簡(jiǎn)稱 hybrid App）

這三類 App 的技術(shù)模型都不一樣，各有優(yōu)缺點(diǎn)。企業(yè)一般會(huì)選擇其中一種作為主要技術(shù)棧，構(gòu)建自己的手機(jī) App。

H5 這個(gè)詞，可以理解成就是混合 App 模型，只不過它特指混合 App 的前端部分。 因?yàn)榛旌?App 的前端就是 HTML5 網(wǎng)頁(yè)，所以簡(jiǎn)稱 H5。這個(gè)詞是國(guó)內(nèi)獨(dú)有的，基本上都是前端程序員在用，國(guó)外不用這個(gè)詞，就直接叫混合 App。

真正理解 H5 開發(fā)，需要先搞清楚什么是原生 App、什么是 Web App，因?yàn)榛旌?App 是在它們的基礎(chǔ)上誕生的。

二、原生應(yīng)用

2.1 概念

原生 App 是專門為特定手機(jī)平臺(tái)開發(fā)的應(yīng)用程序 ，無法在其他平臺(tái)運(yùn)行。一個(gè)手機(jī)軟件如果要同時(shí)支持蘋果手機(jī)和安卓手機(jī)，就需要為它們各寫一個(gè)原生 App。

歷史上，原生 App 最早出現(xiàn)，跟智能手機(jī)系統(tǒng)一起誕生。2007年6月 iPhone 誕生，2008年9月安卓誕生，就同時(shí)發(fā)布了自家平臺(tái)的原生 App 開發(fā)方法。

原生 App 使用與手機(jī)操作系統(tǒng)相同的語(yǔ)言。iOS 的原生 App 使用 Objective-C 語(yǔ)言或 Swift 語(yǔ)言，安卓使用 Java 語(yǔ)言或 Kotlin 語(yǔ)言。由于跟底層系統(tǒng)的語(yǔ)言和技術(shù)模型一致，所以原生 App 的性能和用戶體驗(yàn)都很好。

2.2 優(yōu)點(diǎn)

原生 App 的優(yōu)點(diǎn)主要是兩個(gè)：（1）較好的性能和體驗(yàn)；（2）可以使用系統(tǒng)的所有硬件和軟件 API，比如 GPS、攝像頭、麥克風(fēng)、加速計(jì)、通知推送等等，能充分發(fā)揮系統(tǒng)的潛力。

2.3 缺點(diǎn)

原生 App 的缺點(diǎn)主要是成本，每個(gè)手機(jī)平臺(tái)都要建立一個(gè)獨(dú)立的開發(fā)團(tuán)隊(duì)，大公司一般都有 iOS 和安卓?jī)蓚€(gè)開發(fā)團(tuán)隊(duì)。如果出現(xiàn)第三個(gè)平臺(tái)（以前的 Windows Phone，也許將來的華為鴻蒙 OS），就要組建第三個(gè)團(tuán)隊(duì)，成本就更高。

第二個(gè)缺點(diǎn)是，原生 App 使用底層操作系統(tǒng)的語(yǔ)言，都是很重的編譯型語(yǔ)言，開發(fā)和調(diào)試成本相對(duì)較高，時(shí)間周期長(zhǎng)。

第三個(gè)缺點(diǎn)是，原生 App 必須下載安裝才能使用，只要升級(jí)版本，就必須重新下載安裝。用戶往往不愿意更新版本，廠商被迫不得不長(zhǎng)期支持很久以前的舊版本。

三、Web 應(yīng)用

3.1 概念

Web App 是使用網(wǎng)頁(yè)做的應(yīng)用程序，必須在瀏覽器中使用。 比如，你在瀏覽器中收發(fā)郵件，就是在使用 Web App。

Web App 主要使用網(wǎng)頁(yè)技術(shù)，即 HTML、JavaScript 和 CSS。2008年，w3c 組織發(fā)布了 HTML 第5版，簡(jiǎn)稱 HTML 5，該版本大大增強(qiáng)了網(wǎng)頁(yè)的功能，使得網(wǎng)頁(yè)可以當(dāng)作應(yīng)用程序使用，而不僅僅是展示文字和圖片，這就是 Web App 的由來。

3.2 優(yōu)點(diǎn)和缺點(diǎn)

Web App 的優(yōu)點(diǎn)是：（1）不需要下載安裝，打開瀏覽器就能使用，而且總是使用最新版本；（2）對(duì)于開發(fā)者來說，Web App 寫起來比較快，調(diào)試容易，不需要應(yīng)用商店的批準(zhǔn)就能發(fā)布。

Web App 的主要缺點(diǎn)有兩個(gè)。首先，瀏覽器提供的 API（即 Web API）很有限（目前只有相機(jī)、GPS、電池等少數(shù)幾個(gè)），大部分系統(tǒng)硬件都不能通過網(wǎng)頁(yè)訪問，也無法直接讀取硬盤文件，所以 Web App 無法充分利用平臺(tái)的硬件。

第二個(gè)缺點(diǎn)是，網(wǎng)頁(yè)通過瀏覽器渲染，性能不如原生 App，不適合做性能要求較高的頁(yè)面。

3.3 Web App 的劣勢(shì)

Web App 需要打開瀏覽器才能使用，這意味著，用戶必須記住如何導(dǎo)航到它，要么直接輸入網(wǎng)址，要么翻找書簽。這使得進(jìn)入 Web App，遠(yuǎn)不如原生 App 方便。這點(diǎn)很致命，事實(shí)表明，用戶偏好原生 App。

谷歌曾經(jīng)調(diào)查了原生 App 和 Web App 各一千個(gè)，發(fā)現(xiàn) Web App 可以覆蓋更多的用戶（1100萬 vs 400萬），但是原生 App 的用戶使用時(shí)間（188分鐘）遠(yuǎn)超 Web App（9分鐘）。

另一項(xiàng)調(diào)查發(fā)現(xiàn)，用戶87％的時(shí)間用在原生 App，13％的時(shí)間用在 Web App。由于這個(gè)原因，企業(yè)很少開發(fā) Web App，都把原生 App 當(dāng)作首選。

但是，Web App 也不是毫無競(jìng)爭(zhēng)力。根據(jù)調(diào)查，普通用戶每月平均使用27個(gè)原生 App，但訪問了100多個(gè)手機(jī)網(wǎng)站。這意味著，用戶的 App 使用時(shí)間都被頭部 App 占據(jù)了，小公司的 App 使用頻率非常低，獲客成本極高，最終變成僵尸 App。因此，小公司開發(fā) Web App 更劃算，不僅成本低，而且可以服務(wù)更多的用戶，以及更好地宣傳自己（可以被搜索引擎收入）。

3.4 PWA

為了推廣 Web App，谷歌公司的 Chrome 瀏覽器團(tuán)隊(duì)做了很多努力。他們認(rèn)為，Web App 足以滿足大多數(shù) App 的需求，但是三大缺陷阻礙它的推廣。

不能從手機(jī)的首屏直接進(jìn)入。

缺乏手機(jī)狀態(tài)欄和鎖屏?xí)r的通知推送能力。

不支持脫機(jī)訪問（即斷網(wǎng)也能使用）。

為了解決這些問題，Chrome 團(tuán)隊(duì)開發(fā)了新技術(shù)"漸進(jìn)式 Web App"（Progressive Web App，縮寫 PWA）。它可以把網(wǎng)站緩存在手機(jī)里面，供離線時(shí)使用，還能在手機(jī)首屏生成圖標(biāo)，直接點(diǎn)擊進(jìn)入，并且有通知推送能力，也不帶有瀏覽器的地址欄和狀態(tài)欄，跟原生 App 的使用體驗(yàn)非常接近。

但是，PWA 需要瀏覽器訪問一次網(wǎng)站，才能在首屏生成圖標(biāo)，并且目前 iOS 系統(tǒng)的支持還不夠理想，所以還只是一項(xiàng)探索性質(zhì)的技術(shù)，迄今為止缺乏足夠的成功案例。

四、混合應(yīng)用

4.1 概念

混合 App （hybrid App）顧名思義就是原生 App 與 Web App 的結(jié)合。它的殼是原生 App，但是里面放的是網(wǎng)頁(yè)。 可以理解成，混合 App 里面隱藏了一個(gè)瀏覽器，用戶看到的實(shí)際上是這個(gè)隱藏瀏覽器渲染出來的網(wǎng)頁(yè)。

混合 App 的原生外殼稱為"容器"，內(nèi)部隱藏的瀏覽器，通常使用系統(tǒng)提供的網(wǎng)頁(yè)渲染控件（即 WebView 控件），也可以自己內(nèi)置一個(gè)瀏覽器內(nèi)核。結(jié)構(gòu)上，混合 App 從上到下分成三層：HTML5 網(wǎng)頁(yè)層、網(wǎng)頁(yè)引擎層（本質(zhì)上是一個(gè)隔離的瀏覽器實(shí)例）、容器層。

4.2 API Bridge

混合 App 里面的網(wǎng)頁(yè)不同于普通網(wǎng)頁(yè)，可以調(diào)用底層系統(tǒng)所有的 API。奧秘就在于外層容器提供了 API Bridge，充當(dāng)?shù)讓?API 的中介，允許內(nèi)部的網(wǎng)頁(yè)調(diào)用底層。

所謂 API Bridge 就是容器在底層接口和網(wǎng)頁(yè)之間，建立一座橋梁，讓雙方通信。容器一旦接到網(wǎng)頁(yè)的請(qǐng)求，就根據(jù)請(qǐng)求去調(diào)用底層系統(tǒng)的 API，然后再返回結(jié)果給網(wǎng)頁(yè)。API Bridge 往往以 JavaScript 語(yǔ)言提供，方便網(wǎng)頁(yè)調(diào)用，這時(shí)又稱為 JSbridge。

不同容器的 API Bridge 是不一樣的。為某個(gè)容器寫的網(wǎng)頁(yè)，不能放在另一個(gè)容器使用，也無法在瀏覽器使用，除非網(wǎng)頁(yè)腳本做了兼容處理。

容器提供的 API Bridge 必須跟著平臺(tái)更新。比如，iOS 發(fā)了新版本，有了新的硬件 API，容器也必須跟著推出新版的 API Bridge。如果容器沒有跟上，開發(fā)者為了使用新的硬件，就只能想辦法自己來寫缺失的 API Bridge。

4.3 優(yōu)點(diǎn)

混合 App 同時(shí)具有原生 App 和 Web App的優(yōu)點(diǎn)，又可以避免它們的一些缺點(diǎn)。具體來說，可以總結(jié)為三點(diǎn)。

（1）跨平臺(tái)

Web 技術(shù)是跨平臺(tái)的，開發(fā)者只寫一次頁(yè)面，就能支持多個(gè)平臺(tái)。也就是說，混合 App 只需要一個(gè)團(tuán)隊(duì)就夠了，開發(fā)成本較低。

（2）靈活性

混合 App 的靈活性大，很容易集成多種功能。一方面，混合 App 很容易加載外部的 H5 頁(yè)面，實(shí)現(xiàn) App 的插件結(jié)構(gòu)；另一方面，Web 頁(yè)面可以方便地調(diào)用外部的 Web 服務(wù)。

（3）開發(fā)方便

Web 頁(yè)面的調(diào)試和構(gòu)建，遠(yuǎn)比原生控件簡(jiǎn)單省時(shí)。頁(yè)面的更新也容易，只要在服務(wù)器上發(fā)布新版本，觸發(fā)容器內(nèi)更新就可以了。另外，Web 開發(fā)人員也比較容易招聘，傳統(tǒng)的前端程序員可以承擔(dān)開發(fā)任務(wù)。

4.4 缺點(diǎn)

混合 App 的主要缺點(diǎn)是，由于存在網(wǎng)頁(yè)引擎的中間層，所以性能比較欠缺，不僅不如原生 App，而且由于 WebView 不是全功能瀏覽器，可能比 Web App 都要慢一些。

另一個(gè)缺點(diǎn)是，由于頁(yè)面跨平臺(tái)，就無法使用只有特定平臺(tái)提供的功能，導(dǎo)致體驗(yàn)不如純的原生 App。舉例來說，早期的時(shí)候，安卓有物理的后退按鈕，iPhone 沒有，頁(yè)面設(shè)計(jì)不得不考慮這一點(diǎn)。

4.5 小程序

最后，再來談?wù)勎⑿判〕绦颉?/p>

所謂小程序，可以看作是針對(duì)特定容器的 H5 開發(fā)。微信本身是一個(gè)容器，開放自己的接口（JSbridge），外部開發(fā)者使用規(guī)定的語(yǔ)法，編寫頁(yè)面，容器可以動(dòng)態(tài)加載這些頁(yè)面。

小程序?qū)τ谖⑿殴俜降暮锰幨?，擴(kuò)展了功能和應(yīng)用場(chǎng)景，吸引外部開發(fā)者加入，繁榮了生態(tài)。對(duì)于外部開發(fā)者的好處是，有了流量入口，可以直接調(diào)用微信的各種功能（比如支付）。

到此這篇關(guān)于H5混合開發(fā)手機(jī)Web App入門：概念篇的文章就介紹到這了,更多相關(guān)H5開發(fā)app入門內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論