PhoneGap 介绍

本章主要内容

● 使用 PhoneGap 建立一个应用程序

● PhoneGap 历史探秘

● 探讨使用 PhoneGap 可以构建的内容

● 理解 PhoneGap 应用程序的基础

欢迎来到 PhoneGap！既然选择阅读这本书，那就说明你已经听说过 PhoneGap，并且

想学习更多有关如何使用它来开发跨平台移动应用程序的知识。本书深入研究了 PhoneGap

API 的不同部分，并介绍如何使用 PhoneGap 工具来建立不同的应用程序。

当然，在深入了解所有细节之前，让我们先浏览一下 PhoneGap，看看它能做什么。本

章中，在学习使用 PhoneGap 的基础知识的同时，还将了解一点 PhoneGap 的历史。到本章

结束时，我们将会对建立一个 PhoneGap 应用程序不再感到陌生。

1.1 使用 PhoneGap

正如在图 1-1 中所看到的，根据 PhoneGap 网站(www.phonegap.com)的定义，PhoneGap

是一个“可以使用 Web 技术编写本地应用程序的 HTML5 应用程序平台”。

作为一名开发人员，将使用 PhoneGap 来为 iPhone、Android、BlackBerry 以及 webOS

设备开发运行代码。在每一种情况下，都将使用包含基于 Web 的 HTML、级联样式表(CSS)

和 JavaScript 代码的 PoneGap 包装器。这对你而言意味着仍旧可以继续使用所熟悉的 Web

技术，但仍要访问设备的本地特性(例如罗盘、摄像头、通讯录列表等)。这还意味着应该

能够将 Web 代码不用或稍作修改就可以部署到多个不同的设备上。

1 第 章

PhoneGap 入门经典

2

图 1-1 PhoneGap 网站的主页

1.1.1 快速展示 PhoneGap 的功能

你也许会对自己说，PhoneGap 听起来很有前途，但并不确定它实际上能做什么。在尚未

纠缠于太多技术细节之前，最好的办法就是通过快速展示一个成功的项目来展示它的功能。

1. Diary Mobile 应用程序

如图 1-2 所示，Diary Mobile 是一个能帮助更好地安排生活的移动应用程序。它设有一个

日志、一个任务管理器和一个记事簿。可以在 Android 或 iPhone 上进行记录，并随后将信息

同步到集中的 Web 存储库中。应用程序是离线的，一旦上线，它将自动在线保存有关项。

图 1-2 Diary Mobile 应用程序

第 1 章 PhoneGap 介绍

3

2. NFB Films 应用程序

如图 1-3 所示，NFB Films 是一个只运行在 Android 平台下的 PhoneGap 应用程序，它

可以让你免费观看 2 000 多部电影。用户可以按照内容搜索，通过频道或主题来浏览电影，

并同其他用户分享他们喜欢的纪录片、动画短片以及预告片。

图 1-3 NFB Films 应用程序

3. Just One More 应用程序

如图 1-4 所示，Just One More 是一个 iPad/iPhone 应用程序，可以帮助你找到激动人心

的视频内容。它提供了一个简洁、有吸引力的浏览和搜索 Vimeo 网站(www.vimeo.com)的界

面—— 它是一款内容丰富、情景逼真的应用程序，完全使用 HTML、CSS 和 JavaScript 创建。

图 1-4 Just One More 应用程序

PhoneGap 入门经典

4

4. Orbium 应用程序

如图 1-5 所示，Orbium 是一款在 iPhone、Android 和 webOS 上都可以运行的快节奏的

益智游戏。它具有高品质的图形和直观的触摸屏界面。

图 1-5 Orbium 应用程序

1.1.2 从基础开始

PhoneGap并不限制为只能创建基于HTML的实用程序。使用它可以同现代的HTML5、

CSS3 和 JavaScript 一起创建所梦想的任何内容。

那么，通常来说，当创建一个 PhoneGap 应用程序时会包括哪些内容呢？本书将竭尽

全力对每一个细节进行研究，但首先了解一下使用 PhoneGap 进行工作所涉及的整个过程

应该会很有帮助。

以下就是建立第一个 PhoneGap 应用程序的一个典型工作流程：

(1) 从 www.PhoneGap.com 上下载 PhoneGap 工具。需要指定适合所运行平台的工具集

(例如，适合 iPhone 应用程序的 Xcode 等)。

(2) 根据安装指引将 PhoneGap 工具添加到当前环境中。

(3) 当工具安装完毕后，通常需要使用刚安装好的扩展来启动一个新项目。例如图 1-6

中所示，如果正在使用 Xcode，将会有个选项来启动一个 PhoneGap 项目。

第 1 章 PhoneGap 介绍

5

图 1-6 使用 Xcode 启动一个新项目

(4) 一旦新项目启动后，工作目录都将位于 www 文件夹下。如图 1-7 所示，它包含了

所有的 HTML、CSS 和 JavaScript 文件。

图 1-7 www 文件夹下的工作目录

(5) 编译代码并使用模拟器或一个真实设备来测试代码。使用屏幕上的模拟器(如图 1-8

所示)，某些支持的功能(如振动通知)也许无效，但各人的情况都不一样。

PhoneGap 入门经典

6

图 1-8 屏幕上的模拟器

(6) 当准备向市场发布应用程序时，要遵循应用程序商店(Android 市场、Apple 应用程

序商店等)的特定说明来发布软件。

(7) 如果必须支持一个不同的设备，可以为该设备安装工具，移植 Web 代码并按照发

布路径来测试，几乎不需要对 Web 代码进行修改。

显然，实际所需的工作要比以上步骤多得多，特别是针对特定设备能够和无法实现的

时候。然而，在深入学习之前，让我们快速浏览一下 PhoneGap 的历史。

1.2 PhoneGap 的历史

PhoneGap 为开发人员解决了以下两大问题：

● 开发人员能够使用其所熟悉 Web 语言(如 HTML 和 JavaScript)来创建一个有效的移

动应用程序吗？

● 代码可以被迅速、容易地移植到其他平台，从而减轻对多平台支持的复杂度吗？

1.2.1 了解 PhoneGap 的起源

第一段 PhoneGap 代码是在 2008 年 8 月的 iPhoneDevCamp 上写成的。创建它的一个主

要动力是基于一个几乎每一个单独的 iPhone 开发新手都要面对的简单事实：Objective-C 是

一个对 Web 开发人员来说非常陌生的环境，并且 Web 开发人员的数量远远多于 Objective-C

开发人员的数量。

问题是，是否有人可以开发一个框架，让 Web 开发人员可以利用他们所有的 HTML、

CSS 和 JavaScript 知识，而且仍旧可以同 iPhone 的重要本地应用程序(如摄像头和通讯录)

交互呢？

就在那一年，PhoneGap 获了奖并开始支持 Android 平台，对人数不断增长的移动开发

人员变得越来越有用，这些人员需要在更多的平台上获得代码支持。

第 1 章 PhoneGap 介绍

7

1.2.2 PhoneGap 的当前状态评估

当前，PhoneGap 的版本是 1.x (2011 年 7 月发布了 1.0.0.rc2)。PhoneGap 在多个主要的

智能手机设备上提供了以下功能的支持：

● 加速计

● 摄像头

● 罗盘

● 通讯录

● 文档

● 地理定位

● 媒体

● 网络

● 通知(警告、声音和振动)

● 存储

如果正在为 iPhone或Android设备做开发，那么这些功能都是支持的。如果是为BlackBerry、

webOS、Windows Phone 7、Symbian 或 Bada 设备做开发，则有些功能就不支持了(例如，

在 Windows Phone 7 上，就不支持摄像头、罗盘或存储功能。老版的 BlackBerry 型号支持

地理定位、通知以及网络的可达性，但仅此而已)。

未来发行版本的路线图包括对 Contact API 的升级，将其更新到最新的 W3C 规范。此

外，计划支持以下功能(这只是尝试，而非完整的路线图)：

● 加密

● Websockets

● Web 通知

● HTML 媒体捕获

● Calendar API

● 国际化支持

● 命令行编译

● 插件架构(将帮助第三方开发人员扩展 PhoneGap)

● 网损/恢复事件

1.2.3 了解 PhoneGap 的优缺点

PhoneGap 擅长什么？最主要的是，它能够帮助你和你的开发团队在使用 Web 标准建立

交互式项目时可以利用丰富的经验。如果擅长 HTML、CSS 和 JavaScript，则在使用 PhoneGap

时很少会遇到问题—— 所有需要的正是本书所提供的有关 API 组件规范的好的介绍。

PhoneGap 擅长的另一方面是在标准 Web 技术和智能手机所固有的独特功能之间架起

了一座桥梁，以弥补它们之间的鸿沟(gap，因而得名)。通过使用 PhoneGap API 组件，可

以迅速、便捷地访问手机上的摄像头，下拉通讯录的列表或者使用罗盘进行工作。

PhoneGap 入门经典

8

如果需要将应用程序连接到远程的Web服务(通常是一个Web服务或REST风格的API)，

可以直接使用像 jQuery 这样的工具来创建强大的 Ajax 处理程序。当然，还可以自由地手

工定制自己的 XmlHttpRequest。

鉴于此，需要提醒一下，因为使用 PhoneGap 编写代码并运行在一个设备(例如 iPhone)

上，并不自动意味着在其他设备上也可以工作。也许不得不为 Android、BlackBerry 或者

Windows Phone 7 设备进行测试和微调。因此，根本不要幻想这可以达到“一次编码，多

处部署”的效果。

如果是在多个设备上运行，则需要为每一个包装器区分不同环境。例如，不能够使用

Xcode 来维护 Android PhoneGap 包装器。将其框架化的另一种方法是可以简化为运行在不

同设备上而必须修改的 Web 代码，但仍旧需要维护不同的包装器。

如果创建了一个严重依赖于动画和图片的 PhoneGap 应用程序，也许会造成所用的设

备负载过重—— 无论是使用 PhoneGap 还是本地代码都是如此。而且，如果创建了一个非

常依赖于远程 API 的应用程序，也会造成这样的结果—— 应用程序应该在离线状态下也运

行得很好，因为永远不知道使用这一应用程序的人是否会丧失网络连接。

1.3 理解 PhoneGap 应用程序的基础

现在是向 PhoneGap 深度进军的时候了。在转入对 API 规范的了解之前，研究一下使

用主要的组件可以创建的内容的例子还是有用的—— 这可以使你的有关应用程序的创意源

源不断。

1.3.1 PhoneGap 的作用

先前，已经看到了一些 PhoneGap 应用程序的快速展示。现在让我们简单介绍一下可

能会用到的一些 API 的主要组件。

1. 使用通讯录

通讯录列表是一个在所有智能手机上都相当普遍的功能。利用 PhoneGap，可以便捷地

操作以下通讯录功能：

● 使用 create()方法创建联系人

● 使用 save()方法保存联系人

● 使用 find()方法查找联系人

● 使用 clone()方法复制联系人

● 使用 remove()方法删除联系人

要创建联系人，可以给 contacts.create()传递一个 JavaScript Object Notation(JSON)对象，

这样就只在应用程序内存中创建联系人。要将新的联系人保存到 Contacts 数据库，应该使

用 save()方法。

第 1 章 PhoneGap 介绍

9

PhoneGap API 支持联系人的不同属性字段(如显示的姓名、昵称、电话号码、电子邮

件、地址、生日、性别、照片、时区等)。这些大多数都可以通过运行 contacts.find()来获取

匹配用户的列表。

clone()方法允许快速复制内存中的一个通讯录，并随即对不同的属性进行修改。例如，

也许有一组具有相同实际地址的联系人。克隆原始通讯录可以非常迅速地完成属性列表的

改变。

顾名思义，remove()方法 可用于从设备的通讯录数据库中删除联系人。

通过这一方法和功能的基本列表，可以容易地将不同视图合并在一起，来使用户实现

通讯录的搜索、创建新的联系人、对现有的联系人进行修改或者删除联系人。例如，你的

应用程序也许可以帮助用户对他们的所有联系人基于搜索条件(诸如邮政编码或存在的电

话号码)进行批处理操作。

2. 使用摄像头

大多数智能手机都内置了摄像头。PhoneGap API 提供了两种捕获图像的方法。一种是

通过 camera 对象来访问摄像头，另一种是使用 Media Capture API(本章稍后就会学到)。特

别是，camera.getPicture()方法根据传递给它的数据源类型(CAMERA 或 PHOTOLIBRARY)

来确定是使用摄像头来照相，还是从设备的相册里检索照片。

还可以选择让摄像头提供基于 Base64 编码的图像(这是默认设置)或者图像文件的位

置。一旦有了这一信息，就可以用它来渲染一幅图像、向远程服务器提交数据或者在本地

存储数据。

一个有趣的选项是捕获一幅可编辑的照片。在照片被设备捕获后，它会提供有关诸如

图像裁剪方面的各种可能的操作。

用 Camera API 可以建立哪些应用程序？一个好的例子可能就是一个照片分享的应用

程序，它允许获取一张图片，进行一些基本的编辑，然后将其发布到一台远程 Web 服务器

上去。

注意：Android 手机会忽略 allowEdit 参数。

警告：然而需要留意的是，由于最新最强大的智能手机使用了一些具有高

分辨率图形的超高品质的摄像头，如果选择使用基于 Base64 编码的数据，那

么会碰到内存管理方面的问题。

注意：那些熟悉社会摄影应用程序的人将会注意到，这实际上指的是一款

所谓的图片分享应用程序——Instagram。

PhoneGap 入门经典

10

其他可能的应用包括记录工具，它可以在照过相后在图像上再添加一些注释。或者，

甚至可以有这样的应用，让营业员对他们在商店里所找到的商品拍照，并将其添加到收藏

夹，以便和其他朋友分享。

3. 使用地理定位

另一个现代智能手机的特征就是它们的地理定位能力。大多数智能手机可以使用 GPS

或其他技术，以一定的精度来告知当前所处位置的经纬度。当然，如果设备是使用蜂窝电

话基站来进行三角定位，那位置会一点都不精确。并且，如果网络连接不可用，那就完全

失效了。

PhoneGap 的 Geolocation API 可以获取当前位置(经度和纬度，但也会包括像海拔高度

这样的其他一些细节)并会监视一个位置以防变化。如果想追踪设备的移动，这个功能就非

常有用。

在应用程序中有许多不同的方法来达到地理定位的目的。可以使用地理定位数据来丰

富其他数据—— 例如，可以在应用程序所摄取的任意照片上添加经纬度信息。或者，在用

户创建的任何注释上添加地理定位数据。抑或通过将地理定位信息发送到远程 Web 服务

器，可以使调度员掌握现场工作人员的位置情况。

4. 使用媒体文件

在 PhoneGap 中，Media Capture API 作为一个好的方法，并不只是用于捕获照片。同

样还可以用它来捕获音频和视频数据。正如所预期的那样，Media Capture API 允许开始和

停止记录、播放、暂停以及停止媒体文件，甚至可以显示一个音频文件的持续时间。

从应用程序的角度来看，可以使用 Media Capture API 来创建不同的声音和视频记录应

用程序—— 想想拥有一个能够记录音频和视频，并在一个包上添加注释或照片的工具该是

多么有用啊(对于那些使用 Evernote 的人来说，将会意识到这样描述是恰如其分的)。还可

以建立一个应用程序来对不同的音频文件进行采样。如果建立了一个移动应用程序来展示

音乐或讲话记录的目录，这就将非常有用了—— PhoneGap 将播放本地存储的文件，对于在

远程 Web 服务器上的也一样。

5. 使用存储选项

那些已经使用了 HTML5 的存储选项的人将会高兴地得知 PhoneGap 也支持 Web SQL

数据库。和 HTML5 一样，将可以本地使用 SQLite，这通常足以创建出各种丰富的数据后端。

例如，可以建立一个允许用户在设备和远程 Web 数据库之间同步数据的应用程序。应

用程序可以使用一个简单的 Ajax 调用从一个远程数据库请求特定数据，使用 JSON 将数据

传送到手机，然后对 JSON 对象进行转换并存储到 SQLite 中。这样，任何由用户在本地进

行的修改都可以重新传递到远程数据库中。

应用的可能性是广泛的—— 例如具有移动应用功能的以公司内部网为基础的知识库，

让用户下拉信息，进行必要的修改并发布回内部网上。或者，仅仅是用更丰富的数据增强

第 1 章 PhoneGap 介绍

11

设备特定的应用程序—— 例如，前面提到的可以让用户照相和记录音频的笔记应用程序，

能够使用 SQLite 为每一张所照的照片存储注释和元数据。

1.3.2 API 概览

由于本书通篇都致力于描述使用 PhoneGap API 来工作，因此没有必要对 API 中的内

容细节花费大量笔墨。然而，大致了解一下 PhoneGap API 中当前可用的内容还是有好处

的。以下是按字母顺序列出的 API 组件：

● Accelerometer—— 接入设备的运动传感器

● Camera—— 使用设备的摄像头进行拍照

● Capture—— 使用设备的媒体捕获应用程序捕获媒体文件

● Compass—— 获取设备的朝向

● Connection—— 快速检查网络状态(无论是 WiFi 还是蜂窝网络)

● Contacts—— 使用设备的联系人数据库

● Device—— 收集设备特定的信息

● Events—— 通过 JavaScript 连接本地事件

● File—— 通过 JavaScript 连接本地文件系统

● Geolocation—— 使得应用程序能够感知地理位置

● Media—— 记录并回放音频文件

● Network—— 快速检查网络状态

● Notification—— 可视、可听和可触的设备通知

● Storage—— 连接设备的本地存储选项

在以后的几个章节中，将学习到安装 PhoneGap 的方法，随后首先了解的是 Events API，

它将奠定如何启动任意应用程序的基础(换句话说，如果没能检测到代表设备准备好的

deviceready，那么就做不了什么)。之后还将进行网络状态的检查、获取设备信息，并关闭

自定义的通知。一旦掌握了这些基础，就可以开始真正进入到 API 的世界。

1.3.3 移动设计问题

到目前为止，已经笼统地学习了有关 PhoneGap API 的很多知识，接下来还将通过本书

其余章节学习更多的有关内容。

然而，要特别强调的一件事是：PhoneGap 应用程序不仅仅是关于 PhoneGap API。要

成功建立一个 HTML5 移动应用程序，不但要理解 HTML 的基础，还要掌握 CSS 和

JavaScript。此外，如果打算使用其他框架(如非常流行的 jQuery)，就必须对其工作原理有

牢固的理解。

特别地，在设备上要建立一个动态 Web 应用程序，而不是静态 HTML 页面或系列页

面—— 简单地将整个网站移植到 PhoneGap 并展示给用户是不明智的。

换句话说，必须考虑设备可视屏幕的大小。例如，只是在 iPhone 的 320×480 像素的

屏幕上倾倒一堆滚动文字和巨大的设计元素(如背景图像)，是没有什么好处的。

PhoneGap 入门经典

12

一个更好的办法是重新分割任意的内容，或者提供一个更精简版本的用户界面(UI)元

素(特别是导航)。本书并非有关移动设备用户体验的书籍，也不打算在小屏幕上的布局或

可用性方面提供任何建议。当然，要留意用户将会注意并对必须滚屏或用手指缩放获得所

需信息感到不满。

一个好的方法是使用 HTML 元素为内容(对于初学者来说，特别是标题、列表和按钮)

引入语义结构，而且可以方便地使用 CSS 进行样式化。

另外需要考虑的是，移动设备具有和运行在桌面或笔记本设备上的普通 Web 浏览器

不同的时延和初始化特性。也就是说，当用户加载 PhoneGap 应用程序时，应用程序必须

经过一系列初始化过程才能使用。大型、杂乱或极度令人费解的布局将会使运行和解析都

变得更慢。

鉴于此，出现了很多不同的框架来简化应用程序，如 xuijs(如图 1-9 所示)、jQTouch(如

图 1-10 所示)以及 jQuery Mobile(如图 1-11 所示)。

图 1-9 xuijs 框架

图 1-10 jQTouch 框架

第 1 章 PhoneGap 介绍

13

图 1-11 jQuery Mobile 框架

不同的设备对不同框架的响应也不相同(例如，jQTouch 上的动画在特定 Android 设备

上似乎极不友好，以及 xuijs 看起来是唯一能在老版本的 BlackBerry 设备上运行的框架)。

但不要被这些吓到，毕竟使用框架来创建一个可用的用户界面常常要比你自己进行集成，

然后在不同设备上进行测试迅速得多。

最后同样重要的是，在一些手机上，从一个页面链接到另一个页面也许会造成内存问

题或交互缓慢。最好的一种实践方法是尽量在一个页面上保留最多的功能，然后使用

JavaScript 函数将信息动态加载到页面上。可以使用 document.getElementById()或者使用

jQuery 的$()符号。如果使用了一个框架，则有大量的这种操作可以为你所用—— 例如，在

jQTouch 中，单击一个链接就实际请求加载一个特定的文档对象模型(DOM)元素，而不是

打开一个单独的页面。

1.4 本章小结

本章快速浏览了 PhoneGap，包括一些关键的 API 组件(如 Media、Capture、Geolocation

和 Storage)，也学习了在未来的 PhoneGap 应用程序开发中或许有帮助的不同框架和方法。

第 2 章将学习 PhoneGap 的安装和配置。

本章主要内容

主 题 关 键 概 念

典型的开发生命周期 这需要安装 PhoneGap 工具、创建一个新项目、使用 HTML 技术，以及在不同

平台上进行测试和部署

PhoneGap API 的组件 这包括 Accelerometer、Camera、Capture、Compass、Connection、Contacts、Device、

Events、File、Geolocation、Media、Network、Notification 和 Storage API