首页 > 文章 > web前端 > 构建 PhoneGap Android 应用程序：“Hello World”初学者指南

构建 PhoneGap Android 应用程序：“Hello World”初学者指南

WBOY原创: 2023-09-04 10:33:01968浏览

PhoneGap 是一个开源平台，允许您使用 HTML、JavaScript 和 CSS 创建跨平台移动应用程序。为了与设备硬件交互，PhoneGap 提供了 JavaScript API，可与板载摄像头、GPS 和加速计等功能进行交互。

尽管 PhoneGap 非常适合开发跨平台应用程序，但针对一个或另一个平台开发应用程序的代码会有所不同。需要克服的最大差异之一是所需的软件要求。

本教程将深入介绍如何设置 Android 开发环境，并将构建一个简单的“Hello World”应用。

如果您想进一步使用 PhoneGap，请查看 Envato Market 上的 PhoneGap 脚本和应用模板范围。

Android 开发的 PhoneGap 要求

Java JDK

您需要安装 Java 开发工具包 (JDK)。请按照官方说明进行设置。

Android SDK

您还需要 Android 软件开发套件。安装 SDK 时，您需要为您的用户 PATH 变量设置 android-sdk-/tools。

构建 PhoneGap Android 应用程序：“Hello World”初学者指南

日食

如果您的计算机上尚未安装 Eclipse，则需要下载并安装它。

Eclipse ADT 插件

您还需要安装 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。

构建 PhoneGap Android 应用程序：“Hello World”初学者指南

Android 平台和组件

安装 ADT 后，您将需要安装 Android 平台和其他组件。为此，请转到菜单选项窗口 -> Android DK 和 AVD 管理器，然后选择平台和 API 级别。 Android api 2.2 在撰写本文时是最新的。

构建 PhoneGap Android 应用程序：“Hello World”初学者指南

阿帕奇蚂蚁

如果您没有安装 apache ant，您可以从 http://ant.apache.org/bindownload.cgi 下载它。要安装它，您只需解压下载的 Zip 文件并将 bin 文件夹设置在 PATH 变量的 ant 目录中。

红宝石

如果您尚未安装 Ruby，可以从此免费安装程序下载。安装后，将 Ruby/bin 路径添加到您帐户的 PATH 变量中。

PhoneGap 框架

当然，您还需要 PhoneGap 框架本身。

构建 PhoneGap Android 应用程序：“Hello World”初学者指南

创建您的开发工作区

环境变量检查：

应在您帐户的 PATH 变量中设置以下路径：

你的系统路径/jdk/bin
your_system_path/android-sdk/tools
your_system_path/ruby/bin
your_system_path/apache-ant/bin

除此之外，您还需要设置以下变量：

JAVA_HOME – JDK 目录的路径
ANT_HOME – apache-ant 目录的路径
ANDROID_HOME – Android SDK 目录的路径。

要在 Android 上为 PhoneGap 应用创建工作区，请转到命令提示符或终端上的“phonegap-android”文件夹：

ruby ./droidgap "[android_sdk_path]" [name] [package_name] "[www]" "[path]"

android_sdk_path：您安装 SDK 的位置
名称：新应用程序的名称。
package_name：您要为应用程序指定的名称。
www：您要从中复制 PhoneGap 应用文件的文件夹。
路径：您的项目的应用程序工作区。

运行命令后，如果一切顺利，将看到如下所示的正确消息：

构建 PhoneGap Android 应用程序：“Hello World”初学者指南

上面的内容应该为您的 PhoneGap Android 应用程序创建一个完整的工作区。

构建 PhoneGap Android 应用程序：“Hello World”初学者指南

在 Eclipse 中设置您的项目

完成此操作后，可以在 Eclipse 中打开该工作区。在 Eclipse 中选择新项目，然后选择 Android 项目。

构建 PhoneGap Android 应用程序：“Hello World”初学者指南

接下来选择“从现有源创建项目”并为项目命名，如下所示。

构建 PhoneGap Android 应用程序：“Hello World”初学者指南

如果您尝试在 Eclipse 中构建并运行该项目，您将收到构建错误。这是因为您尚未添加在工作区的 libs 文件夹中创建的外部库 (phonegap.jar)。

构建 PhoneGap Android 应用程序：“Hello World”初学者指南

要添加该外部库，请右键单击该项目，然后选择“构建路径”->“添加外部存档”，然后选择 libs 文件夹中的phonegap.jar。

构建 PhoneGap Android 应用程序：“Hello World”初学者指南

如果一切顺利，这应该会消除项目中的所有构建错误。现在尝试在模拟器中运行您的项目。您应该看到下面的屏幕。这是因为您尚未在项目中添加任何 PhoneGap HTML 或 JavaScript 文件。

构建 PhoneGap Android 应用程序：“Hello World”初学者指南

在工作区的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中刷新项目后运行应用程序，您将看到以下屏幕：

构建 PhoneGap Android 应用程序：“Hello World”初学者指南

现在让我们为我们的应用程序添加更多功能。以下代码创建一个文本框来输入人员姓名，并创建一个按钮，单击该按钮会显示一个消息框：

<!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，该函数从文本框中获取值并显示一个消息框，向用户输入的名称打招呼。

构建 PhoneGap Android 应用程序：“Hello World”初学者指南

上面显示的 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">

现在，如果您运行该应用程序，您应该会看到如下所示的屏幕：

构建 PhoneGap Android 应用程序：“Hello World”初学者指南

结论

要在 Android 上创建 PhoneGap 应用程序，许多不同的软件必须协同工作。这可能意味着您可能无法设置完整的环境来在 Android 上创建 PhoneGap 应用程序。然而，一旦所有软件就位，您就可以使用 HTML、JavaScript、CSS 等开放网络标准和 PhoneGap 自己的 API 轻松创建 PhoneGap 应用程序，以执行设备硬件特定处理。这为您省去了学习 Android 编程本机语言的麻烦，并且仍然拥有自定义、本机构建的 Android 应用程序的强大功能。

以上是构建 PhoneGap Android 应用程序：“Hello World”初学者指南的详细内容。更多信息请关注PHP中文网其他相关文章！

Java JavaScript ruby css html eclipse CGI JS 事件 alert ide android phonegap apache http ssl

声明：

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

上一篇：如何终止 JavaScript 中的脚本？下一篇：JavaScript开发者必备工具的新课程

查看更多