共用方式為


建立 Apache Cordova 應用程式

本主題適用於發行前版本軟體 -- Apache Cordova 的 Visual Studio Tools。這些功能描述於預覽中,但有可能變更。您可以從 Microsoft 下載中心下載此 Preview。

使用 Visual Studio Tools for Apache Cordova 建置的應用程式會使用 Cordova 與 Web 技術 (例如 HTML 和 CSS) 來存取原生 API。 藉由減少或免除對原生程式碼的需要,應用程式可跨多個裝置運作。

有些工作通用於大多數的 Cordova 應用程式。 這些活動包括:

建立 Cordova 專案

如需使用 Visual Studio Tools for Apache Cordova 的開發簡介以及 Visual Studio 中的 Cordova 專案結構說明,請參閱Create Your First Hello World App

選擇協力廠商的 JavaScript 架構

一般而言,建置 Cordova 應用程式時,為確保更輕鬆的應用程式開發,或為了遵循設計應用程式的最佳作法,您也需要納入協力廠商的 JavaScript 架構。 您可以使用不只一種架構! (甚至也可以不用任何架構。 這些架構皆不是 Cordova 的一部分。)

協力廠商的 JavaScript 架構可能包括各種功能與設計特性,例如:

  • 模型檢視控制器 (MVC) 設計模式,有助於區隔個別的應用程式考量。 AngularJS 以及 Backbone 就是常見的兩個範例。

  • UI 控制項與樣式。 UI 架構 (或程式庫) 通常包括格線控制項之類的特定控制項,有時也有 CSS 樣式表。 如需詳細資訊,請參閱建置 UI。

  • 導覽模型。 AngularJS 這類架構、WinJS 之類的開放原始碼,以及其他架構都可提供單頁導覽模型,有助於啟用類似應用程式的行為。

建置 UI

除了 Windows 和 Windows Phone 8.1 之外,Cordova 應用程式可在所有平台的 WebView 控制項內執行,因此看起來更傾向 Web 應用程式。 為客戶規劃 UX 時,您需要提出下列幾個問題:

  • 在不同平台上,應用程式是否需要相同的外觀?

    如果您希望在每個平台上都有原生的外觀及操作,開發成本會比較高,亦很難實現。

  • 如果想要原生的外觀及操作,是否有特別針對某個平台而定?

    有些 UI 架構可能類似特定平台的外觀及操作。 但一般來說,這些 UI 皆提供了品牌體驗,因此會跨平台保持一致。 常見的 UI 架構範例包括 IonicBootstrap

您應遵循特定平台的設計方針,以確保應用程式能通過審視流程。 應用程式不一定要擁有原生的外觀,才能獲得應用程式市集的核准,但應用程式必須具備應用程式的行為,而不是像網頁一樣。 如需詳細資訊, 請參閱 Get Your Cordova App Approved by the App Stores

如果您的 UI 相對較簡單,或者手邊的開發資源有限,則可使用跨平台 CSS 的最佳作法來建立自己的 UI,例如使用 CSS3 FlexBox 與 @media 查詢。 這方面有許多提供相關資訊的 Web 資源。

如果您要建置自己的 UI 應記住以下幾點:

  • 如果您是以 Android 4.4 或更新版本 (Chrome 瀏覽器)、Windows 或 Windows Phone 為目標,目前的 CSS 標準與其他 Web 技術支援都更好。 請參閱 caniuse.com 以取得受支援功能的相關資訊。

  • 如果您是以 iOS 或 Android 4.4 之前的版本為目標,則瀏覽器為 WebKit 瀏覽器。 (Ripple 模擬器會使用現有安裝版本的 Chrome,其行為與 Android 4.4 類似。)有些 WebKit 瀏覽器的行為有所不同。 例如,WebKit 瀏覽器針對 vw 及 vh 單位提供的支援並不一致,設計互動式 UI 時這一點非常實用。

提示

使用專案中的 merges 資料夾,來處理無法以一般方法撰寫程式碼的平台差異。

如需使用跨平台 UI 技術的範例,請參閱 AngularJS 主版詳細資料頁面範例

加入原生功能 (外掛程式)

Cordova 提供的最重要功能之一是它支援可存取原生功能 (例如地理位置和電池) 的外掛程式。 使用外掛程式時,您可將程式設計為一般 JavaScript API。 核心外掛程式通常可支援所有主要平台,但協力廠商的外掛程式可能需要較多調查。 如果沒有外掛程式支援,您就必須自訂現有的外掛程式或自行撰寫,這需要機器碼才能進行。

如需詳細資訊,請參閱管理由 Visual Studio Tools for Apache Cordova 建置之應用程式的外掛程式

加入已連接的服務

如果您的應用程式是使用 Azure 或 Office365 服務,請參閱將已連接的服務加入由 Visual Studio Tools for Apache Cordova 建置的應用程式。 您可在 Visual Studio 中的組態設計工具,取得 Azure 行動服務適用的核心外掛程式。

如需將 Azure 服務加入 Visual Studio Tools for Apache Cordova (AngularJS 版本) 工作清單範例應用程式的詳細資訊,請參閱建立 ToDoList 範例應用程式

加入平台專屬的資源

若要讓應用程式通過從應用程式市集下載的核准,平台專屬的資源 (如啟動顯示畫面和市集圖示) 是必備的。 專案中的 res 資料夾會保留這些資源。 您也可以使用 res 資料夾加入自訂的組態檔。 如需詳細資訊,請參閱 設定由 Visual Studio Tools for Apache Cordova 建置的應用程式

請參閱

其他資源

AngularJS 範例

WinJS 範例

Backbone 範例