基于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－），女（壯族），桂林理工大學南寧分校助教，研究方向計算機軟件與理論。