PhoneGap - 环境设置

在本章中，我们将学习如何设置基本环境，以便轻松制作应用程序。虽然 PhoneGap 支持使用Cordova 命令行界面和Github 存储库机制离线创建应用程序，但我们将专注于最省力的过程。

我们假设您精通 Web 技术，并且您的 Web 应用程序已准备好作为应用程序发布。由于 PhoneGap 仅支持 HTML、CSS 和 JavaScript，因此必须仅使用这些技术来创建应用程序。

从开发人员的角度来看，应用程序的包中应包含以下项目 -

  • 配置文件
  • 应用程序的图标
  • 信息或内容（使用网络技术构建）

配置

我们的网络应用程序只需要一个配置文件，该文件就足以配置其所有必要的设置。它的名称是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.com" 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">

这是xyz格式的应用程序版本号，其中(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">

首选项标签用于设置应用程序的各种选项，例如全屏、背景颜色和方向。这些选项位于名称和值对中。例如：name = "FullScreen" value = "true" 等。因为我们不需要任何这些高级设置，所以我们只是将权限设置为 none。

<icon>

允许我们向我们的应用程序添加图标。它可以用多种方式编码，但由于我们正在学习一切的捷径，所以就在这里。.src确定图标图像的路径。间隙：平台确定该图标将用于哪个操作系统平台。间隙：限定符是 Android 设备使用的密度。iOS 设备使用宽度和高度参数。

图标

各种尺寸的设备都具有相同的移动操作系统，因此为了定位一个平台的受众，您还需要提供所有移动设备类型的图标。重要的是，我们根据特定移动操作系统的要求准备精确形状和尺寸的图标。

这里我们使用文件夹res/icon/ios和res/icon/android/drawable-xxxx。。

为了快速完成这项工作，您可以创建一个尺寸为 1024x1024 的徽标并登录 makeappicon.com。该网站将帮助您立即创建适用于 Android 和 iOS 平台的各种尺寸的徽标。

应用程序图标

提供尺寸为 1024x1024 的图标图像后，makeappicon.com 应提供以下内容 -

iOS 的图标

IOS

Android 图标

安卓

该网站为您提供了一个选项，可以将所有徽标以 zip 格式通过电子邮件发送到您家门口（当然，也称为电子邮件！）