使用 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 应用程序开发入门及使用所需的各种工具。

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

安装 Android 工具

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

下载并配置 Android SDK

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

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

为 Eclipse 配置 ADT 插件

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

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

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

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

下载并安装 PhoneGap

下一步是下载并安装 PhoneGap。

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

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

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

在 Eclipse 中创建项目

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

  1. 选择 New > Android Project(参见图 1)。

图 1. 创建新的 Android 项目。

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

  1. 在 New Android Project 对话框中,键入项目名称,然后选中 Create New Project In Workspace(参见图 2)。
  2. 单击 Next。

图 2. New Android Project 对话框。

  1. 选择 Android 2.2 作为构建目标,然后单击 Next(参见图 3)。

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

图 3. 选择构建目标。

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

图 4. 指定程序包名称。

配置项目以使用 PhoneGap

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

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

图 5. 新项目目录。

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

图 6. PhoneGap lib/android 目录。

  1. 将 cordova-1.5.0.js 复制到 Android 项目内的 assets/www 目录。
  2. 将 cordova-1.5.0.jar 复制到 Android 项目内的 libs 目录。
  3. 将 xml 目录复制到 Android 项目内的 res 目录(参见图 7)。

图 7. 复制资源。

  1. 接下来,在 assets/www 文件夹中创建一个名为 index.html 的文件。此文件将用作 PhoneGap 应用程序界面的主要入口点
  2. 在 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>

  1. 您需要将 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 做好准备。

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

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

  1. 在主 Activity 类中,为 org.apache.cordova.DroidGap添加以下导入语句:

import org.apache.cordova.DroidGap;

  1. 将基类从 Activity 更改为DroidGap ;它位于类定义中 extends 一词的后面:

public class HelloGapActivity extends DroidGap {

  1. 用从您此前创建的本地 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 运行。

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

图 10. 打开 AndroidManifest.xml。

  1. 在 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 应用程序配置权限。

  1. 复制以下<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> 代码。

  1. 找到<activity>节点,它是 <application>XML 节点的子节点。将下面的属性添加到该<activity> 节点:

configChanges="orientation|keyboardHidden"

  1. 接下来,您需要再为 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 设备上启动您的应用程序:

  1. 确保该设备已通过 USB 连接到您的计算机。
  2. 选择 Run > Run Configurations(参见图 13)。

图 13. 更新运行配置。

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

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

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

图 15. 选择 Android 设备。

  1. 选择您要使用的设备(参见图 15),然后单击 OK。

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

下一步阅读方向

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

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

时间: 2024-12-26 13:05:06

使用 Eclipse PhoneGap 构建 Android 应用程序入门的相关文章

spring mvc构建WEB应用程序入门例子

在使用spring mvc 构建web应用程序之前,需要了解spring mvc 的请求过程是怎样的,然后记录下如何搭建一个超简单的spring mvc例子. 1) spring mvc的请求经历 请求由DispatcherServlet分配给控制器(根据处理器映射),在控制器完成处理后,请求会被发送到一个视图(根据viewController解析逻辑视图) 来呈现输出结果. 整理成下图所示: 2)搭建一个简单的spring mvc例子 ①创建一个maven工程,其中pom中要有spring相关

使用 Cordova(PhoneGap)构建Android程序

移动终端开发随着智能手机的普及变得越来越热,什么项目都想移动一把,但反观要去学这些各个终端的控件使用,实属不易,又特别是每个终端的控件及所用语言都各不相同,使得这种学习变得更加困难. 有没有一种简单的方式能够快速构建移动终端程序并能在各个终端平台上快速打包并正常使用? 答案是肯定的,并且这种框架还不少,本文简单的介绍通过Cordova(原名为phonegap)这个平台构建一个android 程序. 开发环境准备. 安装JDK,此步骤忽略,各位有意的看官可自行去oracle网站上下载你适合的jdk

eclipse再见,android studio 新手入门教程(二)项目的导入

上一篇博客介绍了AS的一些常用设置方法,当工具调教妥当后,自然就要开始项目的开发啦.从零开始新建一个项目,这个简单,不必多说,这篇博客会分享我从旧平台eclipse导入项目到AS的过程,以及遇到的一些问题并如何解决.开篇先粗略的提一些需要注意的地方. 结构目录 和eclipse不同,在android 视图下的项目目录分为java,res和manifests. manifests目录存放清单文件,不必多说. java目录会默认生成三个文件夹,其中test为在本机执行单元测试代码的目录, andro

用 Eclipse 开发 Android 应用程序

转自:http://www.apkbus.com/android-13828-1-1.html 开始之前 本教程介绍如何在 Eclipse 环境中进行 Android 应用程序开发,包括两个示例应用程序.第一个示例是一个基本的应用程序,涉及构建和调试的所有阶段.第二个应用程序示例涉及比较复杂的 Android 特性,包括联系人搜索和 Google Maps 地址查找.要想从本教程获得最大收益,具备移动开发经验会有帮助,但不是必需的.开发 Android 应用程序需要 Java? 编程技能,但是对

Cocos2dx 3.0开发环境搭建--Eclipse上构建一个Android项目

一.前言: 本篇主要介绍Cocos2d-x 3.0的一些基础内容,以及在Eclipse上上编译我们的Cocos2d-x项目,成功把Helloworld运行起来了.看完本篇博客之后,你就会知道Cocos2d-x 3.0竟然发生了如此大的变化,变得如此简单,环境搭建.项目创建.编译的方式更加人性化了. 二.环境准备: 1.下载ADT Bundle(Eclipse捆绑了SDK和ADT),或者是Eclipse安装了ADT插件. 2.安装JDK.NDK.Ant .Python,然后配置环境. 3.Coco

Eclipse替代ndk-gdb断点调试Android NDK程序

一 概述: Eclipse调试NDK程序的操作并不难,难的是环境的搭建.光是安装Eclipse就有不少问题,真是"大错不犯,小过不断"不胜期烦.在网上,已经有先行者记录下了Eclipse断点调试Android NDK程序的方法: <Eclipse + ADT(包括NDK Plugin) + CDT 搭建Android NDK开发环境>网址:http://blog.sina.com.cn/s/blog_48ed03c80101nhei.html 我遇到的情况与上文有些不同,上

Cocos2d-x 3.0 - Eclipse上构建一个Android项目

Cocos2d-x 3.0 - Eclipse上构建一个Android项目 2014年4月30日 4月末 本篇继续介绍Cocos2d-x 3.0的一些基础内容,前面一篇博客介绍了如何在Visual Studio 2012上编译我们的Cocos2d-x项目,也成功把Helloworld运行起来了.跟以往的版本是类似的,只不过创建空项目的时候命令变成了cocos.本篇博客带给大家的是,如何在Eclipse运行起我们的Cocos2d-x项目,如果童鞋们有看我写的Cocos2d-x 2.2.3版本的交叉

用Gradle 构建android程序

前言 android gradle 的插件终于把混淆代码的task集成进去了,加上最近,android studio 用的是gradle 来构建项目, 下定决心把android gralde 构建项目的用户指南全部看完, 让不会用gradle 的人也用gradle构建android项目,让打包(注意,打包和构建是两码事)多版本android不再痛苦.最后,题外话:珍惜生命,远离ant.... Gradle build android 历史 Android Tools 主页 ,大概是今年2月份发布

Cocos2dx 3.0开发环境的搭建--Eclipse建立在Android工程

一.前言: 这部分描述了Cocos2d-x 3.0的一些基础内容,以及在Eclipse上上编译我们的Cocos2d-x项目,成功把Helloworld执行起来了.看完本篇博客之后.你就会知道Cocos2d-x 3.0居然发生了如此大的变化.变得如此简单,环境搭建.项目创建.编译的方式更加人性化了. 二.环境准备: 1.下载ADT Bundle(Eclipse捆绑了SDK和ADT).或者是安装Eclipse了ADT插件. 2.安装JDK.NDK.Ant .Python.然后配置环境. 3.Coco