基于html5跨平台移动应用探究和实践

《基于html5跨平台移动应用探究和实践》由会员上传分享，免费在线阅读，更多相关内容在学术论文-天天文库。

1、基于HTML5跨平台移动应用探究和实践　　摘要：针对不同移动平台应用软件需要分别进行开发、测试和维护，这样势必造成资源浪费和成本提高。该文在研究分析当前移动应用开发解决方案和最新移动开发技术的基础上，提出一种跨平台的移动应用方案，并在这个方案的基础上进行实践，利用Phonegap，HTML5和jQueryMobile技术设计并实现基于Android平台的RSS阅读器。关键词：移动跨平台应用；Phonegap；jQuerymobile；HTML5；Android中图分类号：TP316.5文献标识码

2、：A文章编号：1009-3044（2013）17-3992-041概述随着移动互联网的飞速发展，移动智能终端操作系统平台出现“百家争鸣”的现象，各大主流的移动平台之间互不兼容，没有标准的接口去实现跨平台软件开发。如果要开发一款应用软件运行于几大移动平台，则需针对不同的移动平台分别进行开发、测试和维护，这样就会造成资源浪费和成本提高。针对以上问题，该文在研究分析当前移动应用开发解决方案和主流技术的基础上，提出一种跨平台的移动应用方案，即利用支持标准HTML5、CSS和Javascript的跨平台框

3、架PhoneGap和移动前端开发工具jQuery8Mobile来进行跨平台移动应用软件的开发[1]。并在这个方案的基础上进行实践，利用Phonegap，HTML5和jQueryMobile技术设计并实现基于Android平台的RSS阅读器。2相关技术介绍2.1PhonegapPhonegap是一个开源的跨平台框架，使用HTML，Javascript和CSS语言来进行跨平台的移动应用开发。通过JavaSCript调用API库实现和各个平台的SDK进行交互，以达到调用不同平台手机上摄像头，文件系统，

4、重力感应，GPS定位等功能。但Phonegap也有弱点，它集成多了个平台，程序的载入和UI界面的反应都比原生的程序慢，UI反应延时，内存消耗也远大于原生态应用[2]。2.2jQueryMobileJQueryMobile是针对触屏智能手机与平板电脑的移动UI框架。JQueryMobile是一个JavaScript库，它构建于Jquery以及JqueryUI类库之上，为开发人员提供了一个兼容所有主流移动设备平台的统一UI接口系统。开发框架给移动设备平台提供标准的UI元素和事件处理jQueryMob

5、ile这个框架能够帮助你快速开发出支持多种移动设备的Mobile应用用户界面，它是当前最流行的移动开发框架之一[3-4]。2.3HTML58HTML5是HTML的最新标准，目前被广泛应用于各智能移动终端设备，被各种最新版本的移动浏览器所支持，它新增的很多特性对移动互联网发展具有重要的促进作用，其中离线缓存为HTML5开发移动应用提供了基础；音频视频的自由嵌入，让多媒体形式更为灵活；地理定位，让用户随时随地分享位置；Canvas绘图，提升移动平台的绘图能力；丰富的交互方式让提升用户体验等等[5-6

6、]。3移动应用开发解决方案3.1移动应用开发解决方案比较分析原生移动应用程序，是指利用移动平台特定的开发语言进行开发，例如Android平台利用Java，iphone平台利用Object-C进行开发，这样可以很好调用系统API和利用平台特性，在效率和性能上达到最优，缺点是对不同系统的设备要分别开发、测试和维护。Web应用程序，使用标准的HTML5，Javascript，CSS进行web开发。通过不同系统的浏览器访问实现跨平台，因为大部分浏览器对HTML5都具有良好支持。缺点是这些基于浏览器的应用

7、程序无法调用手机系统API来实现一些拍照、音频视频录制传输等高级功能，也不适用于高效率、高性能的场合。8移动web应用程序，它利用HTML5配合原生方式来取得最优效果。利用原生方式搭建本地架构，让用户获得更加贴近于设备的交互体验，同时在信息的呈现上使用HTML5的优势，来打造最好的移动应用。同时针对不同移动平台进行不同编译就实现多平台的发布，大大降低开发成本，提高开发效率[7]。通过对三种方案的优缺点比较分析，结合开发的实际需求，我们系统实现过程采用支持标准HTML5、CSS和Javascrip

8、t的跨平台框架PhoneGap和移动前端开发工具jQueryMobile来进行跨平台移动应用软件。3.2移动web应用解决方案的架构与工作原理移动web应用方案的总体架构如下图所示，它的工作过程是这样的：如果需要使用移动设备的系统资源则通过phonegap调用移动设备API，将移动设备系统资源返回给JavaScript逻辑层，然后逻辑层将获取到的数据用函数方式写入DOM结构，并展现在移动终端屏幕上。对于轻击、双击、滑动等用户操作事件需要响应或者DOM节点上监听的事件触发则通过调用JQueryMo