新人學習手機 App 開發，一開始總要選擇一條學習路徑。html
若是你熟悉 Java 語言，能夠學習安卓開發；若是熟悉腳本語言（好比 Python 或 Ruby），能夠學習 Swift 語言，進行 iOS 開發；若是像我同樣，比較熟悉 Web 網頁技術，那麼 H5 開發是最容易上手的。前端
這個系列教程的第一篇，已經介紹過了手機 App 的種類。所謂的 H5 頁面，其實就是混合 App 的前端，外面是一個原生的殼，裏面是 Web 網頁。本文緊接上一篇，介紹手機 App 開發的技術棧，尤爲是跟 H5 開發相關的技術。java
本文由國內最大的在線教育平臺之一"騰訊課堂"贊助。他們如今啓動了"騰訊課堂101計劃"，推廣優質課程資源。但願學習和提升手機 App 開發技術的朋友，能夠留意一下本文結尾的安卓課程信息。react
1、手機 App 的技術棧
手機 App 的技術棧能夠分紅三類。android
（1）原生 App 技術棧 （native technology stack）web
原生技術棧指的是，只能用於特定手機平臺的開發技術。好比，安卓平臺的 Java 技術棧，iOS 平臺的 Object-C 技術棧或 Swift 技術棧。apache
這種技術棧只能用在一個平臺，不能跨平臺。npm
（2）混合 App 技術棧 （hybrid technology stack）編程
混合技術棧指的是開發混合 App 的技術，也就是把 Web 網頁放到特定的容器中，而後再打包成各個平臺的原生 App。因此，混合技術棧實際上是 Web 技術棧 + 容器技術棧，典型表明是 PhoneGap、Cordova、Ionic 等框架。swift
若是已經掌握了 Web 技術，這個技術棧就主要學習容器提供的 API Bridge，網頁經過它們去調用底層硬件的 API。
（3）跨平臺 App 技術棧 （cross-platform technology stack）
跨平臺技術棧指的是使用一種技術，同時支持多個手機平臺。它與混合技術棧的區別是，不使用 Web 技術，即它的頁面不是 HTML5 頁面，而是使用本身的語法寫的 UI 層，而後編譯成各平臺的原生 App。
這個技術棧就是純粹的容器技術棧，React Native、Xamarin、Flutter 都屬於這一類。學習時，除了學習容器的 API Bridge，還要學習容器提供的 UI 層，即怎麼寫頁面。
（4）小結
H5 開發主要用在混合技術棧。可是，跨平臺技術棧的某些容器也會用到（好比 React Native），由於它們的 UI 層借鑑了 Web 模型。
另外，混合技術棧和跨平臺技術棧的基礎，都是原生技術棧，由於最終都要編譯成原生App。因此，無論使用哪種技術棧，多多少少要了解一些各平臺的原生技術。
下面就依次介紹上面三類技術棧，每一個技術棧都會給出一個最簡單的例子：加載網頁。經過各類技術棧加載網頁的不一樣作法，幫助你們理解它們的特色，對 App 的技術實現有一個整體的認識。
2、WebView 控件
講解具體的技術棧以前，你們須要知道，無論什麼技術，最終在 App 裏面顯示網頁，必定須要一個網頁引擎，這樣才能解析網頁。
一般狀況下，App 內部會使用 WebView 控件做爲網頁引擎。這是系統自帶的控件，專門用來顯示網頁。應用程序的界面，只要放上 WebView，就好像內嵌了瀏覽器窗口，能夠顯示網頁。
不一樣的 App 技術棧要顯示網頁，區別僅僅在於怎麼處理 WebView 這個原生控件。
- 原生技術棧：須要開發者本身把 WebView 控件放到頁面上。
- 混合技術棧：頁面自己就是網頁，默認在 WebView 中顯示。
- 跨平臺技術棧：提供一個 WebView 的語法，編譯的時候將其換成原生的 WebView。
注意，不一樣系統的 WebView 控件名稱不同，安卓系統就叫 WebView，iOS 系統有較老的 UIWebView，也有較新的 WKWebView，做用都是同樣的，差別在於功能的強弱。
3、原生技術棧
原生技術棧分紅 iOS 和安卓兩個平臺。
簡單說，iOS 的原生技術棧就是使用 Object-C 語言或 Swift 語言，在 Xcode 開發環境中編程。安卓的原生技術棧，則是使用 Java 語言或 Kotlin 語言，開發環境是 Android Studio。
下面就來看看，它們怎麼加載網頁。
3.1 Xcode
iOS 開發須要安裝 Xcode。它是一種集成開發環境（IDE），也是蘋果公司指定的 iOS 官方開發工具，全部蘋果手機的 App 都由它打包生成。
它能夠在 Mac 電腦上經過應用商店免費安裝。注意，Xcode 只支持 Mac 系統，不支持其餘系統。
安裝完成後，打開新建一個項目，類型是單視圖 App，而後系統會詢問一些項目參數和儲存位置，這裏就不詳細說明了。
而後，就進入了開發環境。
左側的目錄樹裏面，找到ViewController.swifter文件，它負責視圖邏輯。按照官方文檔，填入下面的代碼。
上面代碼的意思是，啓動 App 加載視圖的時候（loadView()），新建一個 WebView 控件的實例。視圖加載成功後（viewDidLoad()），WebView 再去加載外部網頁（紅框部分）。
而後，就能夠查看代碼運行結果。點擊工具欄的運行按鈕，Xcode 就會彈出一個 iPhone 模擬器，裏面就是當前代碼的運行結果。
若是一切正常，就可讓 Xcode 對源碼打包，生成 App 的二進制安裝文件。
3.2 Android Studio
安卓的官方開發工具是 Android Studio，能夠去官網下載。
安裝完成後，打開新建一個項目，類型是"Empty Activity"。
Android Studio 會詢問項目參數，包括項目名稱、開發語言（Java）等，而後就進入了開發環境。由於它是基於 Java IDE 修改的，懂 Java 的朋友應該對這個界面比較熟悉。
按照網上的這篇教程，接下來須要修改三個文件，其中最主要的是把MainActivity.java文件改爲下面這樣。
上面紅框處的代碼，就是在頁面上添加並設置 WebView 實例，指定生成視圖的時候（onCreate()），WebView 實例去加載外部網頁。
運行代碼以前，Android Studio 要求必須鏈接真機，或安裝安卓模擬器。完成之後後，在工具欄上點擊運行按鈕，就能夠運行代碼查看效果了。
若是一切正常，就可讓 Android Studio 打包，生成 App 的二進制安裝文件。
4、混合技術棧
上面的原生技術棧須要本身新建 WebView 實例，相比之下，混合技術棧就簡單多了。由於頁面就是網頁，因此容器已經設置好了 WebView，開發者直接寫頁面便可。
4.1 框架種類
混合技術棧的各類容器框架之中，歷史最悠久是 PhoneGap，誕生於2009年。後來在2011年被 Adobe 公司收購，更名爲 Adobe PhoneGap。
Adobe 公司將 PhoneGap 的核心代碼，後來都捐給了 Apache 基金會，做爲一個全新的開源項目，名爲 Apache Cordova。
PhoneGap 和 Cordova 如今是兩個獨立發展的開源項目，可是彼此有密切的關係，能夠簡單理解成 Cordova 是 PhoneGap 的內核，PhoneGap 是 Cordova 的發行版。
後來，其餘人也開始基於 Cordova 封裝本身的框架，因此市場上有許多基於 Cordova 的開源框架，比較著名的有 Ionic、Monaca、Framework7 等。
全部這些框架的共同點，都是使用 Web 技術（HTML5 + CSS + JavaScript）開發頁面，再由框架分別打包成 iOS 和安卓的 App 安裝包。它們的優勢是開發簡單、週期短、成本低，缺點是功能和性能都頗有限。
4.2 Ionic 實例
基於 Cordova 的框架，用法都大同小異，下面就以 Ionic 爲例，演示如何加載外部網頁。
首先，根據官方文檔，生成項目的腳手架。
$ npm install -g ionic@latest $ ionic start myApp blank --type=react $ cd myApp
接着打開 src/pages/Home.tsx 文件，插入 iframe 標籤便可。
上面代碼中，因爲頁面自己就是網頁，因此能夠直接用iframe標籤插入外部網頁。
而後，在本機起一個 Web 服務，看看 Demo 的效果。
$ ionic serve
上面命令會自動打開瀏覽器窗口，訪問本機的8100端口，在瀏覽器中顯示網頁效果。
若是一切正常，在命令行窗口按 Ctrl+c，退出服務。編譯成 App 安裝包的方法能夠參考官方文檔。
5、跨平臺技術棧
上面的混合技術棧使用 HTML 語言編寫頁面，再用 WebView 控件加載頁面，因此只寫一次頁面，就能支持多個平臺。跨平臺技術棧也能作到多平臺支持，可是原理徹底不一樣。
跨平臺技術棧的框架，都是使用本身的語法編寫頁面，不使用 Web 技術，編譯的時候再將其轉爲原生控件，或者使用本身的底層控件，生成原生 App。這樣就徹底解決了 Web 頁面性能不佳的問題。下面介紹三個這樣的框架。
- React Native: 使用 JavaScipt 語言編寫頁面
- Xamarin：使用 C# 語言編寫頁面
- Flutter：使用 Dart 語言編寫頁面
5.1 React Native
（1）原理
2013年， Facebook 公司發佈了 React 框架。這個框架是爲網頁開發設計的，核心思想是在網頁之上，創建一個 UI 的抽象層，全部數據操做都在這個抽象層完成（即在內存裏面完成），而後再渲染成網頁的 DOM 結構，這樣就提高了性能。
很快，工程師們就意識到了，UI 抽象層本質上是一種數據結構，與底層設備無關，不只能夠渲染成網頁，也能夠渲染成手機的原生頁面。這樣的話，只要寫一次 React 頁面，就能分別編譯成 iOS 和安卓的原生 App。這就是 React Native 項目的由來。
注意，React Native 雖然也使用 JavaScript 語言，而且寫法看上去像 Web 頁面，但其實全部控件都是本身定義的，編譯時再一一翻譯爲對應的原生控件。舉例來講，React Native 的文本渲染控件是<Text>，翻譯成 iOS 控件爲UIView，翻譯成安卓控件爲TextView。這種作即保證了性能，又作到了跨平臺支持，因此一誕生就引發開發者的關注，成了熱門技術。
還有一個 NativeScript 框架，跟 React Native 很像，也是使用 JavaScript 語言，而後編譯成原生控件。不過，它的開發模型是基於 Angular.js，而不是 React。
（2）實例
下面就是 React Native 加載外部網頁的實例。爲了方便使用，官方團隊提供了一個封裝好的工具集，叫作 Expo。第一步，在手機安裝 Expo 的 App 客戶端（App Store，Google Play）。
而後，在命令行安裝腳手架工具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控件，編譯時會分別轉爲 iOS 和安卓的原生 WebView 控件。
接下來，預覽頁面效果。能夠先把它編譯成 Web 版，在瀏覽器預覽，這樣比較快，馬上就能看到效果。
$ npm run web
運行上面的命令，命令行會出現一個二維碼。
這時能夠打開手機端的 Expo 客戶端，掃描這個二維碼，就會顯示 App 的頁面。注意，計算機和手機必須在同一個局域網。
（3）React Native 的問題
React Native 的想法雖然很美好，可是實際開發中出現了各類各樣的問題。
最主要的一個問題是， UI 抽象層翻譯出來的 iOS 和安卓原生頁面，作不到徹底一致，尤爲是複雜頁面，樣式或功能存在差別。編譯出來兩個平臺的原生 App 每每是一個正常，另外一個會出現各類奇怪的小毛病。React Native 的底層仍是沒有作到無縫適配，它至今沒有發佈 1.0 版（2019年末是 0.61 版），這多多少少也說明了一些問題。
若是你想用 React Native 作到 iOS 和安卓體驗一致，而且充分發揮原生控件的功能，就須要同時熟悉 React Native、iOS、安卓三個平臺，這對開發者的要求實在過高了。Airbnb 公司在使用 React Native 兩年後，宣佈放棄，改用原生技術棧。他們寫了一篇很長的文章，解釋爲何這麼作，React Native 到底有什麼問題，你們能夠參考那篇文章。
5.2 Xamarin
Xamarin 是微軟公司的跨平臺 App 開發框架，原理跟 React Native 很類似，只不過它的語言是 C#。
它的使用須要 Visual Studio，這裏就不舉例了。根據官方文檔，WebView 的用法以下。
上面代碼中，首先新建了一個 WebView 控件的實例，而後把這個實例放到佈局上，跟原生 App 的語法很像。
5.3 Flutter
Flutter 是谷歌公司最新的跨平臺開發框架。它爲了解決 React Native 的平臺差別問題，採用了一個徹底不一樣的方案。
它本身實現了一套控件。打包的時候，會把這套控件打包進每個 App，所以不存在調用原生控件的問題。無論什麼平臺，都調用內嵌的本身那套控件，就能作到 iOS 和安卓體驗徹底一致。
Flutter 歷史還不長，應用還不普遍，API 也沒穩定下來。可是很值得關注。
加載外部網頁的實例，能夠參考 Flutter 官方團隊的這篇文章。核心代碼以下：
上面代碼使用的是 Dart 語言。它是 Flutter 的官方語言，接近 JavaScript 語法，可是多了靜態類型支持。
6、總結
經過上面的介紹，但願你們已經瞭解了各類技術棧的特色。
（1）原生技術棧的技能和體驗最好，對於複雜的大型 App，若是條件容許，應該採用這種方式開發。
（2）混合技術棧的成本低，靈活性好，對性能要求不高的簡單 App，尤爲是純展現性的頁面，能夠採用這種方式開發。
（3）跨平臺技術棧適用於，存在外部或內部條件的限制，只有一個團隊開發跨平臺 App 的狀況。
（正文完）