手機app開發(fā)技術(shù)棧大全概覽

時間：2023-05-25 18:33:02 | 來源：網(wǎng)站運營

時間：2023-05-25 18:33:02 來源：網(wǎng)站運營

手機app開發(fā)技術(shù)棧大全概覽：

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

手機 App 的技術(shù)?？梢苑殖扇悺?br>
（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ù)棧就主要學習容器提供的 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 都屬于這一類。學習時，除了學習容器的 API Bridge，還要學習容器提供的 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)有一個總體的認識。

二、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)頁，默認在 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ù)和儲存位置，這里就不詳細說明了。













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







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







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

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













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

3.2 Android Studio

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







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













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







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







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

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













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

四、混合技術(shù)棧

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

4.1 框架種類

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







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







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

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







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

4.2 Ionic 實例

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

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

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

接著打開 src/pages/Home.tsx 文件，插入 iframe 標簽即可。







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

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

$ ionic serve

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

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

五、跨平臺技術(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 框架，跟 React Native 很像，也是使用 JavaScript 語言，然后編譯成原生控件。不過，它的開發(fā)模型是基于 Angular.js，而不是 React。

（2）實例

下面就是 React Native 加載外部網(wǎng)頁的實例。為了方便使用，官方團隊提供了一個封裝好的工具集，叫做 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控件，編譯時會分別轉(zhuǎn)為 iOS 和安卓的原生 WebView 控件。

接下來，預(yù)覽頁面效果?？梢韵劝阉幾g成 Web 版，在瀏覽器預(yù)覽，這樣比較快，立刻就能看到效果。