PhoneGap環境設定


我們將在這裡學習如何設定基本的環境,以使應用毫不費力。通過PhoneGap的支援cordova使用命令列介面和Github的資料庫機制的應用程式離線建立,但我們自己動手體驗組態過程。

我們假設你精通Web技術,Web應用程式準備作為一個應用程式。因為PhoneGap僅支援HTML,CSS和JavaScript,它是強制性的,這個應用只使用這些技術建立。

從開發者的角度來看,包括在其包中的應用程式應該具有以下專案:

  • 組態檔案
  • 應用程式圖示
  • 資訊或內容(使用網路技術構建的)

組態

web應用程式將只需要一個應該是足夠的組態所有必要的設定組態檔案。它的名字是config.xml。該檔案包含了所有編譯應用程式所需的必要資訊。

讓我們來看看config.xml 如下例子:

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

<widget xmlns     = "http://www.w3.org/ns/widgets"
        xmlns:gap = "http://phonegap.com/ns/1.0"
        id        = "com.yiibai.onlineviewer"
        version   = "1.0">

    <name>Tutorials Point</name>

    <description>
        Tutorials Point Online Viewer
    </description>

    <author href="https://www.tw511.com" email="[email protected]">
        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.yiibai.onlineviewer等。

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

x.y.z格式是應用程式的版本號,其中(x,y,z)為正整數,即1.0.0,它代表major.minor.patch版系統。

<name> App Name</name>

這是應用程式的名稱,這將在手機螢幕上顯示下面的應用程式圖示。應用程式可以使用這個名稱來搜尋。

<description> My First Web App </description>

這是關於應用,並且它是一個簡要說明。

<author> Author_Name </author>

此欄位包含建立者或程式員,一般設定為組織,正在發起這個應用程式的名稱的名稱。

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

偏好設定標籤是用來設定各種選項,比如全螢幕,BackgroundColor中和方向的應用程式。這些選項在名稱和值對。例如:name="FullScreen" value="true" 等。由於我們不要求任何這些預先設定,只要把許可權設定為none。

<icon>

讓我們將圖示新增到我們的應用程式。它可以編碼多種方式,但我們正在學習捷徑的一切,所以在這兒呢。 .src 確定的圖示影象的路徑。差距:平台決定了其作業系統平台該圖示將被使用。 gap:限定詞是使用Android裝置的密度。在iOS裝置上使用的寬度和高度引數。

圖示

有具有相同的行動作業系統不同大小的裝置,因此目標受眾一個平台,需要提供所有的移動裝置型別的圖示。製備精確的形狀和尺寸的圖示所要求的特定的行動作業系統是重要的。

在這裡,我們使用的是檔案夾res/icon/ios 和res/icon/android/drawable-xxxx.

為了這個工作做得快,可以建立一個大小為1024×1024的標誌,然後登入到makeappicon.com。這個網站將幫助你快速建立各種大小的,以及Android和iOS平台的標誌。


提供了1024×1024尺寸的圖示影象後,makeappicon.com應提供下列資料:

icons for iOS

icons for Android

本網站為提供了一個選項,通過電子郵件傳送zip格式的所有標識。