使用 Eclipse PhoneGap 构建 Android 应用程序入门

Eclipse 是一种支持多种技术的开源集成开发环境 (IDE)，但本文重点介绍 Java 支持，这也是 Android 应用程序的“母语”。Android 是 Google 发布的开源移动操作系统。Android 现已成为许多智能手机和平板设备的操作系统，其中包括三星 Galaxy 系列手机和平板电脑、亚马逊 Kindle Fire 平板电脑、Barnes and Noble Nook 平板电脑，以及大量制造商生产的许多其他设备。PhoneGap 是一个开源应用程序平台，可让您使用 HTML 和 JavaScript 创建本机安装的移动应用程序。

安装 Eclipse

在 Android 上建立 PhoneGap 应用程序开发环境的首要步骤是下载并安装 Eclipse IDE。

使用 PhoneGap 进行 Android 开发（可在 Windows、OS X 或 Linux 中完成。目前有许多不同的 Eclipse 安装包。虽然 PhoneGap 能够与其他程序包配置一同使用，但建议采用 Eclipse Classic 程序包，该程序包中已经包含 PhoneGap 应用程序开发入门及使用所需的各种工具。

访问 Eclipse 下载页面，针对您的操作系统下载 Eclipse Classic 程序包。Eclipse 下载将是一个包含开发环境的存档文件。
将该存档文件提取到您的本地硬盘，并记住其所在位置。
提取完成后，只需双击 Eclipse 应用程序即可启动 Eclipse，无需执行任何其他安装步骤。

安装 Android 工具

下载并安装 Eclipse 后，您需要配置自身环境以使用 Google Android 开发工具。此流程包含两个步骤。首先，下载并安装 Android SDK。然后，为 Eclipse 安装 ADT 插件。

下载并配置 Android SDK

在您的系统上配置 Android 工具的首要步骤是下载 Android SDK。

访问 Android SDK 网站，针对您的操作系统下载相应的版本。
将下载的存档文件提取到您的本地硬盘，并记住其所在位置。

为 Eclipse 配置 ADT 插件

接下来，您需要为 Eclipse 安装 ADT（Android 开发工具）插件。ADT 插件必须通过 Eclipse Install New Software 向导来进行安装。

启动 Eclipse。
按照 ADT 插件的下载说明（可在 Android 开发人员 SDK 页面 - Eclipse获取）执行操作。这些步骤将指导您完成整个 ADT 插件的安装过程。
重新启动 Eclipse。

在安装完 ADT 插件并重新启动 Eclipse 后，您需要将它配置为使用已下载至本地文件系统的 Android SDK。

按照开发人员 SDK 页面 – 配置 Eclipse 上的说明，在 ADT 插件中设置适当的 Android SDK 位置。

下载并安装 PhoneGap

下一步是下载并安装 PhoneGap。

访问 PhoneGap 下载页面，然后单击橙色的下载链接以开始下载过程。
将存档文件提取到本地文件系统以备随后使用。

您现已为在 Eclipse 内创建首个 Android PhoneGap 项目做好准备。

注意： 操作步骤针对 PhoneGap 1.5，但该流程须适用于所有版本的 PhoneGap，并且所有版本 PhoneGap 的操作均相同。

在 Eclipse 中创建项目

请按照以下步骤在 Eclipse 中创建新的 Android 项目：

选择 New > Android Project（参见图 1）。

图 1. 创建新的 Android 项目。

创建全新的标准 Android 项目后，将更新该项目以使用 PhoneGap。

在 New Android Project 对话框中，键入项目名称，然后选中 Create New Project In Workspace（参见图 2）。
单击 Next。

图 2. New Android Project 对话框。

选择 Android 2.2 作为构建目标，然后单击 Next（参见图 3）。

注意：选择 Android 2.2 作为构建目标会将该编译器配置为以 Android 2.2 SDK 为目标，这样可确保您的 PhoneGap 应用程序在运行 Android 2.2 及更新版本的操作系统的设备上运行。

图 3. 选择构建目标。

在 Application Info 屏幕上，键入您的主要 Android 应用程序的程序包名称（参见图 4）。这将是一个从逻辑上展示程序包结构的命名空间，例如 com.yourcompany.yourproject。
单击 Finish。

图 4. 指定程序包名称。

配置项目以使用 PhoneGap

此时，Eclipse 创建了一个空白的 Android 项目。但是，并未将它配置为使用 PhoneGap。接下来，您需要执行以下操作

在新 Android 项目内创建一个 assets/www 目录和一个 libs 目录。PhoneGap 应用程序界面的所有 HTML 和 JavaScript 均将驻留在 assets/www 文件夹内（参见图 5）。

图 5. 新项目目录。

要将 PhoneGap 的必要文件复制到项目内，首先找出下载 PhoneGap 的目录，然后导航至 lib/android 子目录（参见图 6）。

图 6. PhoneGap lib/android 目录。

将 cordova-1.5.0.js 复制到 Android 项目内的 assets/www 目录。
将 cordova-1.5.0.jar 复制到 Android 项目内的 libs 目录。
将 xml 目录复制到 Android 项目内的 res 目录（参见图 7）。

图 7. 复制资源。

接下来，在 assets/www 文件夹中创建一个名为 index.html 的文件。此文件将用作 PhoneGap 应用程序界面的主要入口点
在 index.html 中，添加以下 HTML 代码作为用户界面开发的起点：

<!DOCTYPE HTML> <html> <head> <title>PhoneGap</title> <script type="text/javascript" charset="utf-8" src="cordova-1.5.0.js"></script> </head> <body> <h1>Hello PhoneGap</h1> </body> </html>

您需要将 cordova-1.5.0.jar 库添加到该 Android 项目的构建路径。右键单击 cordova-1.5.0.jar，然后选择 Build Path > Add To Build Path（参见图 8）。

图 8. 将 cordova-1.5.0.jar 添加至构建路径。

更新 Activity 类

现在，您已经为更新 Android 项目以确保其开始使用 PhoneGap 做好准备。

打开您的主应用程序活动文件。此文件的名称与您的项目相同，并会在后面加上 "Activity" 一词。它将位于您先前在此流程中指定的项目程序包的 src 文件夹下。

对于我的项目（名为 HelloGap）而言，主 Android 活动文件名为 HelloGapActivity.java，位于我在 New Android Project 对话框中指定的程序包 com.tricedesigns.hello 中。

在主 Activity 类中，为 org.apache.cordova.DroidGap添加以下导入语句：

import org.apache.cordova.DroidGap;

将基类从 Activity 更改为DroidGap ；它位于类定义中 extends 一词的后面：

public class HelloGapActivity extends DroidGap {

用从您此前创建的本地 assets/www/index.html 文件加载 PhoneGap 界面的引用替换setContentView() 调用函数（参见图 9）。

super.loadUrl("file:///android_asset/www/index.html");

注意：在 PhoneGap 项目中，您可以引用位于 URL 引用为 file:///android_asset 的 assets 目录中的文件，然后引用该文件的路径名称。file:///android_asset URI 将会映射到 assets 目录。

图 9. 主 Activity 类更新。

配置项目元数据

现在，您已经将 Android 项目内的文件配置为使用 PhoneGap。最后一步是配置项目元数据，以使 PhoneGap 运行。

首先，在您的项目根中打开 AndroidManifest.xml 文件。使用 Eclipse 文本编辑器，方法是右键单击 AndroidManifest.xml 文件，然后选择 Open With > Text Editor（参见图 10）。

图 10. 打开 AndroidManifest.xml。

在 AndroidManifest.xml 中，添加以下supports-screen XML 节点作为 manifest 根节点的子节点

<supports-screens android:largeScreens="true" android:normalScreens="true" android:smallScreens="true" android:resizeable="true" android:anyDensity="true" />

supports-screen 节点可识别您应用程序支持的屏幕大小。您可以通过更改此条目的内容来调整屏幕和外观设置支持。要阅读有关<supports-screens>,的更多信息，请访问Android 开发人员主题 – 支持屏幕元素。

接下来，您需要为 PhoneGap 应用程序配置权限。

复制以下<uses-permission> XML 节点，并粘贴它们作为 AndroidManifest.xml 文件<manifest> 根节点的子节点：

<uses-permission android:name="android.permission.CAMERA" /> <uses-permission android:name="android.permission.VIBRATE" /> <uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" /> <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" /> <uses-permission android:name="android.permission.ACCESS_LOCATION_EXTRA_COMMANDS" /> <uses-permission android:name="android.permission.READ_PHONE_STATE" /> <uses-permission android:name="android.permission.INTERNET" /> <uses-permission android:name="android.permission.RECEIVE_SMS" /> <uses-permission android:name="android.permission.RECORD_AUDIO" /> <uses-permission android:name="android.permission.MODIFY_AUDIO_SETTINGS" /> <uses-permission android:name="android.permission.READ_CONTACTS" /> <uses-permission android:name="android.permission.WRITE_CONTACTS" /> <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" /> <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" /> <uses-permission android:name="android.permission.GET_ACCOUNTS" /> <uses-permission android:name="android.permission.BROADCAST_STICKY" />

<uses-permission>XML 值可识别您要为应用程序启用的功能。上述代码行可启用 PhoneGap 所有功能正常运行所需的全部权限。构建完应用程序后，您可能希望删除不会实际用到的所有权限；这将会删除应用程序安装过程中出现的安全警告。要阅读有关 Android 权限和 <uses-permission> 元素的更多信息，请访问 Android 开发人员主题 – 用户权限元素。

应用程序权限配置完毕后，您需要修改现有的 <activity> 代码。

找到<activity>节点，它是 <application>XML 节点的子节点。将下面的属性添加到该<activity> 节点：

configChanges="orientation|keyboardHidden"

接下来，您需要再为 org.apache.cordova.DroidGap 类创建一个 <activity> 节点。添加下面的<activity> 节点作为现有 <activity> XML 节点的同级节点。

<activity android:name="org.apache.cordova.DroidGap" android:label="@string/app_name" android:configChanges="orientation|keyboardHidden"> <intent-filter></intent-filter> </activity>

此时，已将您的项目配置为作为 Android PhoneGap 项目运行。如果您遇到任何问题，请根据 Android PhoneGap 入门网站提供的示例验证您的配置。

运行应用程序

要在 Android 模拟器中启动您的 PhoneGap 应用程序，请右键单击项目根目录，然后选择 Run As > Android Application（参见图 11）。

图 11. 启动 Android 应用程序。

如果您尚未设置任何 Android 虚拟设备，那么系统将提示您配置一台 Android 虚拟设备。要了解有关配置 Android 模拟器虚拟设备的更多信息，请访问 Android 开发人员设备指南。

Eclipse 将自动启动 Android 模拟器实例（如果尚未运行的话），为该模拟器部署您的应用程序，然后启动该应用程序（参见图 12）。

图 12. Android 模拟器中的应用程序。

当在 Android 模拟器中运行应用程序后，您可能会希望在物理设备上对其进行测试。强烈建议您始终先在物理设备上测试您的应用程序，然后再将该应用程序部署到生产环境中。物理设备的计算能力和外观设置往往与模拟器不同，设备测试能够揭露模拟器环境中可能无法检测到的问题。

请按照以下步骤在物理 Android 设备上启动您的应用程序：

确保该设备已通过 USB 连接到您的计算机。
选择 Run > Run Configurations（参见图 13）。

图 13. 更新运行配置。

在 Run Configurations 对话框左侧的 Android Application 下选择您的应用程序。
单击 Target 选项卡，然后选择 Manual 作为 Deployment Target Selection Mode。
当您准备好启动应用程序后，单击 Run（参见图 14）。

图 14. 准备在设备上运行应用程序。

在 Android Device Chooser 对话框中，您可以选择模拟器，也可以选择连接的 Android 设备。连接的所有 Android 设备均将显示在此列表中。

图 15. 选择 Android 设备。

选择您要使用的设备（参见图 15），然后单击 OK。

此时将会在该设备上安装并启动您的 PhoneGap 应用程序。

下一步阅读方向

如果您已经坚持学习完本部分，则可以开始使用 PhoneGap 构建真正的 Android 应用程序。接下来你可以阅读使用面向 iOS 的本机插件扩展 PhoneGap。

请记住，需使用 HTML、CSS 和 JavaScript 为用户界面构建 PhoneGap 应用程序。这样，您就可以使用传统的 Web 开发技术轻松创建外观卓越的应用程序。要了解有关 PhoneGap 的更多信息，请查阅 PhoneGap wiki，加入PhoneGap Google Group 或深入学习 PhoneGap 文档。