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中文网其他相关文章!