PhoneGap 是一个开源平台，允许您使用 HTML、JavaScript 和 CSS 创建跨平台移动应用程序。为了与设备硬件交互，PhoneGap 提供了 JavaScript API，可与板载摄像头、GPS 和加速计等功能进行交互。
尽管 PhoneGap 非常适合开发跨平台应用程序，但针对一个或另一个平台开发应用程序的代码会有所不同。需要克服的最大差异之一是所需的软件要求。
本教程将深入介绍如何设置 Android 开发环境，并将构建一个简单的“Hello World”应用。
如果您想进一步使用 PhoneGap，请查看 Envato Market 上的 PhoneGap 脚本和应用模板范围。
您需要安装 Java 开发工具包 (JDK)。请按照官方说明进行设置。
您还需要 Android 软件开发套件。安装 SDK 时，您需要为您的用户 PATH 变量设置 android-sdk-
如果您的计算机上尚未安装 Eclipse，则需要下载并安装它。
您还需要安装 Eclipse 的 ADT 插件。 ADT（Android Development Tools）是eclipse的一个插件，它为开发Android应用程序提供了完整的IDE。 ADT 可以让您创建新的 Android 项目，也可以让您从现有源创建 Android 项目（这是我们在 eclipse 上打开适用于 android 的 PhoneGap 应用程序的方式）。使用 ADT，您还可以调试 Android 应用程序。由于 ADT 与 android SDK 很好地集成，因此从 IDE 运行应用程序会直接启动 android 模拟器。
要安装 ADT，请在 Eclipse 帮助窗口中单击“安装新软件”，然后输入要使用的以下站点：http://dl-ssl.google.com/android/eclipse/。然后按照出现的向导安装 ADT。
安装 ADT 后，您将需要安装 Android 平台和其他组件。为此，请转到菜单选项窗口 -> Android DK 和 AVD 管理器，然后选择平台和 API 级别。 Android api 2.2 在撰写本文时是最新的。
如果您没有安装 apache ant，您可以从 http://ant.apache.org/bindownload.cgi 下载它。要安装它，您只需解压下载的 Zip 文件并将 bin 文件夹设置在 PATH 变量的 ant 目录中。
如果您尚未安装 Ruby，可以从此免费安装程序下载。安装后，将 Ruby/bin 路径添加到您帐户的 PATH 变量中。
当然，您还需要 PhoneGap 框架本身。
应在您帐户的 PATH 变量中设置以下路径：
除此之外，您还需要设置以下变量：
要在 Android 上为 PhoneGap 应用创建工作区，请转到命令提示符或终端上的“phonegap-android”文件夹：
ruby ./droidgap "[android_sdk_path]" [name] [package_name] "[www]" "[path]"
运行命令后，如果一切顺利，将看到如下所示的正确消息：
上面的内容应该为您的 PhoneGap Android 应用程序创建一个完整的工作区。
完成此操作后，可以在 Eclipse 中打开该工作区。在 Eclipse 中选择新项目，然后选择 Android 项目。
接下来选择“从现有源创建项目”并为项目命名，如下所示。
如果您尝试在 Eclipse 中构建并运行该项目，您将收到构建错误。这是因为您尚未添加在工作区的 libs 文件夹中创建的外部库 (phonegap.jar)。
要添加该外部库，请右键单击该项目，然后选择“构建路径”->“添加外部存档”，然后选择 libs 文件夹中的phonegap.jar。
如果一切顺利，这应该会消除项目中的所有构建错误。现在尝试在模拟器中运行您的项目。您应该看到下面的屏幕。这是因为您尚未在项目中添加任何 PhoneGap HTML 或 JavaScript 文件。
在工作区的assets/www文件夹中，已经有一个名为phonegap.js的文件。在该文件夹中创建一个名为 index.html 的文件，其中包含以下代码：
<!DOCTYPE HTML>
<html>
<head>
<meta name="viewport" content="width=320; user-scalable=no" />
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title>PhoneGap Android App</title>
<script type="text/javascript" charset="utf-8" src="phonegap.js"></script>
<script type="text/javascript" charset="utf-8">
var showMessageBox = function() {
navigator.notification.alert("Hello World of PhoneGap");
}
function init(){
document.addEventListener("deviceready", showMessageBox, true);
}
</script>
</head>
<body onload="init();" >
</body>
</html>
在代码行中：
<script type="text/javascript" charset="utf-8" src="phonegap.js"></script>
包括phonegap.js 文件，它可以让您调用android 的本机API。在加载主体时，init 函数会在 PhoneGap 事件 deviceready 上注册函数 showMessageBox，当 PhoneGap 完成处理以初始化程序的所有内容时会触发该函数，以便它可以调用 PhoneGap API。 showMessageBox 函数调用 PhoneGap API navigator.notification.alert，在屏幕上显示消息框。添加index.html并在Eclipse中刷新项目后运行应用程序，您将看到以下屏幕：
现在让我们为我们的应用程序添加更多功能。以下代码创建一个文本框来输入人员姓名，并创建一个按钮，单击该按钮会显示一个消息框：
<!DOCTYPE HTML>
<html>
<head>
<meta name="viewport" content="width=320; user-scalable=no" />
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title>PhoneGap</title>
<script type="text/javascript" charset="utf-8" src="phonegap.js"></script>
<script type="text/javascript" charset="utf-8">
var displayHello = function() {
var name = document.getElementById("firstname").value;
navigator.notification.alert("name" + name);
}
</script>
</head>
<body onload="init();" id="bdy" >
<div id="txt">
<input type="text" name="firstname" id="firstname" />
</div>
<div id ="btn">
<a href="#" class="btn" onclick="displayHello();">Say Hello</a>
</div>
</div>
</body>
</html>
在下面的代码行中，我们创建了一个文本框，您可以在其中输入您的姓名。
<input type="text" name="firstname" id="firstname" />
在行中
<a href="#" class="btn" onclick="displayHello();">Say Hello</a>
我们创建了一个链接，单击该链接会调用函数 displayHello，该函数从文本框中获取值并显示一个消息框，向用户输入的名称打招呼。
上面显示的 GUI 没有任何样式。您可以使用 CSS 文件美化显示并为其添加颜色。使用以下代码在 asset\www 文件夹中创建 master.css：
#bdy
{
background:#F0F0F0;
}
#btn a{
border: 1px solid #555;
-webkit-border-radius: 5px;
border-radius: 5px;
text-align:center;
display:block;
float:left;
background:#6600CC;
width:308px;
color:#FFF;
font-size:1.1em;
text-decoration:none;
padding:1.2em 0;
margin:3px 0px 3px 5px;
}
#txt{
border: 1px solid #555;
-webkit-border-radius: 5px;
border-radius: 5px;
text-align:center;
display:block;
float:left;
background:#00FFCC;
width:308px;
color:#9ab;
font-size:1.1em;
text-decoration:none;
padding:1.2em 0;
margin:3px 0px 3px 5px;
}
在您的index.html中，在head标签之前添加以下行以链接到master.css：
<link rel="stylesheet" href="master.css" type="text/css" media="screen" title="no title" charset="utf-8">
现在，如果您运行该应用程序，您应该会看到如下所示的屏幕：
要在 Android 上创建 PhoneGap 应用程序，许多不同的软件必须协同工作。这可能意味着您可能无法设置完整的环境来在 Android 上创建 PhoneGap 应用程序。然而，一旦所有软件就位，您就可以使用 HTML、JavaScript、CSS 等开放网络标准和 PhoneGap 自己的 API 轻松创建 PhoneGap 应用程序，以执行设备硬件特定处理。这为您省去了学习 Android 编程本机语言的麻烦，并且仍然拥有自定义、本机构建的 Android 应用程序的强大功能。
以上是构建 PhoneGap Android 应用程序：'Hello World”初学者指南的详细内容。更多信息请关注PHP中文网其他相关文章！
