Phonegap技术分析

Phonegap介绍

phonegap是一个免费开源框架。它可以为前端开发提供访问移动终端设备的各种接口，目前最新版本为3.40。可以方便的用它来构建跨平的HTML，CSS和javascript的应用程序。

Phonegap 的优点

1、phonegap作为跨平台框架，很容易实现written once, run everywhere，由于各移动平台的差异较大，phonegap帮我们解决了差异性问题，javascript与平台系统的交互对接都由phonegap完成。因此它是连接移动终端的适配器，或者说是中间件。

2、开发成本低。

3、易用性强，开发人员无需直接操作平台资源，只需要用javascript调用phonegap API就可以完成对移动平台设备资源的操作。

4、phonegap提供了一些列的JS 类库，可以直接调用并访问系统硬件。例如加速，相机，指南针，GPS，文件访问等。

5、可以支持并使用成熟javascript框架。例如JQuery，Sencha Touch，JQM等等。使用javascript框架也降低了开发难度，使得移动应用更美观。

6、对于大多数开发者来说，并不需要了解phonegap内部架构，只需要针对不同的移动平台做相应的配置就可以搭建环境。大部分开发精力可以倾向于Web端。

 

Phonegap 的缺点

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

2、hybrid app运行phonegap应用内存消耗远大于原生态android应用。由于对移动平台资源设备的频繁操作，释放内存较慢，从而导致内存消耗量提升。

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

 

Phonegap 与 Android Native性能对比

应用类型	Html5(phonegap)	Android Native
功能实现	Html+JQuery基础库+Webview	ListView组件
文件大小	159KB	23KB（只用了系统的原生界面）
内存占用	45.37MB	27.02MB
数据通信	Ajax	Apache http Java功能包
启动速度	打开相同订阅源2.7秒	打开相同订阅源2.3秒
操作响应速度	正常操作速度流畅，频繁操作响应会变慢	操作速度流畅
稳定性	手动频繁操作会引起，整个应用会处于空白无响应状态。有连接超时情况发生。响应速度变慢，webkit的WebView不能很好释放内存，甚至会引起应用的crash。	能较好处理Activity切换延时等待。运行较为流畅。能够比较好的释放内存，没有出现过应用crash的情况。
资源占用	对于频繁操作时，内存释放不够理想，导致内存占用上升。	内存占用相对比较稳定。
开发成本	运用html + css + javascript开发，适合前端人员开发。由于webkit在不同的终端机发行版本不一样，所以需要针对不同的机型进行适配。同时对于不同屏幕大小在适配上也只能通过Javascript进行控制实现。	适合有Java开发经验的程序员，可以充分利用Android提供的组件进行开发。但是开发学习成本较高。
开发难度	目前phonegap只使用一个WebView，开发时需要使用OPOA的模式，对代码的组织方式及开发方式有较高要求。同时介于手机的资源有限，对如何管理和分配内存提出了要求。目前phonegap可以在控制台输出简单的JS调试日志，但是并不方便。	需要有Java开发经验，同时对Android开发体系有较深入的了解。
多人协作	OPOA模式并不利于多人协作并行开发，只能通过基础的javascript的设计模式来解决多人协作的问题。	比较方便支持多人协作并行开发。

 

Phonegap API – Events

1、deviceready 事件

2、pause 事件

3、resume 事件

4、online 事件

5、offline 事件

6、backbutton 事件

7、menubutton 事件

8、batterycritical 事件

9、batterylow 事件

10、batterystatus 事件

 

一、deviceready 事件

在使用phonegap开发应用时，这一事件在设备的本地环境和页面完全加载完成之后才触发，此事件一般晚于jQuery的ready事件，jQuery的ready事件是在DOM 完全加载完成后触发，deviceready则是设备的本地环境和页面完全加载完成之后才触发。当native加载的时候，自定义的一些图片会被调用，而JavaScript需要在DOM加载后就会被加载。这时可能会造成JavaScript在图片加载前就已经被调用了。使用deviceready事件可以保证phonegap是在完全加载完成后，才会被触发。

二、pause 事件

当phonegap应用被置为后台时触发。

三、resume事件

当phonegap应用重新从后台置为前台时触发。

四、 online事件

当phonegap应用连接因特网时触发。

五、offline 事件

当phonegap应用断开因特网时触发。

六、backbutton事件

当单击退回按钮时触发。

七、menubutton 事件

当单击菜单按钮时触发。

八、batterycritical事件

当phonegap应用监控到电池达到警告时触发（20%） batterycritical的处理程序将会调用一个对象，该对象包含以下两个属性：level：电池剩余电量的百分比，取值范围是0-100。(数字类型)；isPlugged：boolean型的值，表示设备是否接通电源。

九、batterylow事件

在电量非常低的情况下触发（5%） batterylow的处理程序将会调用一个对象，该对象包含以下两个属性：level：电池剩余电量的百分比，取值范围是0-100。(数字类型)；isPlugged：boolean型的值，表示设备是否接通电源。

十、batterystatus事件

phonegap应用监控到电池状态有改变时触发（每当电量变化1%的时候触发一次）batterystatus的处理程序将会调用一个对象，该对象包含以下两个属性： level：电池剩余电量的百分比，取值范围是0-100。(数字类型) isPlugged：boolean型的值，表示设备是否接通电源。

 

Phonegap API – Events使用

首先需要确保是在deviceready的状态下对事件进行监听，否则设备监听会失败。同时通过document.addEventListener(“deviceready”, deviceReadyCallBack, false)进行监听。若使用第三方base库时，如jQuery，需要在dom ready后进行事件监听。

 

Phonegap Plugin-APIs

1、Battery Status

监测设备的电池状态。

2、Camera

使用设备摄像头捕获照片。

3、Contacts

使用移动设备通讯录。

4、Device

收集移动设备相关的重要信息。

5、Device Motion (Accelerometer)

捕获移动设备的运动传感器功能。

6、Device Orientation (Compass)

捕获移动设备的指向的方向(指南针)

7、Dialogs

提供具备UI元素的原生对话框。

8、FileSystem

提供文件的上传，下载。

9、File Transfer

提供对文件的操作，集合html5 File API。

10、Geolocation

可以使App获取地理位置信息。

11、Globalization

特定语言环境设置。

12、InAppBrowser

模拟window.open() ，添加监听事件loadstart，在 web browser中打开。

13、Media

对已有媒体流地址进行操作与数据获取。

14、Media Capture

对移动设备的音频、图像、视频进行捕获。

15、Network Information (Connection)

对网络状态及蜂窝网络进行检测。

16、Splashscreen

用来显示或隐藏应用程序启动时的启动页面。

17、Vibration

 提供移动设备的震动。