PhoneGap跨平台开发

第一章 PhoneGap介绍

一、PhoneGap是什么？
PhoneGap是一个标准的开源框架，用PhoneGap开发移动应用是免费的，无论是商业或是开源；一个用基于HTML，CSS和JavaScript的，创建跨平台移动应用的快速开发平台。它使开发者能够利用iPhone、Android、Palm、Symbian、WP7、Bada和Blackberry智能手机的核心功能——包括地理定位，加速器，联系人，声音和振动等，此外PhoneGap拥有丰富的插件，可以以此扩展无限的功能。
PhoneGap由Nitobi公司创建，并于2011.10被Adobe收购，并捐赠给Apache基金组织，PhoneGap是唯一的一个支持7个平台的开源移动框架。框架提供了丰富接口用于访问移动设备本地API，能够让你用javascript轻松调用。当前最新版本：1.5。

目前开发移动程序框架选择很多，如PhoneGap、Titanium、MonoTouch、Native App，兼容性越强的技术，成本越低，性能越差；兼容性越差的技术，成本越高，性能越好。PhoneGap是目前最被看好的：

·        兼容性：完全做到了Written Once，Run Everywhere!

·        标准化：PhoneGap采用W3C标准，Web App直接运行！

·        采用普通web开发技术：JavaScript+HTM5+CSS3。

存在不足：

·        性能，正常操作速度流畅，频繁操作响应会变慢。

·        稳定性及资源占用方面，手动频繁操作会引起，响应速度变慢，webkit的WebView不能很好释放内存，导致内存占用上升，甚至会引起应用的crash。

二、PhoneGap如何工作?

PhoneGap架构拥有强大的跨平台访问设备能力，但是其工作原理并不神秘，iPhone和Android平台共同点是都有内置的WebView组件，其具备两个特性：

·        WebView组件实质是移动设备的内置浏览器

WebView这个内置浏览器特性是Web能被打包成本地客户端的基础，可方便的用HTML5、CSS3页面布局，这是移动Web技术的优势相对于原生开发。

·        WebView提供Web和设备本地API双向通信的能力

PhoneGap针对不同平台的WebView做了扩展和封装，使WebView这个组件变成可访问设备本地API的强大浏览器，所以开发人员在PhoneGap框架下可通过JavaScript访问设备本地API。

PhoneGap与设备本地API通信图

一个成熟的PhoneGap技术客户端运行状况：应用运行在WebView组件上 -> 通过PhoneGap在各平台的扩展 ->最终访问设备本地资源。

PhoneGap架构图

三、API指南

Accelerometer点击进入设备的运动传感器。

Events通过JavaScript截获本地事件。

Camera使用设备的摄像头采集照片。

File通过JavaScript截获本地文件系统。

Capture使用设备的媒体采集应用程序采集媒体文件。

Geolocation使得你的应用程序可以访问地理位置信息。

Compass获取设备指向的方向。

Media录制和播放音频文件。

Connection快速检查WiFi或蜂窝网络的信息。

Notification设备的视觉、声音和触觉提醒。

Contacts和设备联系人数据库相关操作。

Storage截获设备的本地存储选项。

Device收集设备的具体信息。

四、参考资料
1、Javascript移动开发框架

·        jQuery Mobile：http://jquerymobile.com/

·        jQTouch：http://jqtouch.com

·        Sencha Touch: http://mobile.51cto.com/Sencha-278623.htm

PhoneGap +合适的javascript开发框架，轻松开发出原生风格的移动应用。选择哪种js框架，你可以通过:《三大移动Web开发框比较分析》一文，选择适合的框架。
2、PhoneGap社区

·        PhoneGap官网：http://phonegap.com/

·        PhoneGap中国社区： http://www.phonegap.cn

·        PhoneGap中国： http://www.phonegapcn.com/

·        51CTO专题（跨平台移动web中间件PhoneGap开发入门）：http://mobile.51cto.com/hot-273792.htm

第二章搭建PhoneGap开发环境

1。如何在Android平台下搭建PhoneGap开发环境
搭建Android平台的PhoneGap应用程序之前，首先要准备一些必须的工具和SDK，包括： Eclipse 3.4版本以上的开发环境，该开发环境可以在Eclipse官方网站下载，地址是：http://www.eclipse.org/downloads/。 Android SDK包，可以在Android官方网站下载SDK开发包，下载地址是：http://developer.android.com/sdk/index.html ADT Plugin for Eclipse插件， PhoneGap套件包
由于本书不是主要讲述如何在Eclipse部署Android开发环境，因此本节将不作Android部署的介绍，主要讲解如何在已有的Android开发环境下如何使用PhoneGap。
①.创建项目
(1) 首先打开Eclipse。
(2) 然后点击“new”–>“Android Project”，创建一个新的Adnroid项目。如图2所示。
(3) 在“Project name”输入Adnroid项目的名称。在“Build Target”下的列表中选择“Target Name”名称为“Android 2.2”的选项。
(4) 在“Package Name”中指定项目的类包路径，如com.phonegap.helloworld。
(5) 点击“finish”按钮完成项目的创建后，便进入项目的开发。

图 2创建Android项目的界面（图片来源于官方网站）

②.开发PhoneGap应用
(1) 在新建Android项目中的根目录下，创建两个新的文件目录：/libs和/assets/www。
(2) 复制从网络上下载的PhoneGap.js文件到/assets/www目录下。
(3) 复制从网络上下载的PhoneGap.jar文件到/libs目录下。
(4) 在com.phonegap.helloworld类包下创建一个class类文件app.java。
(5) 在app.java中将继承Activity类更改为DroidGap类，同时将app.java类内的setContentView()方法替换成super.loadUrl(“file:///android_asset/www/index.html”);
(6) 最后将phoneGap类包导入，如“import com.phongap.*;”。删除“import android.app.Activity”的类包。其效果如图3所示。
(7) 如果在使用phonegap.jar类库包时发现java中找不到类库，可以在项目的build Paths中导入该类库。地址在右击项目选择”properties”->”Java Build Path”->”Libraries”。

然后点击“Add JARs”将项目的libs目录下的phonegap.jar导入即可。

 
图 3 app.java类文件图（图片来源于官方网站）

③.修改配置
(1) 用文本方式打开项目根目录下的AndroidManifest.xml。
(2) 然后将以下代码复制到该XML文件中。
AndroidManifest.xml部分代码：

1.  <supports-screens android:largeScreens="true" android:normalScreens="true" android:smallScreens="true" android:resizeable="true" android:anyDensity="true" /> <uses-permission android:name="android.permission.CAMERA" /> <uses-permission android:name="android.permission.VIBRATE" /> <uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" /> <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" /> <uses-permission android:name="android.permission.ACCESS_LOCATION_EXTRA_COMMANDS" />

复制代码

(3)接着增加一个activity配置文件代码
增加activity文件：

1.  <activity android:name="com.phonegap.DroidGap" android:label="@string/app_name" android:configChanges="orientation|keyboardHidden"> <intent-filter> </intent-filter> </activity>

复制代码

(4)最后AndroidManifest.xml文件如下代码
AndroidManifest.xml配置文件代码：

1.  <?xml version="1.0" encoding="utf-8"?>

2.  <manifest xmlns:android="http://schemas.android.com/apk/res/android"

3.  package="com.phonegap.Sample" android:versionName="1.1" android:versionCode="1">

4.  <supports-screens

5.  android:largeScreens="true"

6.  android:normalScreens="true"

7.  android:smallScreens="true"

8.  android:resizeable="true"

9.  android:anyDensity="true"

10. />

11. <uses-permission android:name="android.permission.CAMERA" />

12. <uses-permission android:name="android.permission.VIBRATE" />

13. <uses-permission android:name="android.permission.ACCESS_COARSE

复制代码

④ hello World在www目录下新建index.html，如下代码
index.html示例代码

1.  <!DOCTYPE HTML> <html> <head> <title>PhoneGap</title> <script type="text/javascript" charset="utf-8" src="phonegap.js"></script> </head> <body> <h1>Hello World</h1> </body> </html>

复制代码

⑤.部署应用
最后，右键点击项目名称，选择“Run As”并点击Android Application。即可在Android模拟器中运行PhoneGap应用程序。

 第三章  PhoneGap的可行性

1              移动应用现状
        移动应用产品往往常常考虑多个平台的支持.单一平台很难保证应用的覆盖面或者换句话说就是用户群体的量和持续的活跃性上从长期的角度而言往往存在短板.另外从开发的角度而言.多平台的支持往往需要建立不同的技术团队.而平台之间开发技术也是完全迥异的. 开发一个具有相同业务的应用Natural-Application需要使用到不同平台的框架和开发语言.使用 C/C++ 的 Symbian、使用 Object C 的 iOS 和使用 Java 的 Android 应用开发技术，几乎是完全无法融合的. PhoneGap跨平台移动应用开发框架正是应运而生.
        我们需要搞清楚几个概念:Web App，Native App,Hybird App移动平台Application几个概念:
Web App
        这个主要是采用统一的标准的HTML,JavaScript.CSS等web技术开发.通过不同平台的浏览器访问来实现跨平台.同时可以通过浏览器支持充分使用HTML5特性，缺点是这些基于浏览器的应用无法调用系统API来实现一些高级功能，也不适合高性能要求的场合.
Native APP
        就是所谓的原生应用.指的是用平台特定的开发语言所开发的应用.使用它们的优点是可以完全利用系统的API和平台特性，在性能上也是最好的。缺点是由于开发技术不同，如果你要覆盖多个平台，则要针对每个平台独立开发,无跨平台特性.
Hybird App
        则是为了弥补如上两者开发模式的缺陷的产物.分别继承双方的优势.首先它让为数众多的web开发人员可以几乎零成本的转型成移动应用开发者；其次，相同的代码只需针对不同平台进行编译就能实现在多平台的分发，大大提高了多平台开发的效率；而相较于web App，开发者可以通过包装好的接口，调用大部分常用的系统API.
        而PhoneGap正是Hybird APP目前框架中集大成者
2                      phonegap简介
        phoneGap是Nitobi开发的一个免费开源的开发框架，目前最新版本是1.5，用来构建跨平台的使用HTML，CSS和JavaScript的应用程序。以written once, run everywhere一次编译到处运行而受欢迎，只需要改动少量代码而实现跨平台。
        phonegap 简单来说是一个中间件，为移动前端提供访问移动终端设备及资源的接口。采用统一的标准的html、javascript、css等web技术开发.通过不同平台的浏览器访问来实现跨平台。通过javascript脚步代码调用系统资源，以降低开发难度，所以受到广大web开发人员的青睐。
        2011年10月4日Adobe宣布收购了创建了HTML5 移动应用框架PhoneGap 和PhoneGap Build的新创公司Nitobi Software。这使得phonegap有了坚强的后盾，phonegap的发展前景也是一片光明。与此同时，PhoneGap的开源框架已经被累积下载60万次，借助PhoneGap平台，已有数千应用程序建立在iOS，android以及其它操作系统之上。
        下图是phonegap对各手机平台的支持情况

3                      phonegap成功案例

         

上图是phonegap与jquery mobile结合一起的mobile应用。这样应用都为简单的移动web应用，在国内来说，phonegap的成功案例比较少，目前还处于研究阶段。
4                      phonegap技术要求
        Adobe dreamweaver 5.5版本为phonegap提供了优越的开发环境。开发人员可以使用dreamweaver 5.5开发android app。虽然phonegap门槛较低，但是也要求开发人员具备必要的技能。
        要求开发人员掌握html、css、javascript技术，特别要求javascript技术，在javascript基础上需要掌握jQuery mobil框架ajax通讯技术。
5                      phonegap优缺点评估
        日前，phonegap框架热度如火如荼。一项技术当然会有其优缺点，我们是选用phonegap还是选择Native APP，要先分析两者的利弊，再根据具体应用选择，

5.1              phonegap优点：

        1、可跨平台。phonegap作为跨平台框架，其实并别written once, run everywhere，各移动平台的差异还是较大，phonegap框架帮我们解决了差异性，javascript与平台系统的连接由phonegap框架完成。成为连接移动终端的适配器，或者说中间件。它的原理如下图：

PhoneGap通过调用JavaSCript 调用API库实现和各个平台的SDK进行无差别的交互. 以达到调用不同平台手机上摄像头，文件系统,重力感应.GPS定位等功能。

5.1.1        2、 易用性

        phonegap开发人员无需直接操作平台资源。对平台资源的操作完成由phonegap框架完成。开发人员只需要用javascript调用phonegap  API就可以完成对平台资源操作。由于phonegap框架限制，对平台资源操作是有一定限制的。
        phonegap开发人员可以从web开发人员转入，目前来说web开发人员较多，成本也较低，转入phonegap开发后，可以降低移动应用产品的开发成本。这样，移动应用数量将直线提升。

5.1.2       3、 提供硬件访问控制

      比起传统的Web程序，PhoneGap提供了一些列的JS 的类，可以直接访问硬件。比如加速，相机，指南针，GPS，文件访问等，可以让你用JS方便地调用系统的硬件。以弥补传统Web程序的一块错误。

5.1.3       4、可利用成熟javascript框架

        web的发展，诞生了许多javascript框架。著名的有Ext js、jQuery。随着移动应用的需求越来越大，jQuery出现了jQuery mobile版本。它的体积小，为移动应用量身定制。使用javascript框架也降低了开发难度，使得移动应用更美观。

5.1.4        5、 方便的安装和使用

        PhoneGap的架构很复杂，但对于大多数开发者来说，并不需要了解phonegap内部，只用很简单的配置就可以搭好环境。只用专注写好自己的Web页面，拷贝进去就可以了。

5.2          phonegap不足之处

5.2.1        1、 运行速度慢

        PhoneGap集成多了个平台.程序的载入和UI界面的反应都比原生的程序慢，UI反应延时——这是个致命伤 .它实际上还是在展示Web页面，所以载入、页面刷新等肯定是需要一定时间的。 这在用户体验上来说PhoneGAp依然无法替代原生应用程序。
        另外，html、javascript、css都运行在各平台内置浏览器webkit之上，受到webkit处理速度影响。目前来说运行速度比较慢，性能较差。

5.2.2         2、不适合部分程序

        如果你的程序需要3D功能，或者对界面刷新有较高的要求，比如类似于游戏的程序现在来说还只是用原生的语言会比较好。PhoneGap支持API还有待在各个平台逐步完善

Android应用类型

Html5 (phonegap)

Android java

功能实现

Html + jQuery基础库

ListView组件

文件大小

159KB

23KB（只用了系统的原生界面）

内存占用

45.37MB(RSS)

27.02MB(RSS)

数据通信

Ajax

Apache http Java功能包

启动速度

打开相同订阅源2.7秒

打开相同订阅源2.3秒

操作响应速度

正常操作速度流畅，频繁操作响应会变慢

操作速度流畅

稳定性

在Monkey测试注入大约4万个事件时，整个应用已经处于空白无响应状态。有连接超时情况发生。手动频繁操作会引起，响应速度变慢，webkit的WebView不能很好释放内存，甚至会引起应用的crash。

能较好处理Activity切换延时等待。运行较为流畅。Monkey测试时书签列表页切换时有时候会出现黑色背景，然后再载入列表，比正常速度稍慢。能够比较好的释放内存，没有出现过应用crash的情况。

资源占用

对于频繁操作时，内存释放不够理想，导致内存占用上升。

内存占用相对比较稳定。

开发成本

运用html + css + javascript开发，适合前端人员开发。由于webkit在不同的终端机发行版本不一样，所以需要针对不同的机型进行适配。同时对于不同屏幕大小在适配上也只能通过Javascript进行控制实现。

适合有Java开发经验的程序员，可以充分利用Android提供的组件进行开发。但是开发学习成本较高。

开发难度

目前phonegap只使用一个WebView，开发时需要使用OPOA的模式，对代码的组织方式及开发方式有较高要求。同时介于手机的资源有限，对如何管理和分配内存提出了要求。目前phonegap可以在控制台输出简单的JS调试日志，但是并不方便。

需要有Java开发经验，同时对Android开发体系有较深入的了解。

多人协作

OPOA模式并不利于多人协作并行开发，只能通过基础的javascript的设计模式来解决多人协作的问题。

比较方便支持多人协作并行开发。

其它问题

1.内存优化：webapp因为是基于浏览器的，而浏览器自身是进行了相应的优化的，所以在图片显示上很不错。     
原生app如果在一页中显示比较多的图片的时候，必须比较细致完善的进行内存优化工作，否则极易出现因为图片资源过大而引起的崩溃问题。
2.图片缩放裁切 webapp一般情况下通过js和css来进行缩放裁切。在进行图片动态缩放的时候，页面显示情况不是很正常（抖动，跳跃）。最好的办法是后端服务器对图片处理后再发送给手机端。
原生app可以直接通过java来对图片进行处理。
3.布局 原生app可以利用android提供的特殊技术方案，来自动适应多种分辨率的屏幕。如9png 和 多drawable目录。 相当简单方面。但是在交互方面，原生app的开发量会比较大。
webapp就比较杯具一些了，需要开发者比较多的关注。 可以通过js来动态的获取屏幕尺寸进行资源调整和加载（开发几套不同的ui，然后根据分辨率js动态加载），这个会花费比较多的时间。
4.调试
webapp js调试不太方便，特别是调用外部应用的时候。如果是本应用内部，可以通过firebug进行调试。

 5.2.3         3、调用平台资源差

     phonegap应用程序对平台资源的使用依赖于phonegap框架本身，由于phonegap是第三方框架，做不到100%调用平台资源，只有依靠phonegap的升级满足调用平台资源的需求。
        比如说，现在版本未能支持视频解码与播放等

5.2.4         4、内存消耗大

        有测试表明，用phonegap于android java开发同一个应用。运行phonegap应用内存消耗远大于原生态android java应用。对于频繁操作，释放内存较慢，从而导致内存消耗量飙升。

5.2.5         5、调试难度大

        目前phonegap可以在控制台输出简单的JS调试日志，但是并不方便。调试js只能选择firefox  firebug调试。

5.2.6         6、 开发费用方面

        phonegap可以满足web开发人员转入。但由于html5的新发展，对javascript、css的要求更高。所以开发良好用户体验应用，在开发费用上并不太乐观。
6          phonegap与android java对比评测
    测试对象：Delicious书签订阅应用

        此次对比主要集中在对大量数据通信下web app UI性能。通过与android Java app相比较，web app的UI性能会比Java app的UI性能差。主要原因是依赖webkit浏览器内核的渲染解析能力。同时在只有一个WebView的情况下，如何控制内存的上涨速度以无法释放内存的情况无缝地重新启动WebView从而不影响用户体验，是一个现实待解决问题。
        在非大数据量且不需要频繁更新UI的情况下，基于wekit浏览器phonegap模式还是可以满足Android开发应用的需求。同时应用的实现的效率还依赖于OPOA开发模式的Javascript基础架构是否强大和高效。
        对于不同分辨率的屏幕，需要通过JS或者通过要集成的框架封装来解决适配的问题。同时由于不同版本的Android所集成的webkit的版本不同，同样也需要处理不同版本的在JavaScript和CSS支持上不同的兼容性问题。还有解决开发时多人协作及方便的调试工具集成，也是进行html5 app开发的重要前提条件。
        或者通过要集成的框架封装来解决适配的问题。同时由于不同版本的Android的版本不同，同样也需要处理不同版本的在JavaScript支持上不同的兼容性问题。还有解决开发时多人协作及方便的调试工具集成，也是进行html5 app开发的重要前提条件。
7            结语
         phonegap的目标就是快速开发移动应用实现written once, run everywhere跨平台。phonegap一定程度上降低了移动开发的门槛，特别是ios开发。传统web开发人员不需要学习object-c、android java就可以开发普通的移动应用。
        类似于phonegap这样的框架的出现，并不能取代Native APP原生态应用。phonegap有它的不足之处，运行速度较慢、操作平台资源不灵活、操作移动设备不方便，这些都依赖者phonegap框架本身的升级与发展。不过值得高兴的是adobe公司收购了phonegap开发商，增加了phonegap的后台实力。phonegap的种种不足之处表明Native app的地区不能被取代，只能说会瓜分一部分简单web移动应用。
        在用户体验方面。phonegap运行速度相对慢，页面动画切换有点卡，这影响着用户体验。这些原因能否解决，这取结于移动平台的webkit的性能优化和对html、css、javascript的支持程度。
        在硬件支持与内存方面。一个应用用两种方式实现，native app消耗内存较低，要求硬件支持较低。phonegap消耗内存较大，内存释放效率较低，因而要求的硬件支持相比之下就高了。
        开发费用方面。phonegap要求开发人员的javascript、css技术高，甚至要求开发人员掌握html5新技术。这样开发人员费用高于传统web开发人员。不过，与native app相比，phonegap可以实现跨平台，减少在各个平台上花费开发费用。总体上，一个移动产品采用phonegap，费用要低些。
        至于是否采用phonegap于native app方式，这要取决于移动产品本身特性与企业对产品的要求。一般的移动web应用可以采用phonegap技术，但是用户体验就没有native app好；接近于游戏的应用，经常刷新界面的应用，使用phonegap就不太合适了。最后，采用何种技术，要看产品的侧重点。像QQ这样的应用，注重用户体验，应该不会采用phonegap了。