人學(xué)習(xí)手機 App 開發(fā)，一開始總要選擇一條學(xué)習(xí)路徑。

如果你熟悉 Java 語言，可以學(xué)習(xí)安卓開發(fā)；如果熟悉腳本語言（比如 Python 或 Ruby），可以學(xué)習(xí) Swift 語言，進(jìn)行 iOS 開發(fā)；如果像我一樣，比較熟悉 Web 網(wǎng)頁技術(shù)，那么 H5 開發(fā)是最容易上手的。

這個系列教程的第一篇，已經(jīng)介紹過了手機 App 的種類^[1]。所謂的 H5 頁面，其實就是混合 App 的前端，外面是一個原生的殼，里面是 Web 網(wǎng)頁。本文緊接上一篇，介紹手機 App 開發(fā)的技術(shù)棧，尤其是跟 H5 開發(fā)相關(guān)的技術(shù)。

本文由國內(nèi)最大的在線教育平臺之一“騰訊課堂”^[2]贊助。他們現(xiàn)在啟動了“騰訊課堂101計劃”^[3]，推廣優(yōu)質(zhì)課程資源。希望學(xué)習(xí)和提高手機 App 開發(fā)技術(shù)的朋友，可以留意一下本文結(jié)尾的安卓課程信息。

一、手機 App 的技術(shù)棧

手機 App 的技術(shù)棧可以分成三類。

（1）原生 App 技術(shù)棧（native technology stack）

原生技術(shù)棧指的是，只能用于特定手機平臺的開發(fā)技術(shù)。比如，安卓平臺的 Java 技術(shù)棧，iOS 平臺的 Object-C 技術(shù)棧或 Swift 技術(shù)棧。

這種技術(shù)棧只能用在一個平臺，不能跨平臺。

（2）混合 App 技術(shù)棧（hybrid technology stack）

混合技術(shù)棧指的是開發(fā)混合 App 的技術(shù)，也就是把 Web 網(wǎng)頁放到特定的容器中，然后再打包成各個平臺的原生 App。所以，混合技術(shù)棧其實是 Web 技術(shù)棧 + 容器技術(shù)棧，典型代表是 PhoneGap、Cordova、Ionic 等框架。

如果已經(jīng)掌握了 Web 技術(shù)，這個技術(shù)棧就主要學(xué)習(xí)容器提供的 API Bridge，網(wǎng)頁通過它們?nèi)フ{(diào)用底層硬件的 API。

（3）跨平臺 App 技術(shù)棧（cross-platform technology stack）

跨平臺技術(shù)棧指的是使用一種技術(shù)，同時支持多個手機平臺。它與混合技術(shù)棧的區(qū)別是，不使用 Web 技術(shù)，即它的頁面不是 HTML5 頁面，而是使用自己的語法寫的 UI 層，然后編譯成各平臺的原生 App。

這個技術(shù)棧就是純粹的容器技術(shù)棧，React Native、Xamarin、Flutter 都屬于這一類。學(xué)習(xí)時，除了學(xué)習(xí)容器的 API Bridge，還要學(xué)習(xí)容器提供的 UI 層，即怎么寫頁面。

（4）小結(jié)

H5 開發(fā)主要用在混合技術(shù)棧。但是，跨平臺技術(shù)棧的某些容器也會用到（比如 React Native），因為它們的 UI 層借鑒了 Web 模型。

另外，混合技術(shù)棧和跨平臺技術(shù)棧的基礎(chǔ)，都是原生技術(shù)棧，因為最終都要編譯成原生App。所以，不管使用哪一種技術(shù)棧，多多少少要了解一些各平臺的原生技術(shù)。

下面就依次介紹上面三類技術(shù)棧，每個技術(shù)棧都會給出一個最簡單的例子：加載網(wǎng)頁。通過各種技術(shù)棧加載網(wǎng)頁的不同做法，幫助大家理解它們的特點，對 App 的技術(shù)實現(xiàn)有一個總體的認(rèn)識。

二、WebView 控件

講解具體的技術(shù)棧之前，大家需要知道，不管什么技術(shù)，最終在 App 里面顯示網(wǎng)頁，一定需要一個網(wǎng)頁引擎，這樣才能解析網(wǎng)頁。

通常情況下，App 內(nèi)部會使用 WebView 控件作為網(wǎng)頁引擎。這是系統(tǒng)自帶的控件，專門用來顯示網(wǎng)頁。應(yīng)用程序的界面，只要放上 WebView，就好像內(nèi)嵌了瀏覽器窗口，可以顯示網(wǎng)頁。

不同的 App 技術(shù)棧要顯示網(wǎng)頁，區(qū)別僅僅在于怎么處理 WebView 這個原生控件。

?原生技術(shù)棧：需要開發(fā)者自己把 WebView 控件放到頁面上。?混合技術(shù)棧：頁面本身就是網(wǎng)頁，默認(rèn)在 WebView 中顯示。?跨平臺技術(shù)棧：提供一個 WebView 的語法，編譯的時候?qū)⑵鋼Q成原生的 WebView。

注意，不同系統(tǒng)的 WebView 控件名稱不一樣，安卓系統(tǒng)就叫 WebView，iOS 系統(tǒng)有較老的 UIWebView，也有較新的 WKWebView，作用都是一樣的，差異在于功能的強弱。

三、原生技術(shù)棧

原生技術(shù)棧分成 iOS 和安卓兩個平臺。

簡單說，iOS 的原生技術(shù)棧就是使用 Object-C 語言或 Swift 語言，在 Xcode 開發(fā)環(huán)境中編程。安卓的原生技術(shù)棧，則是使用 Java 語言或 Kotlin 語言，開發(fā)環(huán)境是 Android Studio。

下面就來看看，它們怎么加載網(wǎng)頁。

3.1 Xcode

iOS 開發(fā)需要安裝 Xcode。它是一種集成開發(fā)環(huán)境（IDE），也是蘋果公司指定的 iOS 官方開發(fā)工具，所有蘋果手機的 App 都由它打包生成。

它可以在 Mac 電腦上通過應(yīng)用商店免費安裝。注意，Xcode 只支持 Mac 系統(tǒng)，不支持其他系統(tǒng)。

安裝完成后，打開新建一個項目，類型是單視圖 App，然后系統(tǒng)會詢問一些項目參數(shù)和儲存位置，這里就不詳細(xì)說明了。

然后，就進(jìn)入了開發(fā)環(huán)境。

左側(cè)的目錄樹里面，找到ViewController.swifter文件，它負(fù)責(zé)視圖邏輯。按照官方文檔^[4]，填入下面的代碼。

上面代碼的意思是，啟動 App 加載視圖的時候（loadView()），新建一個 WebView 控件的實例。視圖加載成功后（viewDidLoad()），WebView 再去加載外部網(wǎng)頁（紅框部分）。

然后，就可以查看代碼運行結(jié)果。點擊工具欄的運行按鈕，Xcode 就會彈出一個 iPhone 模擬器，里面就是當(dāng)前代碼的運行結(jié)果。

如果一切正常，就可以讓 Xcode 對源碼打包，生成 App 的二進(jìn)制安裝文件。

3.2 Android Studio

安卓的官方開發(fā)工具是 Android Studio，可以去官網(wǎng)^[5]下載。

安裝完成后，打開新建一個項目，類型是“Empty Activity”。

Android Studio 會詢問項目參數(shù)，包括項目名稱、開發(fā)語言（Java）等，然后就進(jìn)入了開發(fā)環(huán)境。因為它是基于 Java IDE 修改的，懂 Java 的朋友應(yīng)該對這個界面比較熟悉。

按照網(wǎng)上的這篇教程^[6]，接下來需要修改三個文件，其中最主要的是把MainActivity.java文件改成下面這樣。

上面紅框處的代碼，就是在頁面上添加并設(shè)置 WebView 實例，指定生成視圖的時候（onCreate()），WebView 實例去加載外部網(wǎng)頁。

運行代碼之前，Android Studio 要求必須連接真機，或安裝安卓模擬器。完成以后后，在工具欄上點擊運行按鈕，就可以運行代碼查看效果了。

如果一切正常，就可以讓 Android Studio 打包，生成 App 的二進(jìn)制安裝文件。

四、混合技術(shù)棧

上面的原生技術(shù)棧需要自己新建 WebView 實例，相比之下，混合技術(shù)棧就簡單多了。因為頁面就是網(wǎng)頁，所以容器已經(jīng)設(shè)置好了 WebView，開發(fā)者直接寫頁面即可。

4.1 框架種類

混合技術(shù)棧的各種容器框架之中，歷史最悠久是 PhoneGap^[7]，誕生于2009年。后來在2011年被 Adobe 公司收購，改名為 Adobe PhoneGap。

Adobe 公司將 PhoneGap 的核心代碼，后來都捐給了 Apache 基金會，作為一個全新的開源項目，名為 Apache Cordova^[8]。

PhoneGap 和 Cordova 現(xiàn)在是兩個獨立發(fā)展的開源項目，但是彼此有密切的關(guān)系，可以簡單理解成 Cordova 是 PhoneGap 的內(nèi)核，PhoneGap 是 Cordova 的發(fā)行版。

后來，其他人也開始基于 Cordova 封裝自己的框架，所以市場上有許多基于 Cordova 的開源框架，比較著名的有 Ionic^[9]、Monaca^[10]、Framework7^[11]等。

所有這些框架的共同點，都是使用 Web 技術(shù)（HTML5 + CSS + JavaScript）開發(fā)頁面，再由框架分別打包成 iOS 和安卓的 App 安裝包。它們的優(yōu)點是開發(fā)簡單、周期短、成本低，缺點是功能和性能都很有限。

4.2 Ionic 實例

基于 Cordova 的框架，用法都大同小異，下面就以 Ionic 為例，演示如何加載外部網(wǎng)頁。

首先，根據(jù)官方文檔^[12]，生成項目的腳手架。

$ npm install -g ionic@latest$ ionic start myApp blank --type=react$ cd myApp

接著打開src/pages/Home.tsx文件，插入<iframe>標(biāo)簽即可。

上面代碼中，由于頁面本身就是網(wǎng)頁，所以可以直接用<iframe>標(biāo)簽插入外部網(wǎng)頁。

然后，在本機起一個 Web 服務(wù)，看看 Demo 的效果。

$ ionic serve

上面命令會自動打開瀏覽器窗口，訪問本機的8100端口，在瀏覽器中顯示網(wǎng)頁效果。

如果一切正常，在命令行窗口按 Ctrl+c，退出服務(wù)。編譯成 App 安裝包的方法可以參考官方文檔^[13]。

五、跨平臺技術(shù)棧

上面的混合技術(shù)棧使用 HTML 語言編寫頁面，再用 WebView 控件加載頁面，所以只寫一次頁面，就能支持多個平臺。跨平臺技術(shù)棧也能做到多平臺支持，但是原理完全不同。

跨平臺技術(shù)棧的框架，都是使用自己的語法編寫頁面，不使用 Web 技術(shù)，編譯的時候再將其轉(zhuǎn)為原生控件，或者使用自己的底層控件，生成原生 App。這樣就完全解決了 Web 頁面性能不佳的問題。下面介紹三個這樣的框架。

?React Native: 使用 JavaScipt 語言編寫頁面?Xamarin：使用 C# 語言編寫頁面?Flutter：使用 Dart 語言編寫頁面

5.1 React Native

（1）原理

2013年， Facebook 公司發(fā)布了 React 框架。這個框架是為網(wǎng)頁開發(fā)設(shè)計的，核心思想是在網(wǎng)頁之上，建立一個 UI 的抽象層，所有數(shù)據(jù)操作都在這個抽象層完成（即在內(nèi)存里面完成），然后再渲染成網(wǎng)頁的 DOM 結(jié)構(gòu)，這樣就提升了性能。

很快，工程師們就意識到了，UI 抽象層本質(zhì)上是一種數(shù)據(jù)結(jié)構(gòu)，與底層設(shè)備無關(guān)，不僅可以渲染成網(wǎng)頁，也可以渲染成手機的原生頁面。這樣的話，只要寫一次 React 頁面，就能分別編譯成 iOS 和安卓的原生 App。這就是 React Native 項目的由來。

注意，React Native 雖然也使用 JavaScript 語言，并且寫法看上去像 Web 頁面，但其實所有控件都是自己定義的，編譯時再一一翻譯為對應(yīng)的原生控件。舉例來說，React Native 的文本渲染控件是<Text>，翻譯成 iOS 控件為UIView，翻譯成安卓控件為TextView。這種做即保證了性能，又做到了跨平臺支持，所以一誕生就引起開發(fā)者的關(guān)注，成了熱門技術(shù)。

還有一個 NativeScript^[14]框架，跟 React Native 很像，也是使用 JavaScript 語言，然后編譯成原生控件。不過，它的開發(fā)模型是基于 Angular.js，而不是 React。

（2）實例

下面就是 React Native 加載外部網(wǎng)頁的實例。為了方便使用，官方團隊提供了一個封裝好的工具集，叫做 Expo^[15]。第一步，在手機安裝 Expo 的 App 客戶端（App Store^[16]，Google Play^[17]）。

然后，在命令行安裝腳手架工具expo-cli，新建一個示意項目。

$ npm install -g expo-cli$ expo init rnDemo

新建項目時，會要求你選擇項目模板，可以選minimum模板。然后，還會要求你填寫項目描述displayName，這個可以隨便寫。

然后，安裝 React Native 自己的 WebView 控件。

$ cd rnDemo$ npm install --save react-native-webview

接著，打開主頁面的腳本文件App.js，將其改成下面的代碼。

上面代碼中，React Native 自身的WebView控件，編譯時會分別轉(zhuǎn)為 iOS 和安卓的原生 WebView 控件。

接下來，預(yù)覽頁面效果。可以先把它編譯成 Web 版，在瀏覽器預(yù)覽，這樣比較快，立刻就能看到效果。

$ npm run web

運行上面的命令，命令行會出現(xiàn)一個二維碼。

這時可以打開手機端的 Expo 客戶端，掃描這個二維碼，就會顯示 App 的頁面。注意，計算機和手機必須在同一個局域網(wǎng)。

（3）React Native 的問題

React Native 的想法雖然很美好，但是實際開發(fā)中出現(xiàn)了各種各樣的問題。

最主要的一個問題是， UI 抽象層翻譯出來的 iOS 和安卓原生頁面，做不到完全一致，尤其是復(fù)雜頁面，樣式或功能存在差異。編譯出來兩個平臺的原生 App 往往是一個正常，另一個會出現(xiàn)各種奇怪的小毛病。React Native 的底層還是沒有做到無縫適配，它至今沒有發(fā)布 1.0 版（2019年底是 0.61 版），這多多少少也說明了一些問題。

如果你想用 React Native 做到 iOS 和安卓體驗一致，并且充分發(fā)揮原生控件的功能，就需要同時熟悉 React Native、iOS、安卓三個平臺，這對開發(fā)者的要求實在太高了。Airbnb 公司在使用 React Native 兩年后，宣布放棄，改用原生技術(shù)棧。他們寫了一篇很長的文章^[18]，解釋為什么這么做，React Native 到底有什么問題，大家可以參考那篇文章。

5.2 Xamarin

Xamarin 是微軟公司的跨平臺 App 開發(fā)框架，原理跟 React Native 很相似，只不過它的語言是 C#。

它的使用需要 Visual Studio，這里就不舉例了。根據(jù)官方文檔^[19]，WebView 的用法如下。

上面代碼中，首先新建了一個 WebView 控件的實例，然后把這個實例放到布局上，跟原生 App 的語法很像。

5.3 Flutter

Flutter^[20]是谷歌公司最新的跨平臺開發(fā)框架。它為了解決 React Native 的平臺差異問題，采用了一個完全不同的方案。

它自己實現(xiàn)了一套控件。打包的時候，會把這套控件打包進(jìn)每一個 App，因此不存在調(diào)用原生控件的問題。不管什么平臺，都調(diào)用內(nèi)嵌的自己那套控件，就能做到 iOS 和安卓體驗完全一致。

Flutter 歷史還不長，應(yīng)用還不廣泛，API 也沒穩(wěn)定下來。但是很值得關(guān)注。

加載外部網(wǎng)頁的實例，可以參考 Flutter 官方團隊的這篇文章^[21]。核心代碼如下：

上面代碼使用的是 Dart 語言。它是 Flutter 的官方語言，接近 JavaScript 語法，但是多了靜態(tài)類型支持。

六、總結(jié)

通過上面的介紹，希望大家已經(jīng)了解了各種技術(shù)棧的特點。

（1）原生技術(shù)棧的技能和體驗最好，對于復(fù)雜的大型 App，如果條件允許，應(yīng)該采用這種方式開發(fā)。

（2）混合技術(shù)棧的成本低，靈活性好，對性能要求不高的簡單 App，尤其是純展示性的頁面，可以采用這種方式開發(fā)。

（3）跨平臺技術(shù)棧適用于，存在外部或內(nèi)部條件的限制，只有一個團隊開發(fā)跨平臺 App 的情況。

（正文完）

安卓開發(fā)高級 UI 課程

手機 App 的 UI（用戶界面），往往是 App 成功的關(guān)鍵因素：產(chǎn)品的外觀是否漂亮，點擊和滑動是否流暢，意圖是否清晰，都會影響到用戶的留存率。一個好的 UI 不僅體現(xiàn)了產(chǎn)品經(jīng)理和開發(fā)者的素質(zhì)，還可以有效降低拉新成本。

一般的開發(fā)者接到產(chǎn)品的 UI 設(shè)計方案之后，可能就會去網(wǎng)上找類似的效果，看看有沒有開源代碼。但是，優(yōu)秀的開發(fā)者會努力思考，如何通過完全自定義來實現(xiàn)這個效果，做到功能和性能的最佳狀態(tài)。

這就要求開發(fā)者具有實現(xiàn)高級 UI 的開發(fā)能力，理解安卓 UI 的底層實現(xiàn)原理，比如自定義 View 的渲染流程（onMeasure->onLayout->onDraw），以及交互設(shè)計（touch事件）。

怎樣才能高效地學(xué)習(xí)安卓高級 UI 開發(fā)，早日進(jìn)階成為高級安卓工程師呢？這里介紹享學(xué)課堂的一門課程 《高級安卓 UI ——自定義 ViewGroup 與 UI 性能優(yōu)化》，它帶大家一行一行代碼去實現(xiàn)一個京東自定義ViewGroup，研究系統(tǒng)的FrameLayout與ViewPager的源碼，最后通過閱讀源碼，分析ViewPager設(shè)計過程中的顯示問題和性能問題。下圖是課程介紹（點擊看大圖）。

這個課程是直播課程，在線實時答疑，特別邀請了 Alvin 老師（前三星/小米高級研發(fā)經(jīng)理）主講，只需要0.1元就能參與。聽課之后覺得滿意，還可以學(xué)習(xí)其他 Android 高級進(jìn)階的實戰(zhàn)課程。

（完）

References

[1]手機 App 的種類:http://www.ruanyifeng.com/blog/2019/12/hybrid-app-concepts.html

[2]“騰訊課堂”:https://ke.qq.com/

[3]“騰訊課堂101計劃”:https://edu.qq.com/a/20190119/005414.htm

[4]官方文檔:https://developer.apple.com/documentation/webkit/wkwebview

[5]官網(wǎng):https://developer.android.com/studio

[6]這篇教程:https://codingislove.com/android-web-view/

[7]PhoneGap:https://phonegap.com/

[8]Apache Cordova:https://cordova.apache.org/

[9]Ionic:https://ionicframework.com/

[10]Monaca:https://monaca.io/

[11]Framework7:https://framework7.io/

[12]官方文檔:https://ionicframework.com/docs/react/your-first-app

[13]官方文檔:https://ionicframework.com/docs/react/your-first-app#build-a-native-app

[14]NativeScript:https://www.nativescript.org/

[15]Expo:https://expo.io/

[16]App Store:https://itunes.apple.com/app/apple-store/id982107779

[17]Google Play:https://play.google.com/store/apps/details?id=host.exp.exponent

[18]很長的文章:https://medium.com/airbnb-engineering/sunsetting-react-native-1868ba28e30a

[19]官方文檔:https://docs.microsoft.com/en-us/dotnet/api/xamarin.forms.webview?view=xamarin-forms

[20]Flutter:https://flutter.dev/

[21]這篇文章:https://medium.com/flutter/the-power-of-webviews-in-flutter-a56234b57df2

機現(xiàn)在是互聯(lián)網(wǎng)的最大入口。根據(jù)《中國互聯(lián)網(wǎng)報告》^[1]，手機網(wǎng)民已經(jīng)超過8億，人均每天上網(wǎng)三個多小時。

毫不奇怪，手機應(yīng)用軟件（mobile application，簡稱 mobile App）的開發(fā)工程師供不應(yīng)求，一直是 IT 招聘的熱門。

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

本文就是 H5 的入門教程，今天是第一篇，介紹基本概念。內(nèi)容盡量通俗，不過本來也沒有太復(fù)雜的東西。我希望這篇文章可以幫助新手入門，也可以供熟練開發(fā)者回顧和整理知識點。

感謝國內(nèi)最大的在線教育平臺之一“騰訊課堂”^[2]贊助這個系列教程。他們現(xiàn)在啟動了“騰訊課堂101計劃”^[3]，推廣優(yōu)質(zhì)課程資源。希望提高前端技術(shù)水平的朋友，可以留意一下本文結(jié)尾的課程“一元錢”課程信息。

一、H5 的含義

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

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

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

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

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

二、原生應(yīng)用

2.1 概念

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

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

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

2.2 優(yōu)點

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

2.3 缺點

原生 App 的缺點主要是成本，每個手機平臺都要建立一個獨立的開發(fā)團隊，大公司一般都有 iOS 和安卓兩個開發(fā)團隊。如果出現(xiàn)第三個平臺（以前的 Windows Phone，也許將來的華為鴻蒙 OS），就要組建第三個團隊，成本就更高。

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

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

三、Web 應(yīng)用

3.1 概念

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

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

3.2 優(yōu)點和缺點

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

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

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

3.3 Web App 的劣勢

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

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

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

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

3.4 PWA

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

1.不能從手機的首屏直接進(jìn)入。2.缺乏手機狀態(tài)欄和鎖屏?xí)r的通知推送能力。3.不支持脫機訪問（即斷網(wǎng)也能使用）。

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

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

四、混合應(yīng)用

4.1 概念

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

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

4.2 API Bridge

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

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

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

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

4.3 優(yōu)點

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

（1）跨平臺

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

（2）靈活性

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

（3）開發(fā)方便

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

4.4 缺點

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

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

上圖是 iOS 頁面。

上面是安卓頁面，左上角的后退按鈕，跟系統(tǒng)的后退按鈕重復(fù)了。

4.5 小程序

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

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

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

今天對于 H5 相關(guān)概念的介紹，就到這里為止，下一篇文章將介紹 H5 相關(guān)開發(fā)工具和框架。

（正文完）

騰訊課堂推薦課程《你不知道的 Vue.js 性能優(yōu)化》

當(dāng)今時代，IT 教育蓬勃發(fā)展，各種課程層出不窮，知識唾手可得。你可能經(jīng)常領(lǐng)取到海量的前端開發(fā)資料包，往往收藏起來就再也沒看過。

Vue.js 就是這種情況，作為前端的主流框架之一，國內(nèi)有著廣泛應(yīng)用，市場招聘需求大。前端培訓(xùn)機構(gòu)幾乎一定有它的課程，而且都是重點推廣，每個學(xué)員都會拿到一大堆學(xué)習(xí)資料。

怎樣才能做出有特色的 Vue.js 教程呢？北京的京程一燈現(xiàn)在就推出了一個專項課程 《你不知道的Vue.js 性能優(yōu)化》。他們是騰訊課堂前端培訓(xùn) TOP 機構(gòu)之一，專注培養(yǎng)年薪40萬的高級前端工程師，目前和騰訊課堂聯(lián)合運營，畢業(yè)生平均薪水可以達(dá)到25.5K。

為了與市場上其他課程區(qū)隔，保證輸出優(yōu)質(zhì)內(nèi)容，讓學(xué)員真正有收獲，本次專題課深度講解 Vue.js 性能優(yōu)化，以及 Vue3.0 那些值得關(guān)注的新特性。高級前端崗位面試中，性能優(yōu)化是一個必問的知識點，本課程通過對 Vue 面試核心知識點的拆解，帶你解鎖 Vue.js 性能優(yōu)化，目標(biāo)是幫助學(xué)員拿到大廠 offer。下面是課程部分內(nèi)容。

1.Vue首屏優(yōu)化實踐。2.核心優(yōu)化方案和工程化剖析3.面試常問的 Vue 雙向數(shù)據(jù)深度解析4.深度對比 Vue2 & 3 的雙向數(shù)據(jù)綁定

購課之后，還將贈送價值196元的《Webpack 從入門到精通》全系列教程。

References

[1]《中國互聯(lián)網(wǎng)報告》:https://www.ifanr.com/1254954

[2]“騰訊課堂”:https://ke.qq.com/

[3]“騰訊課堂101計劃”:https://edu.qq.com/a/20190119/005414.htm