1.1PhoneGap概述

提起移动操作系统的发展历程，可谓跌宕起伏。从最早的Linux到后来一家独大的Symbian，再到如今风光无限的iOS和Android，移动操作系统日趋完善。随着操作系统在产业链核心地位的凸显，各大企业在终端及应用方面的竞争已经演变为生态系统间的竞争。

2007年1月10日，乔布斯向世界展示了他的iPhone，并带来了全新的iOS系统，从此移动终端的世界被改变了。截至2011年11月，数据显示iOS已经占据了全球智能手机系统市场份额的30%，在美国的市场占有率为43%。2011年10月4日，苹果公司宣布iOS平台的应用程序已经突破50万个。从2008年到2012年3月，App Store的下载次数已经突破了250亿次，其几十亿的分账收入更是撑起了一个新的全球产业。

而Google的Android一经推出，便受到各大厂商的热捧，近年来也是捷报连连，所交出的成绩单有目共睹。数据显示，2011年第四季度中国智能手机销量达到2283万部，同比增长79.6%，环比增长16.8%；在手机操作系统市场占有率方面，Android的表现非常抢眼，飙升到47.3%，位居第一，达到空前水平。

另据研究机构调查，微软Windows Phone未来几年将可能保持良好的增长态势，并有望跻身前列，与苹果iOS和谷歌Android三分天下。一方面，微软本身就是做操作系统出身，长期的积累已经建立了庞大的生态系统，在用户群体中具备号召力；另一方面，其开发平台受到了很大一部分开发者及用户的青睐，增长速度非常快。目前，Windows Phone Marketplace已经获得了6万个应用，超过了黑莓平台的应用数。

如图1-1所示，我们可以从中了解从2009年到2010年下半年智能手机操作系统的竞争格局和走势。

可以认为，当前移动应用市场已经初步形成了iOS、Android和Windows Phone三大阵营，当然其余的传统阵营（Symbian和RIM等）凭借历史原因和庞大的用户基数也不容小觑。

随着移动应用市场的迅猛发展，越来越多的开发者也加入到了移动应用开发的大军当中。

目前，Android应用是基于Java语言进行开发的，苹果公司的iOS应用是基于Objective-C语言开发的，微软公司的Windows Phone应用则是基于C#语言开发的。如果开发者编写的应用要同时在不同的移动设备上运行的话，则必须掌握多种开发语言，但这必将严重影响软件开发进度和项目上线时间，并且已经成为开发团队的一大难题。

为了进一步简化移动应用开发，很多公司已经推出了相应的解决方案。Adobe推出的AIR Mobile技术，能使Flash开发的应用同时发布到iOS、Android和黑莓的Playbook上。Appcelerator公司推出的Titanium平台能直接将Web应用编译为本地应用运行在iOS和Android系统上。而Nitobi公司（现已被Adobe公司收购）也推出了一套基于Web技术的开源移动应用解决方案——PhoneGap。

1.1.1PhoneGap是什么

PhoneGap是目前唯一支持7种平台的开源移动开发框架，支持的平台包括iOS、Android、BlackBerry OS、Palm WebOS、Windows Phone 7、Symbian和Bada，如图1-2所示。

PhoneGap是一个基于HTML、CSS和JavaScript创建跨平台移动应用程序的快速开发平台。与传统Web应用不同的是，它使开发者能够利用iPhone、Android等智能手机的核心本地功能——包括地理定位、加速器、联系人、声音和振动等，此外它还拥有非常丰富的插件，并可以凭借其轻量级的插件式架构来扩展无限的功能。

PhoneGap是免费的，但是它需要特定平台提供的附加软件，例如iPhone的iPhone SDK、Android的Android SDK等，也可以和Adobe Dreamweaver 5.5配套开发。另外，使用PhoneGap，需要为每个平台分别编译不同的应用程序。

当然，你也可以使用PhoneGap的在线编译云服务PhoneGap Build，可免去需要准备各种编译环境的烦恼，如图1-3所示。

利用PhoneGap Build，可以在线打包Web应用成客户端并发布到各移动应用市场。图1-4是PhoneGap Build在线打包完成并且提供下载的界面。

有了PhoneGap和PhoneGap Build，Web开发人员便可以利用他们非常熟悉的JavaScript、HTML和CSS技术，或者结合移动Web UI框架jQuery Mobile、Sencha Touch来开发跨平台移动客户端，还能非常方便地发布程序到不同移动平台上。

1.1.2PhoneGap的由来

2008年8月，PhoneGap在旧金山举办的iPhoneDevCamp上初次崭露头角。起名为PhoneGap是创始人的想法：“为跨越Web技术和iPhone之间的鸿沟牵线搭桥。”（Bridging the gap between the web and the iphone SDK.）而从Nitobi公司的博客上，我们可以看到这样的描述（2008年9月18日）：“它有点像为iPhone而开发的AIR。”（It’s like AIR for the iPhone.）

2009年2月25日，PhoneGap 0.6发布，这是第一个稳定版，支持iOS、Android和BlackBerry平台。

2009年8月到2010年7月，PhoneGap实现了对Windows Mobile、Palm、Symbian平台的支持，支持平台达到6个。

2011年10月4日，Adobe公司宣布收购创建了HTML5移动应用框架PhoneGap和PhoneGap Build的新创公司Nitobi Software。Adobe表示，收购PhoneGap后，开发者便可选择在PhoneGap平台使用HTML、CSS和JavaScript创建移动应用程序，也可选择使用Adobe Air和Flash。

随后，Adobe把PhoneGap项目捐给了Apache基金会，但保留了PhoneGap的商标所有权。

2011年7月29日，PhoneGap发布了1.0版产品，其中加入了不少访问本地设备的API。

2011年10月1日，PhoneGap发布了1.1版。新功能包括支持黑莓PlayBook的WebWorks并入，orientationchange事件和媒体审查等。

2011年11月7日，PhoneGap 1.2发布，开始正式支持Windows Phone 7，支持的平台数达到了7个。

2011年12月19日，PhoneGap团队与微软发布了1.3版，对iOS、Android与RIM进行了一些增强，同时还为Windows Phone 7提供了可用于产品的特性集，包括完整的API支持、更棒的Visual Studio模板、文档、指南、bug修复以及大量插件。

在成为Apache Incubator项目后，PhoneGap已经更名为Apache Callback。1.4版发布后，名字再次变更为Cordova。有趣的是，Cordova其实是PhoneGap团队附近一条街的名字，如图1-5所示。

由于最近PhoneGap名字变更比较频繁，很多读者常常弄不清各种名词的区别，特别是PhoneGap和Cordova。在这里我们可以来看看PhoneGap和Cordova的关系和区别。

Cordova是Adobe捐献给Apache的项目，是一个开源的、核心的跨平台模块。PhoneGap是Adobe的一项商业产品。

Cordova和PhoneGap的关系类似于WebKit与Chrome或者Safari的关系。

PhoneGap还包括一些额外的商用组件，例如PhoneGap Build和Adobe Shadow。

PhoneGap的更新速度非常快，短短几个月时间，在笔者写完这本书的时候，PhoneGap的最新版本已经是2.0了。

1.1.3PhoneGap现状

现在，PhoneGap发展非常迅猛，已经成为移动市场跨平台开发工具的领头羊。

国外知名调查分析机构Vision Mobile发布了2012跨平台开发工具报告，其中开发者市场占有率Top 10依次为PhoneGap、Sencha Touch/JQ Touch、Mono、Appcelerator、Adobe Flex、Unity 3 、Corona 、AppMobi、RunRev和Mosync，如图1-6所示。

在未来计划使用的跨平台工具列表中，PhoneGap一马当先，如图1-7所示。

除去一些桌面跨平台技术（例如Mono）和JavaScript UI框架（例如Sencha Touch和jQuery Mobile），我们可以看出，目前在移动跨平台开发技术领域，PhoneGap已经遥遥领先于竞争对手。

令人兴奋的是，PhoneGap现已完全支持Windows Phone 7所有的原生功能，其支持力度达到了iOS与Android的水平，而目前完整支持Windows Phone 7的移动跨平台工具寥寥无几。

总而言之，PhoneGap已经是一个非常成功而且成熟的移动跨平台解决方案，它具备相当丰富的第三方资源和成熟的产业链：开发者可以选择jQuery Mobile和Sencha Touch等JavaScript库加速开发进度，使用AppMobi和Tiggr等集成开发环境进行开发和调试（通过拖曳进行排版、在线编码以及运行各种移动设备的模拟器），也可以选择PhoneGap Build这个专业的在线编译工具，免去你准备各种编译环境的烦恼。

1.1.4PhoneGap的优缺点

想知道PhoneGap的优缺点，必须先对原生应用、Web应用和混合型应用这3个概念有所了解，下面我们简要介绍这3个概念。

原生应用。通过各种应用市场安装，采用平台特定语言开发。

Web应用。通过浏览器访问，采用Web技术开发。

混合型应用。通过各种应用市场安装，但采用Web技术开发。它虽然看上去是一个原生应用，但里面访问的实际上是一个Web应用。

原生应用指的是用平台特定的语言所开发的应用，比如iOS使用Objective-C语言，Android使用Java语言。使用它们的优点是可以完全利用系统的API和平台特性，它们在性能上也是最好的。缺点是由于开发技术不同，如果你要覆盖多个平台，则要针对每个平台独立开发。

原生应用因为位于平台层上方，向下访问和兼容的能力会比较好一些，可以支持在线和离线、消息推送和本地资源访问、摄像头和拨号功能的调取。但是由于设备的碎片化，应用的开发成本要高很多，维持多个版本的更新升级比较麻烦，用户的安装门槛也比较高。新浪微博的客户端就是原生应用，其界面如图1-8所示。

原生应用的优势如下：

提供最佳的用户体验、最优质的用户界面和最华丽的交互；
针对不同平台提供不同体验；

可节省带宽成本；

可访问本地资源；

盈利模式明朗。

原生应用的劣势如下：

移植到不同平台上比较麻烦；

维持多个版本的成本比较高；

需要通过store或market确认；

盈利需要与第三方分成。

Web应用则是完全用HTML、JavaScript和CSS等Web技术开发，通过移动设备的浏览器来访问，其优势在于开发跨平台的应用时，可以充分利用现代移动浏览器的HTML5特性。当然这些基于浏览器的应用无法调用系统API来实现一些高级功能，也不适合高性能要求的场合。

Web应用无需安装，对设备碎片化的适应能力优于原生应用，它只需要通过HTML、CSS和JavaScript就可以在任意移动浏览器中执行。随着iPhone带来的WebKit浏览体验的升级，专为iPhone等由WebKit浏览内核的移动设备开发的Web应用也有了如原生应用一般流畅的用户体验。百度地图的移动网页版本就是Web应用，其界面如图1-9所示。

Web应用的优势如下：

开发成本低；

适配多种移动设备的成本低；
跨平台和终端；

迭代更新容易；

无需安装成本。

Web应用的劣势如下：

浏览体验短期内还无法超越原生应用；

不支持离线模式（HTML5将会解决这个问题）；

消息推送不够及时；

调用本地文件系统的能力弱。

有办法可以融合两者的优势吗？

从长远来看，Web技术是未来，虽然现阶段原生应用给了用户更好的体验，但如果现在的开发者不有效利用Web技术，那他一定会落伍。不过，如果过分依赖Web，完全不用原生功能的话，那应用的用户体验和提供的功能将大打折扣。

混合型应用可以说是为了弥补上面两种应用开发模式的缺陷而生，它是两者混合的产物，并且尽可能继承了双方的优势。首先，它可以让众多Web开发人员几乎零成本地转型成移动应用开发者。其次，相同的代码只需针对不同平台进行编译就能实现在多平台的分发，大大提高了多平台开发的效率。而相较于Web应用，开发者可以通过包装好的接口调用大部分常用的系统API。

不过有一点我们必须清楚地认识到，混合型应用还不能完全取代原生应用，在一些复杂的API调用或者涉及高性能计算的应用开发上，原生应用还是唯一的选择。除此以外的大多数场合下，混合型应用以很小的性能牺牲为代价，带来了极大的灵活性和开发效率，有什么理由不去使用它呢？掌上百度就是混合型应用，其界面如图1-10所示。

PhoneGap正是混合型框架中的佼佼者，它基于标准的Web技术——HTML、JavaScript和CSS，用JavaScript包装平台的API供开发者调用，具备强大的编译工具来为不同平台生成应用，同时拥有丰富的第三方资源和产业链。

PhoneGap在Web应用和设备之间搭建了一个通信的桥梁，封装了移动设备的平台差异，统一使用JavaScript接口访问设备本地API，以此提供了一个优秀的跨平台解决方案。

结合前面对于PhoneGap的说明，我们得出PhoneGap的优势如下：

开发成本低；

对各大主流平台的兼容性非常好；

采用W3C标准化技术；

能够快速进行开发，迭代更新容易；

轻量级和插件式架构显著降低了维护成本；

开源免费，并由Adobe公司和Apache基金会共同支持。 PhoneGap也有如下一些缺点：

浏览体验短期内还无法超越原生应用；

特别复杂的应用运行速度稍显缓慢；

在某些JavaScript渲染速度较慢的设备上，UI反应略有延时。

当然，跨平台的流行是不可避免的，这些劣势一定会随着移动技术和Web标准的迅猛发展而渐渐消失。

目前，PhoneGap已经有了相当多的成功案例，例如著名的维基百科移动客户端和NFB Films，而中国目前也已经涌现出了一批PhoneGap应用，例如赶集团购的移动客户端。

1.1.5PhoneGap API简介

PhoneGap提供了丰富的API来帮助移动应用开发者方便地获取移动设备的信息。

打开PhoneGap官方网站的API文档（http://docs.phonegap.com/en/1.5.0/index.html），我们可以看到目前PhoneGap拥有如下移动设备本地API。

Accelerometer。加速计，也就是我们常说的重力感应功能。

Camera。用于访问前置摄像头和后置摄像头。

Capture。提供了对于移动设备音频、图像和视频捕获功能的支持。

Compass。对于罗盘的访问，由此可以获取移动设备行动的方向。

Connection。能够快速检查并提供移动设备的各种网络信息。

Contacts。能够获取移动设备通讯录的信息。

Device。能够获取移动设备的硬件和操作系统信息。

Events。能够为应用提供各种移动设备操作事件，例如暂停、离线、按下返回键、按下音量键等。

File。能够访问移动设备的本地文件系统。

Geolocation。能够获取移动设备的地理位置信息。

Media。提供了对于移动设备上音频文件的录制和回放功能。

Notification。提供了本地化的通知机制，包括提示、声音和振动。

Storage。提供了对于SQLite嵌入式数据库的支持。

关于API的具体用法，我们将在后面为读者详细讲述。这里不妨先看看PhoneGap是如何工作的。

PhoneGap架构拥有强大的跨平台访问能力，但是其工作原理并不神秘，下面以iPhone和Android平台为例进行分析。

iPhone和Android平台的共同点是都有内置的WebView组件，它具备两个特性。

WebView组件实质是移动设备的内置浏览器。这个特性是Web能被打包成本地客户端的基础，可方便地用HTML5和CSS3页面布局，这是移动Web技术相对于原生开发的优势。
WebView提供Web和设备本地API双向通信的能力。PhoneGap针对不同平台的WebView做了扩展和封装，使WebView这个组件变成可访问设备本地API的强大浏览器，所以开发人员在PhoneGap框架下可通过JavaScript访问设备本地API。

明白了以上两个特性，我们便可以知道一个成熟地使用PhoneGap技术的应用的运行状况，具体如图1-11所示。