基于HTML5+jQuery Mobile的移动Web应用开发研究

覃凤萍

（桂林理工大学南宁分校，广西 南宁 530111）

基于HTML5+jQuery Mobile的移动Web应用开发研究

覃凤萍

（桂林理工大学南宁分校，广西 南宁 530111）

随着iphone、Android等智能设备的迅速普及，移动Web技术逐渐成为关注的新热点，传统信息类和电子商务网站因市场需求向移动终端转移。使用jQuery Mobile和HTML5做移动Web应用开发，具有开发简单，发布周期短、跨平台跨设备的优点。文章对jQuery Mobile和HTML5的移动Web应用开发做了介绍和分析。

HTML5；移动Web应用；jQuery Mobile

1 引言

随着现代智能手机的快速发展，移动Web前端开发技术也呈多样化，移动Web前端开发技术也快速发展，开发者如果要迅速地开发某种应用，就需要一种高效且通用的开发技术。HTML5技术的多种新特性和跨平台特点正迎合了移动平台多样性的需要。

2 HTML5和移动Web应用

Web的应用开发存在以下几点优势：开发效率高，成本地；跨平台应用，界面风格统一；调试和发布方便，一次编写，云端升级；无需安装或更新。将原生SDK应用和基于Web应用进行比较来发，两种开发模式各有优点。目前原生SDK应用能发挥出智能手机特性的最大效果，而基于web应用则更时候一些传统的Web站点建议移动Web版本，html5的推进，对于移动Web的发展有着重要的影响。

2.2基于HTML5的移动Web应用

2.1移动Web应用的发展

现在，移动智能设备，之所以能够风靡全球，除了因其具有强大的硬件特征外，更重要的是它们拥有庞大的软件应用质量，特别在APP Store和Android market上的应用都是基于两个公司（APPLE和Google）提供SDK给第三方开发者进行开发的。基于原生SDK在开发具有更好的用户体验和交互操作并且不受网络限制，节省带宽成本，充分发挥设备硬件和操作系统的特性等优势，但仍存在平台间移植困难，开发周期长，维护成本 高等不足之处。除了基于SDK开发方式外，移动智能设备还支持web开发方式，尤其HTML5的不断发展，让移动Web应用变得更加强大。与原生SDK开发相比，基于

基于Webkit内核的浏览器的一个最大特点就是支持HTML5和CSS3标准，基于HTML5、CSS3和Javascript的移动应用程序将会是未来的趋势。HTML5标准最大的变化是支持web绘图功能，如图形绘制、路径绘制、变形、绘画等。HTML5标准中的多媒体，VIDEO视频和AUDIO音频正好弥补了多年来需要插件才能播放FLASHE模式的缺陷。为了满足本地存储数据的需求，HTML5标准中新增了两种存储机制web storage和web SQL Database，解决了移动信号不好时可以进行离线应用的问题。使用地理定位能够实时获取你当前在地图上所在的位置，这将充分发挥移动设备的特点。

因为有了HTML5的支持，越来越多的开发者开始研究基于移动平台的Web应用框架，例如jQuery Mobile、senchatouch、 phonegap框架。基于HTML5移动框架存在两种不同的开发模式：基于传统Web的开发模式和基于组件式的Web开发。基于传统Web的开发模式，就是在传统Web网站上，根据移动设备平台的特点展示其移动版的Web站点，目前最能体现该开发模式优势的Web框架是jQuery Mobile。

3 jQuery Mobile简介

由于有了HTML5的支持，越来越多的Web开发者开始研究基于移动平台的Web应用框架，其中基于HTML5的移动开发平台jQuery Mobile是一款开源的JavaScript类库框架，是jQuery在手机上和平板设备上的版本，它提供了一个移动设备平台的统一接口工具。jQuery Mobile是基于jQuery 、HTML5和CSS3构建的，其目的是提供一个丰富的、交互性强的接口来兼容不同的移动平台。

jQuery Mobile以“write less,do more”为目标，为所有的主流移动操作系统平台提供高度统一的移动界面框架，开发者不需要再为每种移动平台编写单独的应用程序，它用于帮助开发者开发基于移动设备的Web应用程序，其特征包括：

（1）基于jQuery核心语法，易于学习。

（2）支持所有主流移动平台。

（3）采用基于HTML5标记元素驱动配置jQuery Mobile各种组件，不需要JavaScript配置，减少了JavaScript脚本数量。

（4）自动初始化。jQuery Mobile通过使用HTML5标准的data-role属性来对相应的插件或组件初始化。

（5）简单的API。基于触摸屏设备优化，并且提供一个适应不同的移动设备的动态触摸用户界面。

（6）可配置的主题风格。框架提供了6中不同颜色的主题风格，配置简单，并且还支持如text-shadow、box-shadow、gradients等CSS3特征。

在进入jQuery Mobile项目开发前，需要先准备好以下几个类库包。jQuery.js基础包、jQuery Mobile.js移动扩展包、jQuery Mobile.css；这两个javascript类库文件和CSS文件都可以在jQuery和只jQuery Mobile官方网站下载得到。新建一个标准的HTML5网页，将前面提到的类库包文件导入到网页中。接着在页面中加入的导航列表、按钮、滑动条等内容，将以统一的风格显示，并且可以使用data-theme属性选择显示风格。

4 jQuery Mobile和HTML5的优缺点

对于初学者来说，利用jQuery Mobile开发网站或应用程序的开发，上手迅速并支持快速迭代。与Android和iOS相比，使用jQuery Mobile和HTML5构建你的UI和逻辑会比在原生系统下构建快得多。而且开发出来的网站可以通过浏览器访问，避免麻烦的应用商店审批过程以及调试、构建、升级带来的痛苦。支持跨平台和跨设备开发，开发出来的应用程序马上可以在Android和IOS上工作，同样也可以在其他平台上工作。作为一个独立开发者，不需要为各平台的应用程序进行单独维护的工作。

但是jQuery Mobile毕竟还是一个发展中的框架，它的应用程序有不少缺点。比如运行速度比原生应用程序慢，在不同平台上的表现不同，有不少漏洞，运行在浏览器上的JavaScript不能完全地访问设备的很多特性。可以将应用程序通过类似PhoneGap这样的工具将几个版本部署到不同的操作系统上，帮助解决这些问题。

5 结束语

jQuery Mobile以及HTML5都还在发展中，发展前景大家拭目以待。使用jQuery Mobile和HTML5作为移动应用程序的开发平台具有开发简单，发布周期短、跨平台跨设备的优点。虽然HTML5不适用于所有类型的应用程序，而对于简单的内容显示和数据输入类型的应用程序，它能作为原生程序的有效补充。

[1] 唐俊开.HTML5移动Web开发指南[M].北京:电子工业出版社,2012.

[2] 陶国荣.JQuery Mobile权威指南[M].北京:机械工业出版社,2012.

[3] Alexander Schmitz.jQuery Mobile 1.4.5 Released[M/OL]. http://jquerymobile.com/,2014-10-31.

[4] 潘晓梦,邓建华,苏厚勤.一种跨平台移动应用方案的研究与实践[J].计算机应用与软件,2013,30(1):180-182.

[5] 徐尤华,熊传玉.JQuery Mobile1.2移动web开发方法研究[J].信息技术,2013,(8):85-88.

Study of mobile web application development based on HTML5 and jQuery Mobile

With the rapidly growing popularity of smart devices such as iphone and Android,mobile web technology has gradually become a new hot spot of concern,traditional site will be transferred to the mobile terminal due to market demand . Using jQuery Mobile and HTML5 to do mobile web application development, with the development of simple, short release cycle, cross-platform, cross-platform advantages . In this paper, jQuery Mobile and HTML5 mobile web application development made a presentation and analysis.

HTML5; mobile web application; jQuery Mobile

TP311.52

A

1008-1151(2015)07-0009-02

2015-06-10

桂林理工大学南宁分校2014年课程改革与建设立项建设项目“网页设计基础”（2014KGB01）。

覃凤萍（1984－），女（壮族），桂林理工大学南宁分校助教，研究方向计算机软件与理论。