基于HTML5跨平台移动应用研究与实践.docVIP

基于HTML5跨平台移动应用研究与实践 　　摘要：针对不同移动平台应用软件需要分别进行开发、测试和维护，这样势必造成资源浪费和成本提高。该文在研究分析当前移动应用开发解决方案和最新移动开发技术的基础上，提出一种跨平台的移动应用方案，并在这个方案的基础上进行实践，利用Phonegap，HTML5和jQuery Mobile技术设计并实现基于Android平台的RSS阅读器。 　　关键词：移动跨平台应用；Phonegap；jQuery mobile；HTML5；Android 　　中图分类号： TP316.5 文献标识码：A 文章编号：1009-3044（2013）17-3992-04 　　1 概述 　　随着移动互联网的飞速发展，移动智能终端操作系统平台出现“百家争鸣”的现象，各大主流的移动平台之间互不兼容，没有标准的接口去实现跨平台软件开发。如果要开发一款应用软件运行于几大移动平台，则需针对不同的移动平台分别进行开发、测试和维护，这样就会造成资源浪费和成本提高。针对以上问题，该文在研究分析当前移动应用开发解决方案和主流技术的基础上，提出一种跨平台的移动应用方案，即利用支持标准HTML5、CSS和Javascript的跨平台框架PhoneGap和移动前端开发工具jQuery Mobile来进行跨平台移动应用软件的开发[1]。并在这个方案的基础上进行实践，利用Phonegap，HTML5和jQuery Mobile技术设计并实现基于Android平台的RSS阅读器。 　　2 相关技术介绍 　　2.1 Phonegap 　　Phonegap是一个开源的跨平台框架，使用HTML，Javascript和CSS语言来进行跨平台的移动应用开发。通过JavaSCript调用API库实现和各个平台的SDK进行交互，以达到调用不同平台手机上摄像头，文件系统，重力感应，GPS定位等功能。但Phonegap也有弱点，它集成多了个平台，程序的载入和UI界面的反应都比原生的程序慢，UI反应延时，内存消耗也远大于原生态应用[2]。 　　2.2 jQuery Mobile 　　JQuery Mobile是针对触屏智能手机与平板电脑的移动UI框架。JQuery Mobile 是一个JavaScript库，它构建于Jquery 以及 Jquery UI类库之上，为开发人员提供了一个兼容所有主流移动设备平台的统一UI接口系统。开发框架给移动设备平台提供标准的UI元素和事件处理jQuery Mobile这个框架能够帮助你快速开发出支持多种移动设备的Mobile应用用户界面，它是当前最??行的移动开发框架之一[3-4]。 　　2.3 HTML5 　　HTML5 是HTML的最新标准，目前被广泛应用于各智能移动终端设备，被各种最新版本的移动浏览器所支持，它新增的很多特性对移动互联网发展具有重要的促进作用，其中离线缓存为HTML5开发移动应用提供了基础；音频视频的自由嵌入，让多媒体形式更为灵活；地理定位，让用户随时随地分享位置；Canvas绘图，提升移动平台的绘图能力；丰富的交互方式让提升用户体验等等[5-6]。 　　3 移动应用开发解决方案 　　3.1 移动应用开发解决方案比较分析 　　原生移动应用程序，是指利用移动平台特定的开发语言进行开发，例如Android平台利用Java，iphone平台利用Object-C进行开发，这样可以很好调用系统API和利用平台特性，在效率和性能上达到最优，缺点是对不同系统的设备要分别开发、测试和维护。 　　Web应用程序，使用标准的HTML5，Javascript，CSS进行web开发。通过不同系统的浏览器访问实现跨平台，因为大部分浏览器对HTML5都具有良好支持。缺点是这些基于浏览器的应用程序无法调用手机系统API来实现一些拍照、音频视频录制传输等高级功能，也不适用于高效率、高性能的场合。 　　移动web应用程序，它利用HTML5配合原生方式来取得最优效果。利用原生方式搭建本地架构，让用户获得更加贴近于设备的交互体验，同时在信息的呈现上使用HTML5的优势，来打造最好的移动应用。同时针对不同移动平台进行不同编译就实现多平台的发布，大大降低开发成本，提高开发效率[7]。 　　通过对三种方案的优缺点比较分析，结合开发的实际需求，我们系统实现过程采用支持标准HTML5、CSS和Javascript的跨平台框架PhoneGap和移动前端开发工具jQuery Mobile来进行跨平台移动应用软件。 　　3.2 移动web应用解决方案的架构与工作原理 　　移动web应用方案的总体架构如下图所示，它的工作过程是这样的：如果需要使用移动设备的系统资源则通过 phonegap 调用移动设备 API，将移动设备系统