一、H5 的含義
H5 這個詞，可以理解成就是混合 App 模型，只不過它特指混合 App 的前端部分。
二、原生應用
2.1 概念
- iphone誕生: 2007年6月
- android誕生: 2008年9月
- 原生 App 使用與手機操作系統相同的語言。
2.2 優點
（1）較好的性能和體驗；
（2）可以使用系統的所有硬件和軟件 API
2.3 缺點
- 成本:每個手機平臺都要建立一個獨立的開發團隊
- 時間週期長: 底層操作系統的語言，都是很重的編譯型語言, 開發和調試成本相對較高
- 需要長期支持已發佈版本: 原生 App 必須下載安裝才能使用，只要升級版本，就必須重新下載安裝。
三、Web 應用
3.1 概念
Web App 是使用網頁做的應用程序，必須在瀏覽器中使用。
3.2 優點和缺點
- 優點
1.1 不需要下載安裝，打開瀏覽器就能使用，而且總是使用最新版本；
1.2 對於開發者來說，Web App 寫起來比較快，調試容易，不需要應用商店的批准就能發佈。- 缺點
2.1 瀏覽器提供的 API（即 Web API）很有限（目前只有相機、GPS、電池等少數幾個），大部分系統硬件都不能通過網頁訪問，也無法直接讀取硬盤文件，所以 Web App 無法充分利用平臺的硬件。
2.2 網頁通過瀏覽器渲染，性能不如原生 App，不適合做性能要求較高的頁面。
2.3 不方便: 需要打開瀏覽器才能使用- 總結
谷歌曾經調查了原生 App 和 Web App 各一千個，發現 Web App 可以覆蓋更多的用戶（1100萬 vs 400萬），但是原生 App 的用戶使用時間（188分鐘）遠超 Web App（9分鐘）。
3.3 PWA
四、混合應用
4.1 概念
混合 App （hybrid App）顧名思義就是原生 App 與 Web App 的結合。它的殼是原生 App，但是裏面放的是網頁。
4.2 API Bridge
4.3 優點
- 跨平臺
- 靈活性
- 開發方便
4.4 缺點
- 由於存在網頁引擎的中間層，所以性能比較欠缺
- 由於頁面跨平臺，就無法使用只有特定平臺提供的功能，導致體驗不如純的原生 App
4.5 小程序
所謂小程序，可以看作是針對特定容器的 H5 開發。
五. 手機App的技術棧
5.1 原生 App 技術棧
5.2 混合 App 技術棧
- 典型代表: PhoneGap、Cordova、Ionic
- 這個技術棧就主要學習容器提供的 API Bridge
5.3 跨平臺 App 技術棧
- 純粹的容器技術棧, 典型代表: React Native、Xamarin、Flutter
- 除了學習容器的 API Bridge，還要學習容器提供的 UI 層
六. WebView 控件
控件, 網頁引擎, 解析網頁
七. 原生技術棧
7.1 Xcode
它是一種集成開發環境（IDE），也是蘋果公司指定的 iOS 官方開發工具，所有蘋果手機的 App 都由它打包生成。
7.2 Android Studio
八. 混合技術棧
8.1 框架種類
- 歷史最悠久是 PhoneGap，誕生於2009年。
- Adobe 公司將 PhoneGap 的核心代碼，後來都捐給了 Apache 基金會，作爲一個全新的開源項目，名爲 Apache Cordova。
- 後來，其他人也開始基於 Cordova 封裝自己的框架，所以市場上有許多基於 Cordova 的開源框架，比較著名的有 Ionic、Monaca、Framework7 等。
- 優點是開發簡單、週期短、成本低，缺點是功能和性能都很有限。
8.2 Ionic 實例
九. 跨平臺技術棧
跨平臺技術棧的框架，都是使用自己的語法編寫頁面，不使用 Web 技術，編譯的時候再將其轉爲原生控件，或者使用自己的底層控件，生成原生 App。這樣就完全解決了 Web 頁面性能不佳的問題。
9.1 React Native
- 原理
2013年， Facebook 公司發佈了 React 框架。這個框架是爲網頁開發設計的，
核心思想是在網頁之上，建立一個 UI 的抽象層，所有數據操作都在這個抽象層
完成（即在內存裏面完成），然後再渲染成網頁的 DOM 結構，這樣就提升了性
能。
很快，工程師們就意識到了，UI 抽象層本質上是一種數據結構，與底層設備無
不僅可以渲染成網頁，也可以渲染成手機的原生頁面。這樣的話，只要寫一次
React 頁面，就能分別編譯成 iOS 和安卓的原生 App。這就是 React Native 項
目的由來。
- 實例
- React Native 的問題
- iOS 和安卓原生頁面，做不到完全一致，尤其是複雜頁面，樣式或功能存在差異。
- Airbnb 公司在使用 React Native 兩年後，宣佈放棄，改用原生技術棧。
9.2 Xamarin
9.3 Flutter
Flutter
十. 總結
1）原生技術棧的技能和體驗最好，對於複雜的大型 App，如果條件允許，應該
採用這種方式開發。
2）混合技術棧的成本低，靈活性好，對性能要求不高的簡單 App，尤其是純展
示性的頁面，可以採用這種方式開發。
3）跨平臺技術棧適用於，存在外部或內部條件的限制，只有一個團隊開發跨平
臺App 的情況。
