admin 管理员组文章数量: 1086019
2024年3月7日发(作者：css选择器及其优先级)
龙源期刊网
基于HTML5跨平台移动应用的研究与实践
作者：潘志宏 罗伟斌 柳青
来源：《电脑知识与技术》2013年第17期
摘要：针对不同移动平台应用软件需要分别进行开发、测试和维护，这样势必造成资源浪费和成本提高。该文在研究分析当前移动应用开发解决方案和最新移动开发技术的基础上，提出一种跨平台的移动应用方案，并在这个方案的基础上进行实践，利用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，将移动设备系统资源返回给JavaScript逻辑层，然后逻辑层将获取到的数据用函数方式写入 DOM 结构，并展现在移动终端屏幕上。对于轻击、双击、滑动等用户操作事件需要响应或者DOM节点上监听的事件触发则通过调用
JQuery Mobile 函数处理。
龙源期刊网
4 基于Phonegap，jQuery Mobile的 Android RSS阅读器
4.1 系统功能分析
第一，订阅管理模块，主要实现手机订阅腾讯以及网易等门户网站的RSS新闻，进行本地个性化订阅项管理，读者可以根据自己的兴趣自主订阅及退订，满足读者的个性化阅读需求。第二，XML解析模块，该模块主要实现通过RSS读取网站XML信息，并进行解析转换，最后显示在手机页面。第三，信息的设置模块，包含更好显示皮肤，更新网络连接方式，显示栏目数量，清空订阅，天气定制模块等设置项。
4.2 系统设计实现与测试
4.2.1 开发环境搭建
开发平台搭建分为两个步骤：1. 安装配置 Android SDK，本系统采用的是Android2.3版本。2. 安装配置DreamwearCS5.5。DreamwearCS5.5以上版本集成Jquery和Phonegap开发环境，利用它来进行移动web开发，减少配置开发工具的时间。
4.2.2 系统设计
对于系统的数据，我们采取本地的存储方式，这样不会因为软件的重启而导致订阅信息的丢失和混乱，这里采用HTML5的localStorage技术，它是HTML5新增的特性， HTML5存储基于键值对，数据存储在一个键里面，访问数据时可以根据同样的键获得上次存储的数据，键是一个字符串，而数据则可以是任何类型的JavaScript基本数据类型，利用这种技术可以方便我们进行数据的存储和读取。在本系统中存储的信息包括，栏目的订阅状态（是否被订阅，存储为true/false），对应的订阅栏目的标题，网址，图标等。
对于界面部分，采用HTML5的页面布局，结合CSS和 Jquery mobile实现精致布局。其中首页使用的是Jquery的UI-grid布局，订阅管理和设置界面均采用listview结合网格技术来布局。运用强大的Jquery mobile库，结合Javascript脚本，实现展开，收缩，跳转，查询，写入，删除等操作。
在网页解析上，由于Android的系统webkit机制，只能采用HttpRequest的请求机制获取到XML信息，并在JS脚本中对其进行解析，并根据节点类型把解析出来的数据存放在localStorage中。
4.2.3 系统的实现
4.2.4 系统测试
龙源期刊网
主界面显示的是订阅项目以及天气预报，点击主界面的“添加订阅”按钮，可以进入到订阅管理界面，在这个页面可以取消已订阅的项目，也可以添加信息新的项目；在主界面点击“设置”按钮可进入信息设置界面，包含皮肤，连接方式，清空订阅等。在主界面各订阅项，可分别进入到对应的新闻阅读界面。从系统的测试结果来看，界面流畅清晰，数据稳定，能很好满足用户对外观和性能的要求。
5 总结
经测试，该文系统在Android系统能很好地运行，如果想将其运行于iphone或widowsphone手机，只需通过phonegap和对应的SDK进行适配转换就能在不同的移动平台正常使用，很好地满足我们进行跨平台移动开发。该文在研究现有移动平台开发方案和最新移动开发技术的基础上，利用Phonegap，HTML5和jQuery Mobile技术设计并实现基于Android平台的RSS阅读器，为以后移动web开发提供了一定的参考价值。
参考文献：
[1] Zibula Alexander，Majchrzak Tim A. Cross-platform development using HTML5， jQuery
mobile， and PhoneGap： Realizing a smart meter application[C]. 8th International Conference on
Web Information Systems and Technologies. Porto， Portugal： Springer Verlag ，2013： 16-33.
[2] PhoneGap[EB/OL].http：///.
[3] Giulio Mobile First Look [M].UK：Packt Publishing，2011，9-16.
[4] Jon Mobile [M].USA：O'Reilly Media，2011，9-22.
[5] Jeremy 5 for web designers [M].New York：A Book Apart，2010，51-82.
[6] Mark 5： Up and Running [M].USA：O'Reilly Media，2010，5-15.
[7] Smutny development tools and cross-platform solutions[C]. Proceedings of the
2012 13th International Carpathian Control Conference. High Tatras， Slovakia：IEEE，2012：653-656.
版权声明：本文标题：基于HTML5跨平台移动应用的研究与实践 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://roclinux.cn/p/1709774398a546115.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论