phonegap - baidu

27
1 2 3 4 5 17 6 7 8 9 10 11 12 13 14 15 16 1 随着智能移动设备的快速普及以及Web技术(特别是HTML5技术)的飞速发展,Web开发人 员将不可避免地碰到这一问题:怎样在移动设备上将HTML5应用程序作为本地程序运行? 与台式机不同的是,智能移动设备完全是移动应用的天下,那么Web开发人员如何利用自己 熟悉的技术(例如Objective-C语言)来进行移动应用开发,而不用花费大量的时间来学习新技术 呢?在手机浏览器上,用户必须通过打开超链接来访问HTML5应用程序,而不能像访问本地应 用程序那样,仅仅通过点击一个图标就能得到想要的结果,尤其是当移动设备脱机以后,用户几 乎无法访问HTML5应用程序。 2008年夏天, PhoneGap技术面世。从此,开发移动应用时我们有了一项新的选择,它可以说 Web开发人员的最佳选择。PhoneGap是基于Web开发人员所熟悉的HTMLCSSJavaScript术,创建跨平台移动应用程序的快速开发平台。 本章将简单介绍PhoneGap技术、HTML5技术以及与PhoneGap相关的其他技术。 1.1 PhoneGap 概述 提起移动操作系统的发展历程,可谓跌宕起伏。从最早的Linux到后来一家独大的Symbian1

Upload: others

Post on 01-May-2022

17 views

Category:

Documents


0 download

TRANSCRIPT

Page 1: PhoneGap - Baidu

1.1 PhoneGap 概述 1

1

2

3

4

5

17

6

7

8

9

10

11

12

13

14

15

16

1

概 述

随着智能移动设备的快速普及以及Web技术(特别是HTML5技术)的飞速发展,Web开发人

员将不可避免地碰到这一问题:怎样在移动设备上将HTML5应用程序作为本地程序运行?

与台式机不同的是,智能移动设备完全是移动应用的天下,那么Web开发人员如何利用自己

熟悉的技术(例如Objective-C语言)来进行移动应用开发,而不用花费大量的时间来学习新技术

呢?在手机浏览器上,用户必须通过打开超链接来访问HTML5应用程序,而不能像访问本地应

用程序那样,仅仅通过点击一个图标就能得到想要的结果,尤其是当移动设备脱机以后,用户几

乎无法访问HTML5应用程序。

2008年夏天,PhoneGap技术面世。从此,开发移动应用时我们有了一项新的选择,它可以说

是Web开发人员的最佳选择。PhoneGap是基于Web开发人员所熟悉的HTML、CSS和JavaScript技

术,创建跨平台移动应用程序的快速开发平台。

本章将简单介绍PhoneGap技术、HTML5技术以及与PhoneGap相关的其他技术。

1.1 PhoneGap 概述

提起移动操作系统的发展历程,可谓跌宕起伏。从最早的Linux到后来一家独大的Symbian,

第 1 章

Page 2: PhoneGap - Baidu

2 第 1 章 概述

再到如今风光无限的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年下半年智能手机操作系统的竞争格局

和走势。

Page 3: PhoneGap - Baidu

1.1 PhoneGap 概述 3

1

2

3

4

5

17

6

7

8

9

10

11

12

13

14

15

16

图1-1 智能手机操作系统竞争格局和走势①

可以认为,当前移动应用市场已经初步形成了iOS、Android和Windows Phone三大阵营,当

然其余的传统阵营(Symbian和RIM等)凭借历史原因和庞大的用户基数也不容小觑。

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

目前,Android应用是基于Java语言进行开发的,苹果公司的iOS应用是基于Objective-C语言

开发的,微软公司的Windows Phone应用则是基于C#语言开发的。如果开发者编写的应用要同时

在不同的移动设备上运行的话,则必须掌握多种开发语言,但这必将严重影响软件开发进度和项

目上线时间,并且已经成为开发团队的一大难题。

为了进一步简化移动应用开发,很多公司已经推出了相应的解决方案。Adobe推出的AIR

——————————

① 图片数据来自http://www.ttm.com.cn。

Page 4: PhoneGap - Baidu

4 第 1 章 概述

Mobile技术,能使Flash开发的应用同时发布到iOS、Android和黑莓的Playbook上。Appcelerator公

司推出的Titanium平台能直接将Web应用编译为本地应用运行在iOS和Android系统上。而Nitobi公

司(现已被Adobe公司收购)也推出了一套基于Web技术的开源移动应用解决方案——PhoneGap。

1.1.1 PhoneGap 是什么

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,需

要为每个平台分别编译不同的应用程序。

Page 5: PhoneGap - Baidu

1.1 PhoneGap 概述 5

1

2

3

4

5

17

6

7

8

9

10

11

12

13

14

15

16

图1-2 PhoneGap支持的各种移动平台

当然,你也可以使用PhoneGap的在线编译云服务PhoneGap Build,可免去需要准备各种编译

环境的烦恼,如图1-3所示。

图1-3 PhoneGap Build云服务

利用PhoneGap Build,可以在线打包Web应用成客户端并发布到各移动应用市场。图1-4是

PhoneGap Build在线打包完成并且提供下载的界面。

Page 6: PhoneGap - Baidu

6 第 1 章 概述

图1-4 PhoneGap Build界面

有了PhoneGap和PhoneGap Build,Web开发人员便可以利用他们非常熟悉的JavaScript、HTML

和CSS技术,或者结合移动Web UI框架jQuery Mobile、Sencha Touch来开发跨平台移动客户端,

还能非常方便地发布程序到不同移动平台上。

1.1.2 PhoneGap 的由来

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.)

注意 当时Adobe推出的AIR桌面技术能够使Web开发人员用JavaScript、HTML和CSS开发传统

桌面应用程序。

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

2009年8月到2010年7月,PhoneGap实现了对Windows Mobile、Palm、Symbian平台的支持,

Page 7: PhoneGap - Baidu

1.1 PhoneGap 概述 7

1

2

3

4

5

17

6

7

8

9

10

11

12

13

14

15

16

支持平台达到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所示。

Page 8: PhoneGap - Baidu

8 第 1 章 概述

图1-5 Cordova是附近一条街的名字

由于最近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.3 PhoneGap 现状

Page 9: PhoneGap - Baidu

1.1 PhoneGap 概述 9

1

2

3

4

5

17

6

7

8

9

10

11

12

13

14

15

16

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

国外知名调查分析机构Vision Mobile发布了2012跨平台开发工具报告,其中开发者市场占有

率Top 10依次为PhoneGap、Sencha Touch/JQ Touch、Mono、Appcelerator、Adobe Flex、Unity 3 、

Corona 、AppMobi、RunRev和Mosync,如图1-6所示。

图1-6 跨平台开发工具市场占有率①

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

——————————

① 图片来自http://www.crossplatformtools.com。

Page 10: PhoneGap - Baidu

10 第 1 章 概述

图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.4 PhoneGap 的优缺点

——————————

① 图片来自http://www.crossplatformtools.com。

Page 11: PhoneGap - Baidu

1.1 PhoneGap 概述 11

1

2

3

4

5

17

6

7

8

9

10

11

12

13

14

15

16

想知道PhoneGap的优缺点,必须先对原生应用、Web应用和混合型应用这3个概念有所了解,

下面我们简要介绍这3个概念。

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

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

混合型应用。通过各种应用市场安装,但采用Web技术开发。它虽然看上去是一个原生应用,

但里面访问的实际上是一个Web应用。

原生应用指的是用平台特定的语言所开发的应用,比如iOS使用Objective-C语言,Android使

用Java语言。使用它们的优点是可以完全利用系统的API和平台特性,它们在性能上也是最好的。

缺点是由于开发技术不同,如果你要覆盖多个平台,则要针对每个平台独立开发。

原生应用因为位于平台层上方,向下访问和兼容的能力会比较好一些,可以支持在线和离线、

消息推送和本地资源访问、摄像头和拨号功能的调取。但是由于设备的碎片化,应用的开发成本

要高很多,维持多个版本的更新升级比较麻烦,用户的安装门槛也比较高。新浪微博的客户端就

是原生应用,其界面如图1-8所示。

Page 12: PhoneGap - Baidu

12 第 1 章 概述

图1-8 原生应用示例:新浪微博客户端

原生应用的优势如下:

提供最佳的用户体验、最优质的用户界面和最华丽的交互;

针对不同平台提供不同体验;

可节省带宽成本;

可访问本地资源;

盈利模式明朗。

原生应用的劣势如下:

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

维持多个版本的成本比较高;

需要通过store或market确认;

Page 13: PhoneGap - Baidu

1.1 PhoneGap 概述 13

1

2

3

4

5

17

6

7

8

9

10

11

12

13

14

15

16

盈利需要与第三方分成。

Web应用则是完全用HTML、JavaScript和CSS等Web技术开发,通过移动设备的浏览器来访

问,其优势在于开发跨平台的应用时,可以充分利用现代移动浏览器的HTML5特性。当然这些

基于浏览器的应用无法调用系统API来实现一些高级功能,也不适合高性能要求的场合。

Web应用无需安装,对设备碎片化的适应能力优于原生应用,它只需要通过HTML、CSS和

JavaScript就可以在任意移动浏览器中执行。随着iPhone带来的WebKit浏览体验的升级,专为

iPhone等由WebKit浏览内核的移动设备开发的Web应用也有了如原生应用一般流畅的用户体验。

百度地图的移动网页版本就是Web应用,其界面如图1-9所示。

图1-9 Web应用示例:百度地图的移动网页版本

Page 14: PhoneGap - Baidu

14 第 1 章 概述

Web应用的优势如下:

开发成本低;

适配多种移动设备的成本低;

跨平台和终端;

迭代更新容易;

无需安装成本。

Web应用的劣势如下:

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

不支持离线模式(HTML5将会解决这个问题);

消息推送不够及时;

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

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

从长远来看,Web技术是未来,虽然现阶段原生应用给了用户更好的体验,但如果现在的开

发者不有效利用Web技术,那他一定会落伍。不过,如果过分依赖Web,完全不用原生功能的话,

那应用的用户体验和提供的功能将大打折扣。

混合型应用可以说是为了弥补上面两种应用开发模式的缺陷而生,它是两者混合的产物,并

且尽可能继承了双方的优势。首先,它可以让众多Web开发人员几乎零成本地转型成移动应用开

发者。其次,相同的代码只需针对不同平台进行编译就能实现在多平台的分发,大大提高了多平

Page 15: PhoneGap - Baidu

1.1 PhoneGap 概述 15

1

2

3

4

5

17

6

7

8

9

10

11

12

13

14

15

16

台开发的效率。而相较于Web应用,开发者可以通过包装好的接口调用大部分常用的系统API。

不过有一点我们必须清楚地认识到,混合型应用还不能完全取代原生应用,在一些复杂的

API调用或者涉及高性能计算的应用开发上,原生应用还是唯一的选择。除此以外的大多数场合

下,混合型应用以很小的性能牺牲为代价,带来了极大的灵活性和开发效率,有什么理由不去使

用它呢?掌上百度就是混合型应用,其界面如图1-10所示。

PhoneGap正是混合型框架中的佼佼者,它基于标准的Web技术——HTML、JavaScript和CSS,

用JavaScript包装平台的API供开发者调用,具备强大的编译工具来为不同平台生成应用,同时拥

有丰富的第三方资源和产业链。

PhoneGap在Web应用和设备之间搭建了一个通信的桥梁,封装了移动设备的平台差异,统一

使用JavaScript接口访问设备本地API,以此提供了一个优秀的跨平台解决方案。

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

开发成本低;

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

采用W3C标准化技术;

能够快速进行开发,迭代更新容易;

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

开源免费,并由Adobe公司和Apache基金会共同支持。

PhoneGap也有如下一些缺点:

Page 16: PhoneGap - Baidu

16 第 1 章 概述

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

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

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

图1-10 混合型应用示例:掌上百度

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

渐渐消失。

目前,PhoneGap已经有了相当多的成功案例,例如著名的维基百科移动客户端和NFB Films,

而中国目前也已经涌现出了一批PhoneGap应用,例如赶集团购的移动客户端。

1.1.5 PhoneGap API 简介

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

Page 17: PhoneGap - Baidu

1.1 PhoneGap 概述 17

1

2

3

4

5

17

6

7

8

9

10

11

12

13

14

15

16

打开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和

Page 18: PhoneGap - Baidu

18 第 1 章 概述

Android平台为例进行分析。

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

WebView组件实质是移动设备的内置浏览器。这个特性是Web能被打包成本地客户端的基

础,可方便地用HTML5和CSS3页面布局,这是移动Web技术相对于原生开发的优势。

WebView提供Web和设备本地API双向通信的能力。PhoneGap针对不同平台的WebView做了

扩展和封装,使WebView这个组件变成可访问设备本地API的强大浏览器,所以开发人员

在PhoneGap框架下可通过JavaScript访问设备本地API。

明白了以上两个特性,我们便可以知道一个成熟地使用PhoneGap技术的应用的运行状况,具

体如图1-11所示。

图1-11 PhoneGap与移动设备本地API通信图①

——————————

① 图片来自http://www.phonegap.com。

Page 19: PhoneGap - Baidu

1.2 HTML5 简介 19

1

2

3

4

5

17

6

7

8

9

10

11

12

13

14

15

16

1.2 HTML5 简介

PhoneGap技术可以说跟HTML5技术紧密相关,因为PhoneGap应用的核心组成部分之一就是

HTML5网页。本节中,我们将从HTML5发展史和HTML5的新功能这两个方面出发,来简单介绍

HTML5技术。

1.2.1 HTML5 发展史

HTML的历史可以追溯到很久以前。1993年,HTML首次以因特网草案的形式发布。20世纪

90年代的人见证了HTML的大幅发展,从2.0版,到3.2版和4.0版,再到1999年的4.01版。随着HTML

的发展,W3C(万维网联盟)掌握了对HTML规范的控制权。

然而,在快速发布了这4个版本之后,业界普遍认为HTML已经到了穷途末路,对Web标准的

焦点也开始转移到了XML和XHTML上,HTML被放在了次要位置。不过在此期间,HTML体现

了顽强的生命力,主要的网站内容还是基于HTML的。为了能支持新的Web应用,同时克服现有

的缺点,HTML迫切需要添加新功能,制定新规范。

为了将Web平台提升到一个新的高度,一小组人在2004年成立了WHATWG(Web Hypertext

Application Technology Working Group,Web超文本应用技术工作组)。他们创立了HTML5规范,

同时开始专门针对Web应用开发新功能——这被WHATWG认为是HTML中最薄弱的环节。Web 2.0

这个新词正是在那个时候被发明的。Web 2.0实至名归,开创了Web的第二个时代。旧的静态网站

逐渐让位于需要更多特性的动态网站和社交网站——这其中的新功能真的是数不胜数。

2006年,W3C又重新介入HTML,并于2008年发布了HTML5的工作草案。2009年,XHTML 2

Page 20: PhoneGap - Baidu

20 第 1 章 概述

工作组停止工作。又过了一年,因为HTML5能解决非常实际的问题(随后可以看到),所以在规

范还未定稿的情况下,各大浏览器厂家就已经按捺不住了,开始对旗下产品进行升级以支持

HTML5的新功能。这样,得益于浏览器的实验性反馈,HTML5规范也得到了持续完善,HTML5

以这种方式迅速融入到对Web平台的实质性改进中。

目前,HTML5还处于W3C草案阶段。而2022年将推出的计划推荐版,则意味着至少会有两

个浏览器会完全支持HTML5的所有特性。2022年听起来似乎很遥远,但通过观察现阶段Chrome、

Firefox、Safari和IE等浏览器对HTML5的支持程度,我们可以看出各大浏览器厂商都非常积极。

应该不需要到2022年,就会有至少两个浏览器完全支持HTML5。

1.2.2 HTML5 的新功能

总的来说,HTML5在以下几个方面有所改进。

增强HTML表单功能,引入更多灵活的段落标签和新功能标签。

用户交互性增强,增加了details、datagrid、menu和command等属性。

引入<canvas>标签,并支持直接用脚本绘图。

使用沙盒机制,隔离潜在的威胁。可有效防止访问父页面DOM、读写Cookie、本地存储数

据库等。

内建3D技术支持,无需插件即可将网页3D化,还规定了一套适合网页使用的3D图形接口界

面,支持脚本化运行。

引入更多创建Web应用的API,如文件拖放、视频播放、音频播放和离线Web应用等。

Page 21: PhoneGap - Baidu

1.3 相关技术 21

1

2

3

4

5

17

6

7

8

9

10

11

12

13

14

15

16

1.3 相关技术

接下来,我们将对PhoneGap的相关技术进行简单介绍,包括PhoneGap在移动领域的主要竞

争对手(如Titanium以及Adobe AIR等)。另外,我们还将介绍在一些PhoneGap应用中经常会用到

的著名的JavaScript移动UI框架。

1.3.1 Titanium

Titanium是Appcelerator公司旗下的跨平台开源框架。现在,iTunes应用商店中的五十多万个

应用中,很多都是基于Titanium开发的。

Titanium可以用来创建富Web应用和桌面应用程序。不仅如此,现在它还允许你使用HTML、

CSS、JavaScript、Ruby和Python等创建移动应用,并且创建的应用能运行在iPhone和Android平台

上。Titanium独特的跨平台编译技术能将Web应用直接转换为各种平台中原生的应用程序。

这个框架最成功的案例是NBC Universal的iPad应用,这个应用可以让用户观看NBC节目、玩

游戏等。应用的开发者这么称赞Titanium:“ 这个应用是由一个JavaScript开发者在三个月内写成

的,而之前尝试用Objective-C开发这个应用时,花了四个人六个月时间,很贵,完全是一场灾难。”

Titanium的特性如下所示。

支持Linux、Mac OS、Windows、Android和iPhone平台。

支持Adobe Flash、Microsoft Silverlight或其他第三方的Ajax库。

支持Module API用于扩展核心的Titanium平台。

支持使用Ruby和Python编写应用程序的脚本。

Page 22: PhoneGap - Baidu

22 第 1 章 概述

支持C++、JavaScript、Ruby和Python之间的无缝操作。

Titanium的收费方式,主要是出售额外的扩充模块Titanium+Plus,里面包含了像BarCode的条

码扫描功能、Apple的In-App Purchase服务、PayPal付费功能。

与之相比,PhoneGap也提供了丰富的插件来实现这些功能,其优势在于这些插件都是开源的。

1.3.2 Adobe AIR

这里是Adobe官方网站对于AIR的介绍:

Adobe AIR运行时使开发人员能使用HTML、JavaScript、Adobe Flash Professional软件和

ActionScript构建Web应用程序,这些应用程序可以作为独立的客户端应用程序运行并且不受浏览

器的约束。Adobe AIR作为Flash Platform的一个关键组件,为跨设备和平台交付应用程序提供了

一个一致、灵活的开发环境,使设计人员和开发人员能完全释放自己的创意。现在提供Android、

BlackBerry、Tablet OS和iOS移动操作系统及电视支持。

MixMatchMusic首席执行官兼共同创始人、MobBase移动应用程序服务开发人员Charles Feinn

这样评价Adobe AIR:

借助Adobe AIR,我们将相同的代码用于桌面、平板电脑和智能手机,这不仅为我们节省了

时间和资金,还提供了部署效率。随后,我们可以快速、有效地通过Adobe的应用程序分发服务

Adobe InMarket分发这些应用程序。

Emantras公司的首席执行官Sesh Kumar也给Adobe AIR不错的评价:

使用Adobe AIR和Flash Platform创建应用程序的投资回报和资源节省真正扭转了形势。AIR

Page 23: PhoneGap - Baidu

1.3 相关技术 23

1

2

3

4

5

17

6

7

8

9

10

11

12

13

14

15

16

是唯一可用的解决方案,它让你通过重用代码瞄准智能手机、平板电脑、台式机和电视。AIR通

过多种设备提供电子教学内容的能力令几乎所有人都能学习。

目前,各个领域已经涌现出了许多优秀的使用Adobe AIR技术开发的客户端软件,例如著名

的Twitter桌面客户端TweetDeck。

Adobe AIR诞生数年来,已经从1.0版本升级至如今的3.5版本,产品日趋成熟,其跨平台理念

也从电脑桌面扩展到了移动平台。不过Adobe AIR目前支持的移动平台数量不是很多,仅支持

Android、iOS和黑莓Playbook系统。

笔者认为,在复杂游戏和三维游戏方面,Adobe AIR是首选方案;不过若是仅仅开发不是很

复杂的应用或者游戏,就不如PhoneGap方便了。

1.3.3 Corona

Corona是基于著名的游戏脚本语言Lua的SDK库,有了Corona SDK,Lua语言就可以运行在

iOS和Android平台上了。下面简要介绍一下Corona的优缺点。

Corona SDK的优点如下所示。

稳定。

支持硬件加速、GPS、指南针及照相机等。

支持与Map、Facebook、OpenFient、GameCenter的集成。

内建的物理集成。

Lua语言比较容易学习。

Page 24: PhoneGap - Baidu

24 第 1 章 概述

不错的社区支持。

除了上面介绍的优点外,Corona SDK当然也有一些不太好的地方,具体如下所示。

只支持iOS和Android。

Lua语言不是面向对象的。

每年都要交授权费。

Android支持还有太多问题。

没法自己集成Corona SDK不支持的第三方SDK。

编译项目的时候需要把代码上传到Corona服务器上去编译,而不能在本地直接编译。

无法扩展Corona的功能,而官方的更新速度又太慢。

物理模块还有一些缺陷。

1.3.4 AppMobi

移动开发公司AppMobi推出了全新开发工具XDK,这个工具使得开发者可以使用HTML5构

建网络和移动平台的应用程序。最终代码既可以用来进行HTML5应用程序开发,就如同现在在

Chrome网络应用程序商店里看到的那些程序一样,也可以用于多平台应用程序开发,最终提交

到苹果或Android的应用程序商店。XDK本身属于网络应用程序,可以在Chrome网络应用程序商

店免费下载。

用户只要会HTML5、CSS3或JavaScript代码,而不需要学习Objective-C或下载其他的软件开

发工具包,就可以使用XDK编写程序。XDK让用户可以使用行业标准来构建应用程序,同时提

Page 25: PhoneGap - Baidu

1.3 相关技术 25

1

2

3

4

5

17

6

7

8

9

10

11

12

13

14

15

16

供了AppMobi自有的JavaScript库,其中包含类似转换滤镜和滚动条等内容。

此外,XDK还提供了调试工具,可以进行屏幕仿真调试、设备实际调试和遥控调试,但不包

括ad-hoc模式和安全特性。程序可以在Mac和Windows上运行。

目前,这一开发工具还不太成熟,我们可以关注其将来的发展态势。

1.3.5 JavaScript 移动 UI 框架介绍

在移动Web开发的总体架构中,PhoneGap处于移动Web UI框架和移动设备操作系统

(Android、iOS、BlackBerry、Symbian、webOS等)之间,因此它也可以称为移动应用中间件。

目前,最常用的移动Web UI框架大概有如下几种。

1. jQuery Mobile

jQuery Mobile是目前Web开发者用得最多的JavaScript框架,它是jQuery在手机上和平板设备

上的版本。jQuery Mobile不仅会给主流移动平台带来jQuery核心库,而且会发布一个完整统一的

jQuery移动UI框架。

Adobe为 jQuery Mobile的诞生贡献了很多力量,而且 Dreamweaver 也集成了该框架和

PhoneGap,从而使这个组合成为前端开发人员最易入手的移动应用开发平台。

jQuery Mobile支持很多平台,包括iOS、Android、Windows Phone、BlackBerry和Symbian等。

2. Sencha Touch

前不久,基于JavaScript编写的Ajax框架Ext JS,将现有的Ext JS整合jQTouch和Raphal库,推

出了适用于移动应用开发的Sencha Touch框架,该框架是世界上第一个基于HTML5的移动应用框

架。同时,Ext JS更名为Sencha,jQTouch的创始人David Kaneda以及Raphal的创始人也已加盟

Page 26: PhoneGap - Baidu

26 第 1 章 概述

Sencha团队。

Sencha Touch支持的平台相对不多,但是功能强大,可以简单看成Ext在移动设备上的移植版

本,熟悉Ext框架的Web开发人员用起来会非常顺手。Sencha Touch具有丰富的组件支持和华丽的

页面效果,但是在开发过程中需要考虑性能问题。

3. Dojo Mobile

Dojo Mobile框架是一套移动终端的Web应用开发框架,是Dojo的一个子项目,具有轻量级、

模块化、速度快及封装性好的特点。Dojo Mobile主要面向手持设备上的Web富客服端应用开发,

提供了iPhone和Android两套主题,使得基于iPhone或者Android的Web应用具有手机本地应用的外

观和效果,而同时也给了开发者更多的主导权。

Dojo Mobile开发框架有这么几个特点:

轻量级。Dojo Mobile框架在压缩之后仅有100KB,在同类JavaScript框架中算是体积相当小

的,十分合适移动设备。

大量使用HTML5和CSS3实现iPhone和Android本地程序的特效,动画效果流畅。

跨浏览器平台,Dojo Mobile同时也支持非WebKit内核的手机浏览器,使用Dojo自带的

dojo.animateProperty与dojox.gfx模拟特效。

Dojo Mobile对于iOS和Android主题的封装性好,开发者只需使用统一的布局和CSS即可实现

不同平台的本地效果。

相对于jQuery Mobile在互联网领域的风生水起,很多从事企业级应用开发的公司比较喜欢使

Page 27: PhoneGap - Baidu

1.4 小结 27

1

2

3

4

5

17

6

7

8

9

10

11

12

13

14

15

16

用Dojo进行前端开发,比如IBM的很多企业级产品和SpringSource的WebFlow等。

4. XUI

XUI是类似于jQuery的一个JavaScript库,与Sencha Touch或者jQuery Mobile那样试图构建一

个通用的解决方案不同,XUI是一个用于移动Web应用的轻量、极简、高度模块化的框架。

它非常轻量的原因是,它只支持移动浏览器,所有跨浏览器支持的代码都被剥离。它面向大

多数主流移动Web浏览器,如WebKit、IE Mobile以及黑莓浏览器。

XUI是在2008年随PhoneGap产生的。

关于这些常用的JavaScript移动框架的用法,我们将在后面做出详细介绍。

1.4 小结

本章先从多个方面对PhoneGap这一热门技术进行了概述,例如PhoneGap的由来、现状、优

缺点以及API,接着探讨了跟PhoneGap紧密相关的HTML5技术的发展史和新功能,最后简单介绍

了一些别的移动跨平台相关技术和JavaScript移动UI框架。

在后面的章节中,我们将对这些技术进行更深入、更详细的讲解。下一章我们先学习如何快

速搭建一个简单的PhoneGap应用。