PhoneGap - 環境設定

在本章中，我們將學習如何設定基本環境，以便輕鬆地建立應用程式。儘管 PhoneGap 支援使用 Cordova 命令列介面和 Github 倉庫機制離線建立應用程式，但我們將專注於最少努力的過程。

我們假設您精通 Web 技術，並且您的 Web 應用程式已準備好作為應用程式釋出。因為 PhoneGap 僅支援 HTML、CSS 和 JavaScript，所以應用程式必須僅使用這些技術建立。

從開發人員的角度來看，應用程式的軟體包中應包含以下專案：

配置檔案
應用圖示
資訊或內容（使用 Web 技術構建）

配置

我們的 Web 應用只需要一個配置檔案，該檔案足以配置其所有必要設定。它的名稱為 config.xml。此檔案包含編譯應用程式所需的所有必要資訊。

讓我們看看我們示例中的 config.xml：

<?xml version = "1.0" encoding = "UTF-8"?>

<widget xmlns = "https://www.w3.org/ns/widgets" 
   xmlns:gap = "https://phonegap.com/ns/1.0" id = "com.tutorialspoint.onlineviewer" version = "1.0">
   
   <name>Tutorials Point</name>
   
   <description>
      Tutorials Point Online Viewer
   </description>
   
   <author href = "https://tutorialspoint.tw" email = "contact@tutorialspoint.com">
      Tutorials Point
   </author>
   
   <preference name = "permissions" value = "none"/>
   
   <icon src = "res/icon/android/drawable-ldpi/tp_icon.png" 
      gap:platform = "android" gap:qualifier = "ldpi" />
		
   <icon src = "res/icon/android/drawable-mdpi/tp_icon.png" 
      gap:platform = "android" gap:qualifier = "mdpi" />
		
   <icon src = "res/icon/android/drawable-hdpi/tp_icon.png" 
      gap:platform = "android" gap:qualifier = "hdpi" />
		
   <icon src = "res/icon/android/drawable-xhdpi/tp_icon.png" 
      gap:platform = "android" gap:qualifier = "xhdpi" />
		
   <icon src = "res/icon/android/drawable-xxhdpi/tp_icon.png" 
      gap:platform = "android" gap:qualifier = "xxhdpi" />
   
   <icon src = "res/icon/ios/Icon-72.png" gap:platform = "ios" gap:qualifier = ""/>
   <icon src = "res/icon/ios/icon-57.png" gap:platform = "ios" width = "57" height = "57" />
   <icon src = "res/icon/ios/icon-72.png" gap:platform = "ios" width = "72" height = "72" />
   <icon src = "res/icon/ios/icon-57-2x.png" gap:platform = "ios" width = "114" height = "114" />
   <icon src = "res/icon/ios/icon-72-2x.png" gap:platform = "ios" width = "144" height = "144" />
   
</widget>

所有配置內容都包裝在 <widget> 標籤中。以下是簡要說明：

<widget id = ”app_id”>

id 是您在各個應用商店中預留的應用 ID。它採用反向域名風格，例如 com.tutorialspoint.onlineviewer 等。

<widget version = "x.y.z">

這是應用程式的版本號，格式為 x.y.z，其中 (x,y,z) 為正整數，例如 1.0.0，它表示主版本號.次版本號.修訂版本號系統。

<name> App Name</name>

這是應用程式的名稱，它將顯示在手機螢幕上的應用程式圖示下方。您可以使用此名稱搜尋您的應用程式。

<description> My First Web App </description>

這是關於應用程式是什麼以及它是什麼的簡要描述。

<author> Author_Name </author>

此欄位包含建立者或程式設計師的名稱，通常設定為釋出此應用程式的組織的名稱。

<preferences name = "permissions" value = "none">

preferences 標籤用於設定各種選項，例如應用程式的 FullScreen、BackgroundColor 和 Orientation。這些選項以名稱-值對的形式存在。例如：name = "FullScreen" value = "true" 等。因為我們不需要任何這些高階設定，所以我們只將許可權設定為 none。

<icon>

允許我們將圖示新增到我們的應用程式。它可以用多種方式編碼，但由於我們正在學習所有內容的快捷方式，所以這裡就是它。.src 確定圖示影像的路徑。gap:platform 確定此圖示用於哪個作業系統平臺。gap:qualifier 是 Android 裝置使用的密度。iOS 裝置使用width & height 引數。

圖示

有各種尺寸的裝置具有相同的移動作業系統，因此要定位一個平臺的使用者，您也需要提供所有手機型別的圖示。重要的是我們準備符合特定移動作業系統要求的精確形狀和尺寸的圖示。

這裡我們使用資料夾 res/icon/ios 和 res/icon/android/drawable-xxxx.。

要快速完成這項工作，您可以建立一個大小為 1024x1024 的徽標，並登入 makeappicon.com。此網站將幫助您立即建立適用於 Android 和 iOS 平臺的所有尺寸的徽標。

提供大小為 1024x1024 的圖示影像後，makeappicon.com 應提供以下內容：

iOS 圖示

Android 圖示

此網站為您提供了一個選項，可以將所有徽標以 zip 格式透過電子郵件傳送到您的郵箱（當然，就是電子郵件！）。

列印頁面