建立應用程式

本指南將說明如何建立一個 JS/HTML Cordova 應用程式，並使用 cordova 命令列介面 (CLI) 將其部署到各種原生行動平台。有關 Cordova 命令列的詳細參考，請查看 CLI 參考

建立 Cordova 專案空間

在終端機中，前往您想要建立 Cordova 專案的目錄。

請注意，下一個命令將建立一個新的專案目錄，其中將包含您的原始碼、資源檔案、組態和建置成品。

cordova create hello com.example.hello HelloWorld

上述命令將建立一個名為「hello」的專案目錄，其中包含您的 Cordova 應用程式所需的目錄結構。

預設情況下，cordova create 指令碼會產生一個骨架式的網頁應用程式，其中應用程式的起始頁面是專案的 www/index.html 檔案。

另請參閱

• Cordova create 命令參考文件
• Cordova 專案目錄結構
• Cordova 專案範本

新增平台

所有後續命令都需要在專案目錄或任何子目錄中執行

cd hello

新增您要應用程式鎖定的平台。我們將新增 'ios' 和 'android' 平台，並確保它們儲存到 config.xml 和 package.json 中

cordova platform add ios
cordova platform add android

要檢查您目前的平台設定

cordova platform ls

執行新增或移除平台的命令會影響專案的 platforms 目錄內容，其中每個指定的平台都會顯示為子目錄。

注意：使用 CLI 建置應用程式時，您_不應_編輯 /platforms/ 目錄中的任何檔案。當準備應用程式進行建置，或重新安裝外掛程式時，此目錄中的檔案會定期被覆寫。

另請參閱

• Cordova platform 命令參考文件

安裝建置的先決條件

若要建置和執行應用程式，您需要為每個您要鎖定的平台安裝 SDK。或者，如果您使用瀏覽器進行開發，則可以使用不需要任何平台 SDK 的 browser 平台。

要檢查您是否滿足建置平台的要求

$ cordova requirements
Requirements check results for android:
Java JDK: installed .
Android SDK: installed
Android target: installed android-19,android-21,android-22,android-23,Google Inc.:Google APIs:19,Google Inc.:Google APIs (x86 System Image):19,Google Inc.:Google APIs:23
Gradle: installed

Requirements check results for ios:
Apple macOS: not installed
Cordova tooling for iOS requires Apple macOS
Error: Some of requirements check failed

另請參閱

• Android 平台需求
• iOS 平台需求

建置應用程式

預設情況下，cordova create 指令碼會產生一個骨架式的網頁應用程式，其起始頁面是專案的 www/index.html 檔案。任何初始化都應指定為 www/js/index.js 中定義的 deviceready 事件處理程式的一部分。

執行以下命令來建置所有平台的專案

cordova build

您可以選擇性地將每個建置的範圍限制為特定平台 - 在這種情況下為 'ios'

cordova build ios

另請參閱

• Cordova build 命令參考文件

測試應用程式

行動平台的 SDK 通常會捆綁執行裝置映像的模擬器，以便您可以從主螢幕啟動應用程式，並查看它如何與許多平台功能互動。執行以下命令，以重建應用程式並在特定平台的模擬器中檢視它

cordova emulate android

執行 cordova emulate 也會準備、重建並將最新的應用程式重新部署到模擬器。

或者，您可以將手機插入電腦並直接測試應用程式

cordova run android

在執行此命令之前，您需要按照每個平台不同的程序來設定裝置以進行測試。

另請參閱

• 設定 Android 模擬器
• Cordova run 命令參考文件
• Cordova emulate 命令參考文件

新增外掛程式

您可以修改預設產生的應用程式以利用標準的網路技術，但是要讓應用程式存取裝置級功能，您需要新增外掛程式。

外掛程式會公開用於原生 SDK 功能的 Javascript API。外掛程式通常託管在 npm 上，您可以在外掛程式搜尋頁面上搜尋它們。某些重要的 API 由 Apache Cordova 開源專案提供，這些 API 被稱為 核心外掛程式 API。

若要新增相機外掛程式並將其儲存到 package.json 中，我們將指定相機外掛程式的 npm 套件名稱

$ cordova plugin add cordova-plugin-camera
Fetching plugin "cordova-plugin-camera@~2.1.0" via npm
Installing "cordova-plugin-camera" for android
Installing "cordova-plugin-camera" for ios

也可以使用目錄或 git 儲存庫來新增外掛程式。

注意：CLI 會為每個平台適當地新增外掛程式程式碼。如果您想要使用較低階的 shell 工具或平台 SDK 進行開發，如概觀中所述，則需要執行 Plugman 工具，以便為每個平台個別新增外掛程式。（如需詳細資訊，請參閱使用 Plugman 管理外掛程式。）

使用 plugin ls (或 plugin list，或單獨使用 plugin) 來檢視目前安裝的外掛程式。每個外掛程式都會顯示其識別碼

$ cordova plugin ls
cordova-plugin-camera 2.1.0 "Camera"

另請參閱

• Cordova plugin 命令參考文件
• Cordova 外掛程式搜尋頁面
• 核心外掛程式 API

使用 merges 來客製化每個平台

雖然 Cordova 可讓您輕鬆地為許多不同的平台部署應用程式，但有時您需要新增客製化設定。在這種情況下，您不想要修改最上層 platforms 目錄中各種 www 目錄中的原始檔，因為它們會定期被最上層 www 目錄的跨平台原始碼所取代。

相反地，最上層的 merges 目錄提供了一個指定要在特定平台上部署的資產的位置。merges 中每個特定平台的子目錄都鏡像 www 原始樹狀結構的目錄結構，讓您可以根據需要覆寫或新增檔案。例如，以下說明如何使用 merges 來提升 Android 裝置的預設字型大小

• 編輯 www/index.html 檔案，新增一個連結到額外的 CSS 檔案，在本例中為 overrides.css

    <link rel="stylesheet" type="text/css" href="css/overrides.css" />
  

• 選擇性地建立一個空的 www/css/overrides.css 檔案，該檔案將適用於所有非 Android 版本，以防止遺失檔案的錯誤。

• 在 merges/android 中建立一個 css 子目錄，然後新增對應的 overrides.css 檔案。指定 CSS 來覆寫 www/css/index.css 中指定的 12 點預設字型大小，例如

    body { font-size:14px; }
  

當您重建專案時，Android 版本將具有自訂字型大小，而其他版本則保持不變。

您也可以使用 merges 來新增原始 www 目錄中不存在的檔案。例如，應用程式可以將返回按鈕圖形合併到 iOS 介面中，儲存在 merges/ios/img/back_button.png 中，而 Android 版本則可以從對應的硬體按鈕擷取 backbutton 事件。

更新 Cordova 和您的專案

安裝 cordova 工具後，您可以隨時執行以下命令將其更新到最新版本

npm update -g cordova

使用此語法來安裝特定版本

npm install -g cordova@3.1.0-0.2.0

執行 cordova -v 以查看目前執行的版本。若要尋找最新的已發布 Cordova 版本，您可以執行

npm info cordova version

若要更新您要鎖定的平台

cordova platform update android --save
cordova platform update ios --save