构建 PhoneGap Android 应用程序：'Hello World”初学者指南-js教程-PHP中文网

首页

web前端

js教程

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

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Sep 04, 2023 am 10:33 AM

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

声明

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

JavaScript引擎：比较实施Apr 13, 2025 am 12:05 AM

不同JavaScript引擎在解析和执行JavaScript代码时，效果会有所不同，因为每个引擎的实现原理和优化策略各有差异。1.词法分析：将源码转换为词法单元。2.语法分析：生成抽象语法树。3.优化和编译：通过JIT编译器生成机器码。4.执行：运行机器码。V8引擎通过即时编译和隐藏类优化，SpiderMonkey使用类型推断系统，导致在相同代码上的性能表现不同。

超越浏览器：现实世界中的JavaScriptApr 12, 2025 am 12:06 AM

JavaScript在现实世界中的应用包括服务器端编程、移动应用开发和物联网控制：1.通过Node.js实现服务器端编程，适用于高并发请求处理。2.通过ReactNative进行移动应用开发，支持跨平台部署。3.通过Johnny-Five库用于物联网设备控制，适用于硬件交互。

使用Next.js（后端集成）构建多租户SaaS应用程序Apr 11, 2025 am 08:23 AM

我使用您的日常技术工具构建了功能性的多租户SaaS应用程序（一个Edtech应用程序），您可以做同样的事情。首先，什么是多租户SaaS应用程序？多租户SaaS应用程序可让您从唱歌中为多个客户提供服务

如何使用Next.js（前端集成）构建多租户SaaS应用程序Apr 11, 2025 am 08:22 AM

本文展示了与许可证确保的后端的前端集成，并使用Next.js构建功能性Edtech SaaS应用程序。前端获取用户权限以控制UI的可见性并确保API要求遵守角色库

JavaScript：探索网络语言的多功能性Apr 11, 2025 am 12:01 AM

JavaScript是现代Web开发的核心语言，因其多样性和灵活性而广泛应用。1)前端开发：通过DOM操作和现代框架（如React、Vue.js、Angular）构建动态网页和单页面应用。2)服务器端开发：Node.js利用非阻塞I/O模型处理高并发和实时应用。3)移动和桌面应用开发：通过ReactNative和Electron实现跨平台开发，提高开发效率。

JavaScript的演变：当前的趋势和未来前景Apr 10, 2025 am 09:33 AM

JavaScript的最新趋势包括TypeScript的崛起、现代框架和库的流行以及WebAssembly的应用。未来前景涵盖更强大的类型系统、服务器端JavaScript的发展、人工智能和机器学习的扩展以及物联网和边缘计算的潜力。

神秘的JavaScript：它的作用以及为什么重要Apr 09, 2025 am 12:07 AM

JavaScript是现代Web开发的基石，它的主要功能包括事件驱动编程、动态内容生成和异步编程。1)事件驱动编程允许网页根据用户操作动态变化。2)动态内容生成使得页面内容可以根据条件调整。3)异步编程确保用户界面不被阻塞。JavaScript广泛应用于网页交互、单页面应用和服务器端开发，极大地提升了用户体验和跨平台开发的灵活性。