使用HTML5和JAVASCRIPT开发移动应用程序外文翻译资料

英语原文共 12 页，剩余内容已隐藏，支付完成后下载完整资料

---

使用HTML5和JAVASCRIPT开发移动应用程序

摘要

你不需要独立的平台和特定的技术来开发功能强大实用的应用程序。你可能会对使用HTML5和受欢迎的JavaScript库构建的应用程序感到很惊讶。我们将使用jQuery Mobile和Cordova（也称为PhoneGap）来开发一款“在哪儿停车”的APP。要创建此应用程序，我还将使用新的HTML5 API，特别是本地存储和地理位置（实际上不是HTML5规范的一部分）以及Google Maps API。混合应用程序是使用Web技术开发的，然后包装在特定平台的shell中，它可以像原生应用程序一样安装。

关键词：网页应用；HTML 5; Javascript；谷歌地图 API；JQuery Mobile

1.引言

“在哪儿停车”的目的是让你在智能手机的GPS功能的引导下，帮助你将汽车停放在地图上指定可停放的位置，然后在完成步行后找到一条路线返回。如果您没有良好的记忆，或者您在外国城市，这种应用程序很有用。另外，“我在哪里停车”也会保存一个您保存的位置的记录（最多50个），以便您可以检索一个位置供将来使用。因为滚动50个项目的列表可能真的很烦人，应用程序将有一个搜索过滤器，以便您可以轻松实现任务。列表允许您查看地图上的位置，您还可以删除一个或多个旧位置。最后，我还将在应用程序中创建一个小额信用页面。

要充分了解将要开发的内容，你至少必须具备以下语言和框架的基本知识：

HTML：它将用于创建页面的标记。在适当的情况下，我将使用一些新的HTML5标签。

CSS：由于大部分的CSS增强功能都将由jQuery Mobile完成，所以不是很广泛地需要。但是，稍后会看到，我会使用很少的规则来纠正或调整一些样式。

JavaScript：业务逻辑完全用JavaScript编写，所以如果你不知道一些关键概念，比如回调或关闭，你需要先学习它，然后再继续。

除了上面的列表，我还将使用这些API：

地理位置API：以纬度和经度的形式提供设备的位置信息。由于许多操作系统已经支持它，Cordova将使用本机接口而不是自己的实现。而对于没有此API的平台，Cordova使用其遵守的W3C规范实现。如果需要详细的了解此API的介绍，你可以阅读HTML5 Geolocation API的使用方法。

谷歌地图API：谷歌地图API可以让将谷歌地图服务与你的网站进行整合。这项服务是完全免费的，但你应该在API控制台网站上进行注册订阅以获取你自己的API密钥，并在发送服务请求时使用它。由于这个API也可以在没有密钥的情况下工作，所以我使用它没有唯一的API密钥。

网页存储 API：这个接口提供了对设备存储选项的访问权限。如果您需要一个起点，可以查看网页存储API的概述。

请记住，Cordova对于每个操作系统使用的是不用的JavaScript文件，因此，如果你想自己编译应用程序，则需要为每一个平台使用特定的IDE SDK软件包，如Eclipse和Android SDK，Visual Studio和Windows Phone SDK等等。这真的一个痛苦的过程，所以“我在哪里停车”假设其编译是使用Adobe云服务开发的，称为Adobe PhoneGap构架。它是为其本身服务的，在编译时每个平台要包括正确的Cordova库。因此，要遵循本教程，您可以使用简单的文本编辑器或您喜欢使用的IDE，例如NetBeans，而无需安装任何其他SDK。 我将在我的bitbucket存储库中发布最终的代码，包括Android JavaScript文件。

项目结构

该项目的结构将是非常简单直接的。事实上，我会在项目的根目录中创建HTML文件、Adobe PhoneGap构架配置文件、标准闪屏和应用程序的图标。然后，将其他文件分为三类（实际上是文件夹）：CSS，图像和JS。要开发“我在哪里停车”，除了jQuery，jQuery Mobile和Cordova文件之外，我将创建以下文档：

index.html：这是整个程序的入口，包含了整个应用程序使用的所有库文件。它还具有设置和获取当前位置并查看位置日志的按钮。

Map.html：这是你将会看到的地图，在地图上会同时显示你的位置、汽车位置和到达它的路线。

positions.html：此页面将以列表的形式显示位置的日志。

style.css：正如我之前所说，我会写几个不同于jQuery Mobile标准样式的风格样式变化。

jquery.mobile.config.js：它包含了一个jQuery Mobile的配置。

functions.js：该文件包含了初始化应用程序和其他一些实用程序的功能。

maps.js：该文件具有使用谷歌地图API绘制地图和路线的功能。

positions.js：此文件使用本地存储API保存并加载以前的位置。

config.xml：这个XML文件包含了应用程序的元数据，并通过Adobe云服务器来存储设置应用程序版本号和软件包内容等。

在这一点上，您可能会认为，由于我们正在构建一个小型应用程序，所以我可以使用包含所有页面的单个文件。 你是绝对正确的，但我宁愿把事情分开组织。

设置项目

首先，创建项目文件夹，例如“where-did-i-park”，并创建上述三个文件夹：CSS，图像和JS。现在，您需要下载jQuery，jQuery Mobilem和Codova文件。 将这些框架的所有JavaScript文件放在“JS”文件夹中，将jQuery Mobile捆绑的图像放在“images”文件夹中，最后将jQuery Mobile CSS文件放在“CSS”文件夹中。 如果您已经做好了所有的事情，项目应该具有以下结构：

---css

| ---jquery.mobile-1.2.0.min.css

| ---style.css

---images

| ---ajax-loader.gif

| ---ajax-loader.png

| ---icons-18-black.png

| ---icons-18-white.png

| ---icons-36-black.png

| ---icons-36-white.png

---js

| ---cordova-2.0.0.js

| ---jquery-1.8.3.min.js

| ---jquery.mobile-1.2.0.min.js

正如之前所说，谷歌地图API的引入是必需的。你需要的文件非常简单，只需将以下行添加到HTML中即可。

lt;script src='http://maps.google.com/maps/api/js?sensor=true'gt;lt;/scriptgt;

请注意，该行包含传感器参数。它必须包含在URL中，如果您使用传感器（如GPS）设置为true，否则为false。 由于我们使用Maps API来创建移动应用，因此我们将其设置为true。

在这篇第一章和介绍性的文章中，我展示了“我在哪里停车”的功能特性，并概述了用于实施的技术。 我有组织的构建了构成应用程序的文件，以便我们可以直接开发应用。

2.主页面

在这部分中，我们将向你展示构成应用程序的所有HTML页面的源代码，突出显示每个应用程序的关键点。我们还会解释其中包含的简短样式表。除非构建显式自定义配置，否则jQuery Mobile将使用AJAX加载所有页面，因此，必须通过这是index.html入口加载“停放车辆位置”（如CSS和JavaScript文件）所需的所有文件。

主页面索引页将在页眉中显示标题，并在页脚中显示个人信息（实际上是我的名字），并使用按钮查看有关作者的其他详细信息（是我）。如第一部分所述，索引页面有三个按钮：一个查看和保存当前位置，一个查看当前位置（并查看到达汽车的路线），一个查看以前保存的位置。 话虽如此，主页的具体代码如下所示：

lt;!DOCTYPE htmlgt;

lt;htmlgt;

lt;headgt;

lt;meta charset='UTF-8' /gt;

lt;meta name='viewport' content='width=device-width, initial-scale=1'gt; lt;titlegt;Where I Parked my Carlt;/titlegt;

lt;link rel='stylesheet' href='css/jquery.mobile1.2.0.min.css' type='text/css' media='all' /gt;

lt;link rel='stylesheet' href='css/style.css' type='text/css' media='all' /gt;

lt;script src='js/jquery-1.8.3.min.js'gt;lt;/scriptgt;

lt;script src='js/jquery.mobile.config.js'gt;lt;/scriptgt;

lt;script src='js/jquery.mobile-1.2.0.min.js'gt;lt;/scriptgt;

lt;script src='js/cordova-2.0.0.js'gt;lt;/scriptgt;

lt;script src='http://maps.google.com/maps/api/js?sensor=true'gt; lt;/scriptgt;

lt;script src='js/functions.js'gt;lt;/scriptgt;

lt;script src='js/maps.js'gt;lt;/scriptgt;

lt;script src='js/positions.js'gt;lt;/scriptgt;

lt;scriptgt;

$(document).one(deviceready, initApplication);

lt;/scriptgt;

lt;/headgt;

lt;bodygt;

lt;div id='welcome-page' data-role='page'gt;

lt;header data-role='header'gt;

lt;h1gt;Where I parked my carlt;/h1gt;

lt;/headergt;

lt;div id='content' data-role='content'gt;

lt;pgt;

Where You parked your car lets you bookmark where you parked your car on a map

and then find a route when you want to return to it. The app will also save a log of your saved positions (up to 50).

lt;/pgt;

lt;a href='map.html?requestType=set' id='set-carposition' data-role='button'gt;Set positionlt;/agt;

lt;a href='map.html?requestType=get' id='find-car' data-role='button'gt;Find carlt;/agt;

lt;a href='positions.html' id='positions-history' data-role='button'gt;Positions historylt;/agt;

lt;/divgt;

lt;footer data-role='footer'gt;

lt;/footergt;

lt;/divgt;

lt;/bodygt;

lt;/htmlgt;

您可能会注意到，对于应用程序的页眉和页脚，我使用了新的HTML5 amp;l

剩余内容已隐藏，支付完成后下载完整资料

---

资料编号：[141646]，资料为PDF文档或Word文档，PDF文档可免费转换为Word