覃鳳萍

（桂林理工大學(xué)南寧分校，廣西 南寧 530111）

基于HTML5+jQuery Mobile的移動Web應(yīng)用開發(fā)研究

覃鳳萍

（桂林理工大學(xué)南寧分校，廣西 南寧 530111）

隨著iphone、Android等智能設(shè)備的迅速普及，移動Web技術(shù)逐漸成為關(guān)注的新熱點(diǎn)，傳統(tǒng)信息類和電子商務(wù)網(wǎng)站因市場需求向移動終端轉(zhuǎn)移。使用jQuery Mobile和HTML5做移動Web應(yīng)用開發(fā)，具有開發(fā)簡單，發(fā)布周期短、跨平臺跨設(shè)備的優(yōu)點(diǎn)。文章對jQuery Mobile和HTML5的移動Web應(yīng)用開發(fā)做了介紹和分析。

HTML5；移動Web應(yīng)用；jQuery Mobile

1 引言

隨著現(xiàn)代智能手機(jī)的快速發(fā)展，移動Web前端開發(fā)技術(shù)也呈多樣化，移動Web前端開發(fā)技術(shù)也快速發(fā)展，開發(fā)者如果要迅速地開發(fā)某種應(yīng)用，就需要一種高效且通用的開發(fā)技術(shù)。HTML5技術(shù)的多種新特性和跨平臺特點(diǎn)正迎合了移動平臺多樣性的需要。

2 HTML5和移動Web應(yīng)用

Web的應(yīng)用開發(fā)存在以下幾點(diǎn)優(yōu)勢：開發(fā)效率高，成本地；跨平臺應(yīng)用，界面風(fēng)格統(tǒng)一；調(diào)試和發(fā)布方便，一次編寫，云端升級；無需安裝或更新。將原生SDK應(yīng)用和基于Web應(yīng)用進(jìn)行比較來發(fā)，兩種開發(fā)模式各有優(yōu)點(diǎn)。目前原生SDK應(yīng)用能發(fā)揮出智能手機(jī)特性的最大效果，而基于web應(yīng)用則更時(shí)候一些傳統(tǒng)的Web站點(diǎn)建議移動Web版本，html5的推進(jìn)，對于移動Web的發(fā)展有著重要的影響。

2.2基于HTML5的移動Web應(yīng)用

2.1移動Web應(yīng)用的發(fā)展

現(xiàn)在，移動智能設(shè)備，之所以能夠風(fēng)靡全球，除了因其具有強(qiáng)大的硬件特征外，更重要的是它們擁有龐大的軟件應(yīng)用質(zhì)量，特別在APP Store和Android market上的應(yīng)用都是基于兩個(gè)公司（APPLE和Google）提供SDK給第三方開發(fā)者進(jìn)行開發(fā)的?；谠鶶DK在開發(fā)具有更好的用戶體驗(yàn)和交互操作并且不受網(wǎng)絡(luò)限制，節(jié)省帶寬成本，充分發(fā)揮設(shè)備硬件和操作系統(tǒng)的特性等優(yōu)勢，但仍存在平臺間移植困難，開發(fā)周期長，維護(hù)成本 高等不足之處。除了基于SDK開發(fā)方式外，移動智能設(shè)備還支持web開發(fā)方式，尤其HTML5的不斷發(fā)展，讓移動Web應(yīng)用變得更加強(qiáng)大。與原生SDK開發(fā)相比，基于

基于Webkit內(nèi)核的瀏覽器的一個(gè)最大特點(diǎn)就是支持HTML5和CSS3標(biāo)準(zhǔn)，基于HTML5、CSS3和Javascript的移動應(yīng)用程序?qū)俏磥淼内厔?。HTML5標(biāo)準(zhǔn)最大的變化是支持web繪圖功能，如圖形繪制、路徑繪制、變形、繪畫等。HTML5標(biāo)準(zhǔn)中的多媒體，VIDEO視頻和AUDIO音頻正好彌補(bǔ)了多年來需要插件才能播放FLASHE模式的缺陷。為了滿足本地存儲數(shù)據(jù)的需求，HTML5標(biāo)準(zhǔn)中新增了兩種存儲機(jī)制web storage和web SQL Database，解決了移動信號不好時(shí)可以進(jìn)行離線應(yīng)用的問題。使用地理定位能夠?qū)崟r(shí)獲取你當(dāng)前在地圖上所在的位置，這將充分發(fā)揮移動設(shè)備的特點(diǎn)。

因?yàn)橛辛薍TML5的支持，越來越多的開發(fā)者開始研究基于移動平臺的Web應(yīng)用框架，例如jQuery Mobile、senchatouch、 phonegap框架?；贖TML5移動框架存在兩種不同的開發(fā)模式：基于傳統(tǒng)Web的開發(fā)模式和基于組件式的Web開發(fā)?；趥鹘y(tǒng)Web的開發(fā)模式，就是在傳統(tǒng)Web網(wǎng)站上，根據(jù)移動設(shè)備平臺的特點(diǎn)展示其移動版的Web站點(diǎn)，目前最能體現(xiàn)該開發(fā)模式優(yōu)勢的Web框架是jQuery Mobile。

3 jQuery Mobile簡介

由于有了HTML5的支持，越來越多的Web開發(fā)者開始研究基于移動平臺的Web應(yīng)用框架，其中基于HTML5的移動開發(fā)平臺jQuery Mobile是一款開源的JavaScript類庫框架，是jQuery在手機(jī)上和平板設(shè)備上的版本，它提供了一個(gè)移動設(shè)備平臺的統(tǒng)一接口工具。jQuery Mobile是基于jQuery 、HTML5和CSS3構(gòu)建的，其目的是提供一個(gè)豐富的、交互性強(qiáng)的接口來兼容不同的移動平臺。

jQuery Mobile以“write less,do more”為目標(biāo)，為所有的主流移動操作系統(tǒng)平臺提供高度統(tǒng)一的移動界面框架，開發(fā)者不需要再為每種移動平臺編寫單獨(dú)的應(yīng)用程序，它用于幫助開發(fā)者開發(fā)基于移動設(shè)備的Web應(yīng)用程序，其特征包括：

（1）基于jQuery核心語法，易于學(xué)習(xí)。

（2）支持所有主流移動平臺。

（3）采用基于HTML5標(biāo)記元素驅(qū)動配置jQuery Mobile各種組件，不需要JavaScript配置，減少了JavaScript腳本數(shù)量。

（4）自動初始化。jQuery Mobile通過使用HTML5標(biāo)準(zhǔn)的data-role屬性來對相應(yīng)的插件或組件初始化。

（5）簡單的API?；谟|摸屏設(shè)備優(yōu)化，并且提供一個(gè)適應(yīng)不同的移動設(shè)備的動態(tài)觸摸用戶界面。

（6）可配置的主題風(fēng)格?？蚣芴峁┝?中不同顏色的主題風(fēng)格，配置簡單，并且還支持如text-shadow、box-shadow、gradients等CSS3特征。

在進(jìn)入jQuery Mobile項(xiàng)目開發(fā)前，需要先準(zhǔn)備好以下幾個(gè)類庫包。jQuery.js基礎(chǔ)包、jQuery Mobile.js移動擴(kuò)展包、jQuery Mobile.css；這兩個(gè)javascript類庫文件和CSS文件都可以在jQuery和只jQuery Mobile官方網(wǎng)站下載得到。新建一個(gè)標(biāo)準(zhǔn)的HTML5網(wǎng)頁，將前面提到的類庫包文件導(dǎo)入到網(wǎng)頁中。接著在頁面中加入的導(dǎo)航列表、按鈕、滑動條等內(nèi)容，將以統(tǒng)一的風(fēng)格顯示，并且可以使用data-theme屬性選擇顯示風(fēng)格。

4 jQuery Mobile和HTML5的優(yōu)缺點(diǎn)

對于初學(xué)者來說，利用jQuery Mobile開發(fā)網(wǎng)站或應(yīng)用程序的開發(fā)，上手迅速并支持快速迭代。與Android和iOS相比，使用jQuery Mobile和HTML5構(gòu)建你的UI和邏輯會比在原生系統(tǒng)下構(gòu)建快得多。而且開發(fā)出來的網(wǎng)站可以通過瀏覽器訪問，避免麻煩的應(yīng)用商店審批過程以及調(diào)試、構(gòu)建、升級帶來的痛苦。支持跨平臺和跨設(shè)備開發(fā)，開發(fā)出來的應(yīng)用程序馬上可以在Android和IOS上工作，同樣也可以在其他平臺上工作。作為一個(gè)獨(dú)立開發(fā)者，不需要為各平臺的應(yīng)用程序進(jìn)行單獨(dú)維護(hù)的工作。

但是jQuery Mobile畢竟還是一個(gè)發(fā)展中的框架，它的應(yīng)用程序有不少缺點(diǎn)。比如運(yùn)行速度比原生應(yīng)用程序慢，在不同平臺上的表現(xiàn)不同，有不少漏洞，運(yùn)行在瀏覽器上的JavaScript不能完全地訪問設(shè)備的很多特性?？梢詫?yīng)用程序通過類似PhoneGap這樣的工具將幾個(gè)版本部署到不同的操作系統(tǒng)上，幫助解決這些問題。

5 結(jié)束語

jQuery Mobile以及HTML5都還在發(fā)展中，發(fā)展前景大家拭目以待。使用jQuery Mobile和HTML5作為移動應(yīng)用程序的開發(fā)平臺具有開發(fā)簡單，發(fā)布周期短、跨平臺跨設(shè)備的優(yōu)點(diǎn)。雖然HTML5不適用于所有類型的應(yīng)用程序，而對于簡單的內(nèi)容顯示和數(shù)據(jù)輸入類型的應(yīng)用程序，它能作為原生程序的有效補(bǔ)充。

[1] 唐俊開.HTML5移動Web開發(fā)指南[M].北京:電子工業(yè)出版社,2012.

[2] 陶國榮.JQuery Mobile權(quán)威指南[M].北京:機(jī)械工業(yè)出版社,2012.

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

[4] 潘曉夢,鄧建華,蘇厚勤.一種跨平臺移動應(yīng)用方案的研究與實(shí)踐[J].計(jì)算機(jī)應(yīng)用與軟件,2013,30(1):180-182.

[5] 徐尤華,熊傳玉.JQuery Mobile1.2移動web開發(fā)方法研究[J].信息技術(shù),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

桂林理工大學(xué)南寧分校2014年課程改革與建設(shè)立項(xiàng)建設(shè)項(xiàng)目“網(wǎng)頁設(shè)計(jì)基礎(chǔ)”（2014KGB01）。

覃鳳萍（1984－），女（壯族），桂林理工大學(xué)南寧分校助教，研究方向計(jì)算機(jī)軟件與理論。