跨平台移动应用开发框架的探索——PhoneGap
发表于 15:42|
来源整理自IBM dW社区|
作者柏越、黄彦军、吕双涛
摘要：本文通过介绍移动互联网的发展，引出了跨平台移动应用开发的现状，并对当前的跨平台移动应用开发框架进行了比较。本文首先使用PhoneGap Build将HTML程序发布为多移动平台的应用；之后，基于Eclipse和PhoneGap框架搭建了Android的开发环境，并在该环境中开发测试了简单的Android应用程序。
导读：本文通过介绍移动互联网的发展，引出了跨平台移动应用开发的现状，并对当前的跨平台移动应用开发框架进行了比较。在实践环节中，本文首先使用PhoneGap Build将HTML程序发布为多移动平台的应用；之后，基于Eclipse和PhoneGap框架搭建了Android的开发环境，并在该环境中开发测试了简单的Android应用程序。
移动应用软件开发的现状
在多厂商的利益竞争下，当前的智能终端平台呈现出了&百家争鸣&的现象。从图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的发展较上述两者则相对成熟一些，它也是商业化的框架产品。
PhoneGap和Titanium有很多相似之处，但相比PhoneGap，Titanium除了提供与SDK相对应的功能API外，还对相应平台UI API提供了一定的支持。因而，使用Titanium可以开发出更加接近于本地应用的用户体验，但也正因为如此，Titanium对平台的兼容性不及PhoneGap的发展现状。
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所示，我们从本地选择并上传已编辑
&!DOCTYPE&HTML&&&&&&PhoneGap&&&&&&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.配置应用的授权信息
&android:name=&android.permission.CAMERA&&& &&android:name=&android.permission.VIBRATE&&& &&android:name=&android.permission.ACCESS_COARSE_LOCATION&&& &&android:name=&android.permission.ACCESS_FINE_LOCATION&&& &&android:name=&android.permission.ACCESS_LOCATION_EXTRA_COMMANDS&&& &&android:name=&android.permission.READ_PHONE_STATE&&& &&android:name=&android.permission.INTERNET&&& &&android:name=&android.permission.RECEIVE_SMS&&& &&android:name=&android.permission.RECORD_AUDIO&&& &&android:name=&android.permission.MODIFY_AUDIO_SETTINGS&&& &&android:name=&android.permission.READ_CONTACTS&&& &&android:name=&android.permission.WRITE_CONTACTS&&& &&android:name=&android.permission.WRITE_EXTERNAL_STORAGE&&& &&android:name=&android.permission.ACCESS_NETWORK_STATE&&&&
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虚拟机对其进行了测试。
注：本文整理自
推荐阅读相关主题：
网友评论有（0）
CSDN官方微信
扫描二维码,向CSDN吐槽
微信号：CSDNnews
相关热门文章Native&App和Web&App孰强孰弱？Web&App是否在将来能取代Native&App？这一直是移动互联网从业者讨论的话题，本文将从架构的角度来进行分析。
还记得C/S和B/S吗
类似的技术趋势之争实际上已经有很多了，我们不妨花点时间回顾一下十年前的和之争。
20世纪年代，技术成熟并得到了快速发展，即系统是由客户端和服务器两部分组成。客户端部分的主要任务是提供用户交互的界面，控制应用程序的逻辑。服务器负责有效地管理系统的资源，尤其是对安全性要求较高的数据库管理和访问控制等。
在架构中，对产品开发的要求是两端都需要大量的开发工作。客户端主要是针对等用户操作系统平台进行开发，使用大量与操作系统相关的，开发工作量大，版本更新困难。服务器端主要是进行数据库管理方面的开发工作。因此，开发人员会分成两类，基本上没有交集。在系统维护上也比较复杂，最难的就是客户端的版本控制和升级工作，给维护工作带来很大的工作量。另外也不适合移植，如果用户要求要支持系统的客户端，那就只能投入更多的客户端人力重新开发一套客户端软件。
随着三层结构、浏览器、脚本语言、技术的发展，出现了架构，即系统是由浏览器和服务器两部分组成。浏览器采用用户设备上自带的各种浏览器，这样在用户设备上无须再安装客户端软件，也无须为客户端软件支付开发成本。服务器端采用三层或多层结构，利用脚本语言等形成以网页形式提供的用户交互界面，然后与业务逻辑和数据库进行协作。显然，相比结构，一方面可以减少客户端的开发和移植工作，节省客户端的维护费用；另一方面由于表示层、数据和业务逻辑都在服务器端，可以自由地进行系统维护和升级工作。
但结构也有不足之处，比如受网络制约，同时安全性难以控制。另外也不能满足所有的用户需求，比如浏览器受安全性限制，不易于操作用户设备上的更多资源。于是浏览器插件被引入进来，通过浏览器插件，一些需要使用用户本地资源的功能得以实现。
直到今天，技术已经发展到时代，页面的展现效果已经非常丰富，但和两种架构依然同时存在，二者的优劣都相当明显，谁也无法替代对方。
Native&App
Native&App架构的客户端中包含了界面展现、业务逻辑、数据模型三个部分，如图所示。通过网络访问服务器端的各种服务。以手机导航软件为例，在手机上会使用相应操作系统的开发界面，然后调度业务逻辑层的进行功能实现。当需要展现地图时，如果手机上没有地图数据，就会使用经纬度坐标访问服务器上的地图服务，从服务器获取地图数据，解析后再通过界面绘制出来。在这样的交互下，服务器端的服务独立性较强，其业务形态完全是由客户端控制和调度。
这与结构是一样的。由于使用了客户端的众多特性，所以客户端的表现力相当丰富，性能较高，用户体验也比较出色。但劣势也比较明显：客户端的开发工作量大，逻辑复杂；客户端不利于移植，必须针对不同的操作系统进行单独的适配开发工作；客户端软件升级和维护困难；服务器端要支持多客户端，难于扩展。
Web&App基本上对应了架构，如图所示。客户端不再需要开发工作，退化为使用内置的浏览器与用户交互。服务器端以、、作为前端供浏览器展示，使用其他服务器端技术实现业务逻辑和数据库管理。相对于结构，其最大优势在于无客户端，不需要专门的开发和移植工作。即使使用控件的客户端，也易于开发和移植。另外的优势就是由于代码全部在服务器端，所以易于扩展和升级。
同样，的劣势也比较明显：服务器端的开发工作量大，逻辑复杂；界面响应稍慢，性能弱；难于使用设备的特性比如传感器、定位、本地文件系统等。
Web App架构图
Hybrid&App
在目前受限于浏览器或前端技术未标准化的情况下，可以进行组合应用，这种应用也被称为，结构如图所示。在这种结构中，对于侧重性能、体验、设备特性、本地数据管理的部分，采用的方式，其余的部分采用方式，通过这种结合，可以有效地形成互补。这就像在结构上增加浏览器插件一样，对二者进行融合。
现在采用这种融合方案的应用正在日渐增多，既可以发挥本地应用的优势，又能有机地整合后端资源。对于需要本地化的部分，继续采用操作系统的接口进行客户端开发，对于适合端的部分，通过嵌入等浏览器控件进行实现，也可以采用像这样的框架来消除网页展现中难于使用设备本身特性的缺点。
Native与Web融合架构
移动应用并不是非此即彼，必须充分认识到二者的特性，然后灵活地应用在自己的产品架构当中，才能更好地平衡软件的结构。
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：143912次
积分：1996
积分：1996
排名：第10574名
原创：39篇
转载：62篇
评论：25条
(1)(2)(3)(5)(13)(12)(6)(7)(2)(7)(10)(2)(1)(1)(2)(2)(1)(1)(4)(9)(9)(1)移动App服务端架构设计_百度文库
两大类热门资源免费畅读
续费一年阅读会员，立省24元！
评价文档：
移动App服务端架构设计
阅读已结束，如果下载本文需要使用
想免费下载本文？
你可能喜欢利用Java语言开发手机app后台服务器的框架有哪些？
~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 网友回复：
利用Java语言开发手机app后台服务器的框架有哪些？
【利用Java语言开发手机app后台服务器的框架有哪些？】
请将本文分享给你的朋友：
利用Java语言开发手机app后台服务器的框架有哪些？ 的相关文章
------分隔线----------------------------
北京联盟郑重声明：本文仅代表作者个人观点，与北京联盟无关。其原创性及文中陈述内容未经本站证实，北京联盟对本文及其中全部或者部分内容的真实性、完整性、及时性不作任何保证和承诺，请网友自行核实相关内容。}