介紹與安裝

Apache Cordova 是一套開源行動開發框架。開發者可使用標準網頁技術 ——HTML5、CSS3 與 JavaScript 進行跨平台開發。應用程式執行在各平台專屬封裝容器內，透過相容標準的 API 繫結呼叫裝置功能，例如感測器、本機資料、網路狀態等。

一套程式碼基底，可支援多個平台，並且免費開源。

如果你符合以下場景，可選擇 Apache Cordova：

• 你是行動開發者，想讓同一套應用部署至多個平台，不必針對各平台語言與工具鏈重複開發；
• 你是網頁開發者，希望將網頁應用封裝，上架至各大應用商店發布；
• 你是行動開發者，需要混合原生元件與 WebView（專用瀏覽器視窗），讓網頁程式存取裝置底層 API；或是需要開發外掛，打通原生程式與 WebView 之間的呼叫管道。

Cordova 應用由多個元件組成。下圖為 Cordova 應用架構高層概覽。

WebView（網頁檢視）

搭載 Cordova 功能的 WebView 可承載應用完整介面。在部分平台中，它也能做為元件嵌入混合式應用，和原生控制項一同運作。

Web App（網頁應用）

這裡存放你的業務程式碼。應用本身以網頁形式實作，預設進入點為本機 index.html 檔案，頁面載入所需 CSS、JavaScript、圖片、媒體資源等檔案。整套應用執行在原生容器內的 WebView 之中，最後封裝後發布至各應用商店。

容器內有一個極為重要的檔案：config.xml。該檔案記錄應用基礎資訊，並定義各項執行參數，例如是否允許畫面直向/橫向切換。

Plugins（外掛）

外掛是 Cordova 生態系的核心元件。它做為橋樑，實現 Cordova 與原生程式互相通訊，並封裝各類裝置標準 API，讓 JavaScript 得以呼叫原生程式。

Apache Cordova 官方維護一組核心外掛，提供存取裝置基礎功能的介面：電池狀態、相機、聯絡人等等。

除官方核心外掛之外，還有大量第三方外掛，封裝各式無法全平台通用的擴充功能。你可透過外掛搜尋平台或是 npm 尋找 Cordova 外掛；也能依照《外掛開發指南》自行開發外掛。典型場景：實現 Cordova 和自訂原生元件之間的通訊。

注意：全新 Cordova 專案預設不會內建任何外掛，這是新版本預設規則。無論核心外掛或是第三方外掛，都需要手動明確安裝。

Cordova 不提供 UI 控制項與 MV* 前端框架，僅提供承載網頁程式的執行環境。如果你需要介面元件或是前端架構框架，必須自行挑選並整合至專案。

兩種開發流程

Cordova 提供兩套主流工作流程來建置行動應用。多數場景下兩套流程都能達成目標，但各有優勢：

跨平台工作流程（CLI 命令列工具）

適合目標平台數量多、幾乎不需要平台專屬客製開發的場景。核心工具為 cordova CLI。CLI 屬於高階工具，支援一次為多個平台建置專案，隱藏底層指令稿細節：CLI 將通用網頁資源複製到各平台子目錄，自動完成平台設定、執行建置指令稿產生安裝封包；同時提供統一命令列介面管理外掛。

平台專屬工作流程

適合專注單一平台開發、需要深度修改專案底層的場景

典型使用場景：在應用內混合自訂原生元件與 Cordova WebView

如果你需要直接修改平台 SDK 內的專案檔案，就選擇這套流程。

此工作流程以各平台專屬底層指令稿為基礎，搭配獨立工具 Plugman 管理外掛。雖然也能使用它做多平台開發，但成本更高：沒有高階工具統一管理，每個平台都要分開建置、獨立維護外掛設定。

一旦從 CLI 模式切換為平台 SDK + 底層指令稿模式，無法回復原有模式。

CLI 會維護一套跨平台共用原始碼，每次建置都會覆寫平台目錄內的程式。如果你想保留對平台目錄檔案的修改，就必須切換到底層指令稿模式；該模式不再讀取共用網頁原始碼，直接使用平台目錄內獨立程式。

安裝 Cordova

安裝方式取決於你選擇的開發流程：

我們以跨平台 CLI 工作流程作為示範。

Cordova 命令列工具（CLI）以 npm 套件形式發布。

依照下列步驟安裝 cordova CLI：

1. 下載並安裝 Node.js。安裝完成後，你應該能在終端機直接執行 node 與 npm 指令。
2. （選用）如果你尚未安裝 Git，下載並安裝 Git 用戶端。安裝完畢後，可在命令提示字元（終端機）執行 git 指令。當需要透過 Git 倉庫位址取得資源時，Cordova CLI 與 npm 會呼叫 git。
3. 使用 Node.js 內建的 npm 工具安裝 cordova 模組，npm 會自動完成下載。

安裝 Node.js

安裝 Node.js 相當簡單，Windows 系統下載 msi 安裝檔，直接雙擊安裝，過程基本上一路下一步即可。安裝完成後

開啟 CMD 終端機，確認安裝是否成功

輸入以下兩道指令，兩道指令都正常輸出版本號才算安裝成功（輸出版本號可參考下方圖片）

node -v
npm -v

成功安裝 Node.js 之後，接下來安裝 Cordova

macOS / Linux 系統：

npm install -g cordova

macOS 與 Linux 使用者：若需要將工具安裝至 /usr/local/share 這類權限受限目錄，執行 npm 指令時可能需要加上 sudo。
如果你使用 nvm / nave 這類版本管理工具，或是當前目錄具備寫入權限，就不需要加上 sudo。

同時建議：盡量避免搭配 sudo 使用 npm，防止發生權限問題、套件安裝異常等狀況。
推薦使用 nvm（Node Version Manager）或是 nave 版本管理器管理 Node.js 與 npm，安裝套件時通常不需要 sudo。

Windows 系統：

C:\>npm install -g cordova

參數 -g 代表全域安裝 cordova；如果不加此參數，只會安裝在目前目錄的 node_modules 子資料夾內。

安裝完成後，在終端機直接執行 cordova（不帶任何參數），若正常輸出說明資訊即代表安裝成功。

安裝過程會顯示「added 217 packages in 14s」

檢查安裝是否成功

cordova -v

正常輸出版本號（例如 13.0.0）就代表準備完畢。

系統需求與版本支援

Cordova CLI 版本	支援的 Node.js 最低版本
13.x	>=20.17.0
12.x	>=16.13.0
11.x	>=12.0.0
10.x	>=10.0.0
9.x	>=6.0.0

安裝完成，接下來我們正式開始學習 Cordova。

介紹與安裝