跨平台移动应用开发框架(PhoneGap)

在多厂商的利益竞争下，当前的智能终端平台呈现出了“百家争鸣”的现象。从图1中的统计数据可以看出，当前的移动终端系统呈现出较为零散的割据状态，其中，Nokia主推的Symbian、Apple的iOS和Google的Android，分别占据了较大的市场份额。然而，由于当前主流的移动平台之间互不兼容，针对不同的移动平台系统，当前并没有可以兼容的应用开发接口和语言;当前，使用C/C++的Symbian、使用Object C的iOS和使用Java的Android应用开发技术,几乎是完全无法融合的。

　　图 1.近两年移动平台市场占有率的统计数据

　　

 

　　不难发现，这种开发技术的不兼容性，将直接为移动平台应用的发展带来重大的阻碍。从应用开发的角度来说，同样的程序逻辑却不得不在多个平台上使用不同的语言和API重复编码;从代码维护的角度来说，针对同一个项目需要同时维护多份代码，一旦程序逻辑发生变化，将导致大规模的代码修改与回归测试;另外，从经济角度来说，要同时开发和维护多个平台的应用程序，将花费企业巨大的人力和时间成本。

　　主流跨平台移动应用开发框架的比较

　　为了解决上述问题，跨平台的移动应用开发技术逐渐地引起了开发者的关注。不难看出，面向不同的终端平台和开发语言，要实现应用开发的兼容性，其实只有两条可行之路：其一是采用不同平台都认可的标准技术，其二是采用已被成熟使用的现有技术。然而无论采用哪一种方式，当前跨平台应用开发所缺少的，都是作为平台底层API与通用开发技术中间件的跨平台移动应用开发框架。

　　随着人们对跨平台应用开发研究的不断深入，当前市场上已出现了若干致力于跨平台开发的产品级框架。其中，PhoneGap、Titanium和Rhodes便是当下发展较为成熟的三款开发框架。为了更好地了解当前的跨平台开发框架技术，本文对其三者从如下几个方面进行了对比：

　　目标

　　上述三款框架产品都将目标明确地定位为“一次开发，运行于任何移动终端平台。”这就意味着其必须跨越平台特性和编程语言的界限，可以与任何平台的SDK API进行无差别的交互。

　　支撑平台

　　Titanium框架目前只支持Android和iPhone平台，而PhoneGap和Rhodes则均声称支持当前大多数的主流平台，图2描述的是PhoneGap开发框架当前的兼容平台。

　　

 

　　编程语言

　　PhoneGap和Titanium框架均采用了HTML + CSS + JavaScript作为其编程语言，同时对HTML5和CSS3提供了相应的支持;而Rhodes则使用Ruby + Rails作为其编程基础，使用Ruby来实现移动应用的逻辑。不难发现，上述三者都选择了成熟的脚本和Web技术作为实现平台兼容的入手点，正如前文所述，这也是目前实现跨平台开发的唯一可行之路。

　　实现原理

　　在三者之中，PhoneGap和Titanium框架的实现原理较为相似，编程人员通过使用CSS和HTML来设计程序UI并控制程序的逻辑;同时，使用JavaScript来调用API与对应平台的SDK进行交互，以启动手机的GPS、震动、重力感应等功能。使用PhoneGap和Titanium编写的程序会被打包并安装到手机上，在应用运行时载入到手机的浏览器控件中解析执行。而Rhodes则依赖于Ruby + Rails的Web框架，在手机内部构建了一个完整的Web App server环境，使用Rhodes开发的应用可以像传统Web服务器一样，接收并处理用户的操作事件，并访问对应平台的SDK API。

　　开源/商业化

　　在上述三种框架中，只有PhoneGap是纯粹的开源产品，Titanium目前还处于其产品化的Beta阶段，其正式版本将作为商业化的框架产品而发布，Rhodes的发展较上述两者则相对成熟一些，它也是商业化的框架产品。

　　其他A

　　PhoneGap和Titanium有很多相似之处，但相比PhoneGap，Titanium除了提供与SDK相对应的功能API外，还对相应平台UI API提供了一定的支持。因而，使用Titanium可以开发出更加接近于本地应用的用户体验，但也正因为如此，Titanium对平台的兼容性不及PhoneGap的发展现状。

　　其他B

　　Rhodes得益于成熟的Ruby/Rails技术及其在移动平台内部构建的相对完整的Web App环境，Rhodes框架天生具备了更好的Rest Web services的能力，可以方便地与后端服务器进行交互;但是，这种基于Web App的方式来访问平台SDK API的能力也有一定的局限性，如不能良好的支持音频和视频的播放等。

　　另外值得一提的是，跨平台的移动应用开发框架均着眼于解决不同平台之间应用开发的兼容性问题，因而讨论某一框架的优劣，不应拿诸如使用该框架是否能开发出3D游戏这样的标准来对其进行考量。通过上文的比较，笔者认为开源框架PhoneGap的优势更为均衡，具有更好的发展前景。因而，下文将针对PhoneGap框架进行详细的介绍，并通过实例来讲解如何使用PhoneGap框架为Android平台开发简单的应用。

　　PhoneGap框架简介

　　从概念上说，PhoneGap是一款完全开源的跨平台移动应用开发框架。通过使用PhoneGap框架，开发人员可以采用传统的Web开发技术(HTML + CSS + JavaScript)来实现待开发应用的UI和程序逻辑。

　　在开发的过程中，PhoneGap框架提供了一系列的API供开发人员在JavaScript代码中调用;通过这些API调用，PhoneGap程序就可以与相应移动平台的SDK API进行交互，以调用运行平台本地的功能。

　　在运行时，使用Web技术编写的资源文件(html/css/js)会被打包为类似“镜像文件”的形成发布到待运行平台之中，在运行时由浏览器解析执行，从而实现了一次开发，跨多平台运行的目的。当前，PhoneGap已经对几乎所有的主流移动平台提供了支持，不过如图 3所示，受到来自技术和商业竞争的影响，PhoneGap在每个平台上都有若干的功能点无法覆盖，有待于进一步完善。

　　图 3. PhoneGap框架对当前主流移动平台的支持细节

　　

 

　　PhoneGap开发实践

　　使用PhoneGap Build创建应用

　　本节介绍的是一种相对简单的使用PhoneGap开发跨平台应用的方法。在PhoneGap的官方网站中，提供了一个叫做PhoneGap Build的Web应用，在PhoneGap Build的页面中，用户可以将使用Web技术(html/javascript/css)开发好的应用上传，PhoneGap Build会为其支持的平台各自打包一份可安装的应用程序，开发人员可以选择所需的平台，导出相应的应用程序。

　　在本节中，我们先编写一个简单的Hello World程序，并使用PhoneGap Build来将其打包为Android平台的应用程序。需要说明的是，由于当前PhoneGap Build尚处于Beta阶段，使用者需要注册并提出Beta测试申请，申请者会在一周之内获得一个Beta Code，只有使用Beta Code登陆的用户才能使用该功能。

　　打开PhoneGap Build的页面，我们可以看到如图4所示的操作界面。开发人员可以使用git或者svn的url地址来指向一个已开发好的Web App;此外，我们也可以将HTML、CSS和JavaScript文件放在同一个文件夹中，将其统一打包为zip文件后上传;最简单的，我们可以直接上传一个名为index.html的文件，将相应的程序逻辑都写在该文件中，本节的Hello World程序便采用了该方式，感兴趣的读者可以实践一下下文的操作步骤。

　　图4.PhoneGap Build的操作界面

　　

 

　　1.首先，我们可以使用本地的文本编辑工具，创建一个名为index.html的文件，并将清单1中的html代码加入到该文件中并保存。

　　清单1.创建一个名为index.html的文件

　　2.如图所示5所示，我们从本地选择并上传已编辑

　　

Hello World!

Hello PhoneGap!

 

　　好的index.html文件;同时，我们可以为自己的应用起一个名字，例如“Hello World”，点击Create按钮进入下一页。

　　图 5.上传已创建的index.html文件

　　

 

　　3.在成功上传之后，PhoneGap Build会采用默认的配置来Build我们的应用程序。如图6所示，开发人员也可以点击链接“Edit”打开配置页面来编辑我们的应用属性：如为应用设置名称、包名、版本号和描述等信息;此外，iOS应用的开发人员，可以在该页面配置开发许可的Key文件。

　　图6. PhoneGap Build的配置页面

　　

 

　　4.如图 7所示，在等待一段时间之后，可以看到PhoneGap Build页面中对应不同平台的图标发生了变化：由于iOS平台开发需要相应的license key，所以我们得到了一个显示警告信息的图标;而Android、webOS和Symbian平台则顺利的编译成功;对于BlackBerry平台，笔者尝试多次都未能成功的编辑应用程序，其图标一直停留在如图所示的等待状态。

　　图 7.PhoneGap Build的结果页面

　　

 

　　5.最后，通过点击相应平台的图标，即可将build好的应用程序下载到本地。在实践中，笔者成功创建了名为“HelloWorld-debug.apk”的应用;读者可以将其安装到Android手机中进行测试，应用启动后，可以在手机屏幕打印出相应的文字。

　　基于PhoneGap和Eclipse搭建Android开发平台

　　除了使用Phone Build外，开发人员也可以基于主流的IDE搭建PhoneGap的开发环境，在IDE中编写和调试程序代码，同时可以在相应的模拟器中直接运行编译好的Phone Gap 程序。由于iOS应用开发需要相应的Signing Key，同时需要特殊的硬件和系统平台，因而在本节中，我们还是面向Android平台来讲解PhoneGap的使用方法。

　　有别于前文使用PhoneGap Build开发方式，要使用IDE开发PhoneGap程序，我们首先需要安装相应平台的SDK。由于Android SDK的安装与本文的内容并不直接相关，因而此处只做简略的介绍。

　　1.首先要下载Android的SDK，并将其解压到本地硬盘上。

　　2.之后，我们要运行解压包中的SDK Manager.exe程序。如图 8所示，使用SDK Manager可以下载相应版本的AndroidSDK和文档。在本文的示例中，使用的是2.2版本的Android平台。

　　图 8.使用 Android SDK下载SDK及相关文档

　　

 

　　3.在 SDK Manager的“Virtual devices”选项卡中，我们可以创建一个手机模拟器，用于在开发过程中进行调试，模拟器的属性可以按图 9所示进行配置。

　　图 9.Android模拟器的设置

　　

 

　　在完成上述操作之后，我们还要搭建本节中要使用的IDE程序。在该示例中，本文采用的是3.6版本的Eclipse;同时，为了方便Android应用的开发，我们还需要下载并安装Eclipse的Android插件ADT。因为该过程相对简单，此处将不再赘述，有问题的读者可以在网上找到相应的安装说明。

　　之后，我们需要在PhoneGap的官方网站上下载PhoneGap程序包，并将其解压到本地硬盘。当前PhoneGap最新的版本为0.9.4，如图 10所示，基于PhoneGap框架开发Android应用所需的类库、JS文件和Sample等文件，都在其下名为“Android”的目录之中。

　　图 10.PhoneGap框架中的Android开发包

　　

 

　　接下来，我们可以打开Eclipse，并在其中创建一个Android的项目。如图 11所示，选择File->New->Others打开Eclipse的New Wizard后，在其中选择创建“Android Project”。

　　图 11. Eclipse 中 Android Project的New Wizard

　　

 

　　如图 12所示，在Android Project的New Wizard中，我们可以为Android Project指定项目名称、应用名称等若干的配置信息，其中的Build Target配置项表示该应用待运行的最低平台版本，本文在此处选择了Android 2.2平台。

　　图 12.配置Android Project

　　

 

　　至此，我们就在Eclipse中创建好了一个传统的Android开发项目。为了搭建PhoneGap开发环境，我们还需要将PhoneGap的类库和JS文件添加到该项目之中。首先，打开本文的示例项目TestPhoneGap，在assets文件夹下新建一个名为“www”的文件夹，并将PhoneGap程序包中Android目录下的phonegap.0.9.4.js文件拷贝到该文件夹中。

　　之后，我们需要在项目TestPhoneGap项目下新建一个名为“lib”的文件夹，并将PhoneGap程序包中Android目录下的phonegap.0.9.4.jar文件拷贝到该文件夹中。如图13 所示，右键选择项目TestPhoneGap->Build Path->Configure Build Path，在弹出的对话框中，点击Add JARS后选择phonegap.0.9.4.jar，将其添加到项目的类路径中。

　　图 13.将PhoneGap的类库添加到项目Build Path中

　　

 

　　至此，我们就完成了在Eclipse IDE下，基于PhoneGap来开发Android应用的所有环境搭建工作。在下文中，我们就可以基于该环境，使用传统的Web技术来开发Android平台的应用程序。

　　使用PhoneGap + Eclipse开发Android应用

　　在完成了环境搭建工作之后，我们便可以使用该环境开发和调试基于PhoneGap框架的Android程序。首先，我们来尝试使用Eclipse编译PhoneGap程序包中提供的Samples程序，并在模拟器中运行该程序：

　　1.打开上文中创建的PhoneGapActivity.java文件，将其继承的父类由android.app.Activity修改为com.phonegap.DroidGap，并添加所需的Java包引用。

　　2.将代码setContentView();替换为super.loadUrl("file:///android_asset/www/index.html");

　　3.打开文件AndroidManifest.xml，将清单2中的代码添加在application的起始标签之前，该段代码主要用于配置应用程序对系统API调用的授权信息。

　　清单2.配置应用的授权信息

　　

　　4.如图14所示，将PhoneGap程序包中Samples目录下的index.html和master.css文件拷贝到上文中创建的www目录中。这两个文件即是PhoneGap提供的完整的Android版示例程序。

　　图 14.添加PhoneGap提供的Android示例程序

　　

 

　　至此，我们就完成了运行PhoneGap提供的Android Samples的全部步骤。接下来，我们可以在Eclipse中启动Android的模拟器，并在其中测试运行本节开发的PhoneGap程序。右键单击项目PhoneGapTest->Run As->Android Application。

　　从图 15中可以看到，PhoneGap的Android示例程序中提供了若干的Button，用来导航用户测试其对SDK API的调用情况，其中包括了拨号、震动、铃声、GPS等常用的功能，在本文的分析与总结中，会对相应的的 JavaScript进行简要的分析，总结对应功能的API调用方式。

　　图 15. 测试PhoneGap的Android示例程序

　　

 

　　另外，由于模拟器的使用限制，该示例中的很多功能无法直接在模拟器中测试。在真实开发中，读者可以开启Android手持设备的USB Debug模式，连接USB直接使用真机进行开发调试。

　　最后，我们也可以尝试使用html、javascript和css编写一个自己的Web应用，并将其发布到Android模拟器中运行：

　　还是在目录www中，我们先创建一个html文件，并将其命名为calculator.html。在calculator.html中，笔者使用html、javascript和css编写了一个简单的计算器应用，读者可以在本文的示例代码中找到该程序。

　　打开PhoneGapActivity.java文件，将代码super.loadUrl( … ) 修改为 super.loadUrl("file:///android_asset/www/calculator.html")，以指向我们新创建的计算器程序。

　　如图 16所示，在以上文所述方式将新的代码发布到Android模拟器后，我们便可以在手机中测试本文的计算器示例程序。

　　图16.测试运行calculator程序

　　

 

　　在该示例中，本文使用html和JavaScript编写了一个简单的计算器程序，并将其发布到Android模拟器中测试执行。遗憾的是，该示例并没有调用到PhoneGap提供的JavaScript API;但通过编写一个html文件来实现Android应用的开发，仍然是让人振奋人心的事情。

　　总结

　　本文首先介绍了移动互联领域的高速发展，并阐述了当前跨平台移动应用开发所面临的问题。从这些问题入手，本文介绍了当前主流的几种移动应用开发框架，并从目标、支撑平台、实现原理等方面对其进行了比较。

　　在实践环节中，本文介绍了开源的PhoneGap框架，并使用PhoneGap Build将一段传统的HTML代码编译为针对当前主流移动平台的简单应用;之后，本文阐述了如何基于Eclipse和PhoneGap搭建Android的开发环境，并使用PhoneGap提供的Samples程序对开发环境进行了测试;最后，本文将一段JavaScript编写的计算器程序，通过PhoneGap编译为可运行的Android程序，并通过Android虚拟机对其进行了测试。