將 Cordova 專案轉換成 PhoneGap 專案

發行項
06/10/2015

PhoneGap 是一種開放原始碼架構，適用於使用 HTML5、JavaScript 和 CSS 的快速建置跨平台行動應用程式。 Adobe PhoneGap Build 是一種雲端服務，您不需 SDK、編譯器和硬體，即可迅速建置且輕鬆編譯行動應用程式。本文說明如何使用 Visual Studio 將所建立的 Apache Cordova 專案轉換至 PhoneGap 專案，以及如何使用 PhoneGap Build 雲端服務。

Visual Studio 專案和 PhoneGap 專案的主要差異為組態檔 (config.xml) 中的應用程式定義。若要將您的 Visual Studio 專案變更為 PhoneGap 專案，則需執行下列工作：

從 Visual Studio 專案中建置 Cordova 專案
建立 PhoneGap 專案結構
更新 config.xml
上傳至雲端建置
程式碼簽署和佈建應用程式

從 Visual Studio 專案中建置 Cordova 專案

我們先以使用 Visual Studio Tools for Apache Cordova 所建立之專案的專案結構為範例看起。

Visual Studio 中的 Cordova 專案結構

若要成功建置，雲端 PhoneGap Build 只需應用程式中的 HTML、 CSS、影像，以及 .js 檔案等 Web 資產。如果已上傳原生檔案 (.h、.m、.java 等等)，PhoneGap Build 可能無法編譯您的應用程式。建置您的 Visual Studio 專案是取得應用程式的 Web 資產最簡單的方式，如此一來會在 bld/Debug 資料夾中建立 Cordova CLI 專案，如下所示。 Cordova CLI 專案下的 www 資料夾會裝載應用程式中使用的所有 Web 資產，如下所示。

Cordova 專案的輸出資料夾結構

只要產生 www 資料夾，您即可建置 PhoneGap Build 專案。建議您可在 Visual Studio 專案位置外新建一個資料夾，以便裝載 PhoneGap 專案，接著將 bld/debug 的 Cordova CLI 專案之 www 資料夾複製到新位置。

建立 PhoneGap 專案結構

建構 PhoneGap 專案時，請確定 config.xml 和 index.html 位於您的應用程式資料夾結構最上層。或是您也可以視需求建構應用程式。將 bld/debug 資料夾下的 config.xml 複製到 PhoneGap Build 專案的 www 資料夾。並且將 Cordova CLI 專案的原生資源 (bld\Debug\res\icons 和 bld\debug\res\screens )，分別複製到 PhoneGap Build 專案的根目錄。

一旦您已複製所有檔案和資料夾，PhoneGap Build 專案應為如下所示。

PhoneGap 專案結構

因為您的應用程式，可能包含最後封裝應用程式中不需要的檔案或資料夾 (如未使用的啟動顯示畫面，Bower 封裝、 Grunt 成品，未編譯的較少檔案等)，PhoneGap Build 可支援稱為 .pgbomit 的特殊檔案。

您可建立 .pgbomit 檔案並新增到資料夾，即可指示 PhoneGap Build 將該資料夾排除在原生應用程式檔案來源之外。 (不過，在編譯步驟前，您可以使用此資料夾儲存 PhoneGap 建置程序期間所需的任何檔案。)在常見的範例中，您需將 .pgbomit 放在含圖示和啟動顯示畫面資料夾下。因此將 www/res 資料夾下的 .pgbomit 放在 PhoneGap Build 專案中，最後除了為特定平台所複製和使用的圖示和啟動顯示畫面，二元應用程式套件不會包含任何 www/res 的檔案與資料夾。下圖顯示出 www/res 資料夾中 .pgbomit 檔案。

Pgbomit 檔案的位置

由於 PhoneGap Build 預設不支援 Cordova CLI 專案的合併資料夾，您必須將 Cordova CLI 專案的平台專屬內容從合併資料夾複製到 PhoneGap Build 專案的 www 資料夾。

更新 Config.xml

PhoneGap Build 支援組態 XML 檔案，即 config.xml，但此檔案與 Visual Studio 專案所產生的 config.xml 檔十分不同。此組態檔可讓您修改應用程式的標題、圖示、啟動顯示畫面和其他屬性等項目。

一開始可先移除 VS 命名空間，並在 config.xml 中加入 PhoneGap 命名空間。結果會如下所示。

<widget xmlns:cdv="http://cordova.apache.org/ns/1.0"
  id="io.cordova.appb64ec64666e9432a9caf5f01009feb88"
  version="1.0.0.0"
  xmlns:gap="http://phonegap.com/ns/1.0"
  xmlns="http://www.w3.org/ns/widgets">
<name>SlidePuzzle</name>

圖示

預設圖示必須命名為 icon.png，且必須位於應用程式資料夾的根目錄。除非您在 config.xml 中另外指定，否則每個平台將嘗試在編譯期間使用預設 icon.png。

<icon src="icon.png" />

如果您想要替 Android 平台指定特定圖示，下列為如何依據您先前所建立的 PhoneGap Build 專案內容，在其 res\icons\android 資料夾中更新 config.xml 之範例。

<icon gap:platform="android" gap:qualifier="ldpi"
    src="www/res/icons/android/icon-36-ldpi.png" />
<icon gap:platform="android" gap:qualifier="mdpi"
    src="www/res/icons/android/icon-48-mdpi.png" />
<icon gap:platform="android" gap:qualifier="hdpi"
    src="www/res/icons/android/icon-72-hdpi.png" />
<icon gap:platform="android" gap:qualifier="xhdpi"
    src="www/res/icons/android/icon-96-xhdpi.png" />

如需在 config.xml 中指定圖示項目的詳細資訊，請閱讀本文章。

啟動顯示畫面

在 config.xml 中可出現零或多個啟動顯示畫面項目。啟動顯示畫面項目有 src、gap:platform、寬度及高度屬性，如 <icon> 項目。如同圖示檔案，將啟動顯示畫面檔案儲存為 PNG 影像。除非您在 config.xml 中另外指定，否則在編譯期間，每個平台將會使用預設的 splash.png 檔案。如果您未提供 gap:platform 屬性，預設影像會複製到所有平台，每個應用程式封裝的大小也會隨之增加。

預設啟動顯示畫面必須命名為 splash.png，且必須位在應用程式資料夾的根目錄。

<gap:splash src="splash.png" />

如果您想要替 Android 平台指定特定啟動顯示畫面，下列為如何依據您先前所建立的 PhoneGap Build 專案，在其 res\icons\android 資料夾中更新 config.xml 的範例。

<gap:splash gap:platform="android" gap:qualifier="port-ldpi" 
    src="www/res/screens/android/screen-ldpi-portrait.png" />
<gap:splash gap:platform="android" gap:qualifier="port-mdpi" 
    src="www/res/screens/android/screen-mdpi-portrait.png" />
<gap:splash gap:platform="android" gap:qualifier="port-hdpi" 
    src="www/res/screens/android/screen-hdpi-portrait.png" />
<gap:splash gap:platform="android" gap:qualifier="port-xhdpi" 
    src="www/res/screens/android/screen-xhdpi-portrait.png" />
<gap:splash gap:platform="android" gap:qualifier="land-ldpi" 
    src="www/res/screens/android/screen-ldpi-landscape.png" />
<gap:splash gap:platform="android" gap:qualifier="land-mdpi" 
    src="www/res/screens/android/screen-mdpi-landscape.png" />
<gap:splash gap:platform="android" gap:qualifier="land-hdpi" 
    src="www/res/screens/android/screen-hdpi-landscape.png" />
<gap:splash gap:platform="android" gap:qualifier="land-xhdpi" 
    src="www/res/screens/android/screen-xhdpi-landscape.png" />

如需在 config.xml 中指定啟動顯示畫面的詳細資訊，請閱讀本文章。

外掛程式

若要擴充 PhoneGap 原生應用程式容器所公開的原生平台功能之存取權，PhoneGap Build 可支援 PhoneGap 外掛程式的白名單選項。如需支援的外掛程式清單，請參閱外掛程式。如果您包含任何不存在 Adobe 白名單中的外掛程式，則建置會失敗。若要將外掛程式匯入 PhoneGap Build 專案，您必須將正確的 <gap:plugin> 項目加入 config.xml。如果您省略外掛程式的版本屬性，應用程式一律會使用最新版的外掛程式建置。

以下是使用已建立版本外掛程式的最簡單方式。

<gap:plugin name="com.phonegap.plugins.example" version="2.2.1" />

因為 Visual Studio 會發出 <vs:plugin> 項目到您所加入的所有外掛程式中的 config.xml，您必須使用 <gap:plugin> 項目取代這些項目。在所使用的專案範例裡，我們在 config.xml 中使用兩個外掛程式和相對應的兩行。

<vs:plugin name="org.apache.cordova.device-motion" version="0.2.10" />
<vs:plugin name="org.apache.cordova.camera" version="0.3.2" />

在 PhoneGap Build 專案中，這幾行必須變更為：

<gap:plugin name="org.apache.cordova.device-motion" version="0.2.10" />
<gap:plugin name="org.apache.cordova.camera" version="0.3.2" />

如需有關如何修改外掛程式的詳細資訊，請參閱此文章。

將您的專案上傳至 PhoneGap

完成所有必要的修改之後，您可以將應用程式上傳至 PhoneGap 建置服務。首先，請建立 PhoneGap 建置服務帳戶。然後在 https://build.phonegap.com/apps 上登入您的帳戶以提交應用程式。您可以從 GIT 儲存機制提交應用程式，或上傳至本機的 ZIP 檔案。在這個範例中，我們即將上傳包含 www 壓縮資料夾的本機 ZIP 檔案。上傳 ZIP 檔之後，您會看到已準備好要建置應用程式。

準備好要建置的 PhoneGap 專案