位置:首页 > 手机开发 > PhoneGap在线教程 > PhoneGap环境设置

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="http://gitbook.net" email="contact@gitbook.net">
        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格式的所有标识。