常用HTML5移動(dòng)應(yīng)用框架

摘要：該文針對(duì)目前比較流行的HTML5移動(dòng)應(yīng)用框架進(jìn)行了闡述，分別介紹了jQTouch、Sencha Touch、jQuery Mobile、Titanium Mobile等四種常用的框架特點(diǎn)及運(yùn)用，并重點(diǎn)以Sencha Touch運(yùn)用過程為例。

關(guān)鍵詞： HTML5；移動(dòng)應(yīng)用框架；Sencha Touch

中圖分類號(hào)：TP393 文獻(xiàn)標(biāo)識(shí)碼：A 文章編號(hào)：1009-3044（2013）10-2304-02

隨著現(xiàn)代智能手機(jī)的快速發(fā)展，移動(dòng)Web前端開發(fā)技術(shù)也呈多樣化，移動(dòng)Web前端開發(fā)技術(shù)也快速發(fā)展，融合了HTML5和CSS3技術(shù)給用戶帶來了較好的用戶體驗(yàn)，因?yàn)橐苿?dòng)瀏覽器的性能加強(qiáng)了很多，移動(dòng)app的框架也擴(kuò)展了很多。對(duì)于移動(dòng) Web的開發(fā)人員來說，切換框架代價(jià)很高：因?yàn)閯?dòng)畫的轉(zhuǎn)換，工具欄、按鈕、列表的顯示，以及線下存儲(chǔ)等都很麻煩。因?yàn)榇蟛糠稚鲜龉δ芏际切录夹g(shù)，以及這些領(lǐng)域的技術(shù)還在迅速地改變。在過去的兩年里，觸屏設(shè)備飛速增長，特別是智能手機(jī)用戶迅速增長。開發(fā)者和設(shè)計(jì)師開始重新思考他們的網(wǎng)頁應(yīng)用，因?yàn)閕OS和Android設(shè)備的迅速增長，以提供更好的觸屏體驗(yàn)。移動(dòng)Web應(yīng)用相對(duì)于本地的App有很多優(yōu)勢，雖然在設(shè)計(jì)和開發(fā)上存在一定的挑戰(zhàn)。

1 jQTouch-使用WebKit瀏覽器的HTML5移動(dòng)應(yīng)用程序框架

jQTouch是一個(gè)開放源碼的jQuery的Ajax庫，使開發(fā)者能夠很容易地建立起來和優(yōu)化iPhone的相關(guān)應(yīng)用，它適用于建立其它有觸摸功能的設(shè)備使用。像Goolgle的Android應(yīng)用，都是可以應(yīng)用到j(luò)QTouch的。jQTouch這個(gè)jQuery插件讓你只利用HTML、CSS和JavaScript就能夠創(chuàng)建可在WebKit 瀏覽器上如在iPhone、Android、Palm Pre等上運(yùn)行的手機(jī)應(yīng)用程序。

jQTouch易用性強(qiáng)，相關(guān)文檔也很全面。它的特色是在使用HTML，CSS和JavaScript創(chuàng)建iPhone App方面擁有出色的能力。在其官方網(wǎng)站上觀看其演示時(shí)，你會(huì)發(fā)現(xiàn)，用一般的瀏覽器無法正常瀏覽其中的很多功能，因?yàn)樗菫閕Phone進(jìn)行了改造和優(yōu)化，很多動(dòng)畫和觸摸事件在一般瀏覽器中是不能正常觀看的。但可以在Mac上或是Safari瀏覽器上看到真正的效果。因此，使用jQTouch構(gòu)建基于iPhone的應(yīng)用變得更加容易，只需要開發(fā)者有一點(diǎn)HTML、CSS和JavaScript的知識(shí)即可。隨著iPhone，IPod，ITouch等設(shè)備的使用日益增多，jQTouch無疑為移動(dòng)Web開發(fā)減少了很多工作，特別是在樣式、兼容性方面明顯得到改善，大大增強(qiáng)了應(yīng)用效果。

jQTouch使用漸進(jìn)增強(qiáng)的方案，在相應(yīng)的HTML頂層來實(shí)現(xiàn)像iPhone那樣的用戶體驗(yàn)。它的使用簡單，為用戶提供了一個(gè)基礎(chǔ)的小工具集和良好的動(dòng)畫方案，開發(fā)人員只要通過編程控制其行為即可。 jQTouch支持HTML頁面標(biāo)簽驅(qū)動(dòng)，對(duì)移動(dòng)設(shè)備視圖效果的切換具有較好的實(shí)現(xiàn)能力，專為WebKit內(nèi)核的瀏覽器打造，可以利用瀏覽器的專有功能達(dá)到頁面渲染的目的。開發(fā)時(shí)使用的代碼量不是很多，如果所開發(fā)的項(xiàng)目中，使用者大部分是WebKit內(nèi)核瀏3+sO1RApjna4CAFoisWL4/tHhjQUeQWk3AZeCSMBnyQ=覽器的話，可以考慮使用此框架來進(jìn)行開發(fā)。jQTouch是目前移動(dòng)Web開發(fā)的最好框架之一。雖然它的開發(fā)者David Kaneda已經(jīng)離開了這個(gè)項(xiàng)目轉(zhuǎn)而投入Sencha，但Jonathan Stark接手了jQTouch的相關(guān)工作，并且對(duì)代碼進(jìn)行了優(yōu)化和補(bǔ)充。

2 Sencha Touch-構(gòu)建移動(dòng)HTML5應(yīng)用的領(lǐng)先框架

Sencha，翻譯意為“煎茶”，是指一種在日本很流行的綠茶品種，在Java開發(fā)的傳統(tǒng)中，它代表了軟件開發(fā)的一個(gè)新的水平階段。目前Sencha Touch已經(jīng)成為構(gòu)建移動(dòng)HTML5應(yīng)用的領(lǐng)先框架。Sencha Touch是一個(gè)基于HTML5的移動(dòng)應(yīng)用開發(fā)框架，其前身是Ext。使用Sencha Touch，開發(fā)者可以構(gòu)建在iPhone、Android和BlackBerry touch等設(shè)備上運(yùn)行的移動(dòng)web應(yīng)用，其效果看起來如同本地應(yīng)用。

該框架最大的特色就像它的名字一樣，增強(qiáng)了對(duì)手持移動(dòng)設(shè)備觸控操作的強(qiáng)力支持，除了支持瀏覽器標(biāo)準(zhǔn)的觸摸事件，還額外添加了如 tap， double tap， swipe， tap-hold， pinch 和 rotate 等富有吸引力的操作事件，使用戶體驗(yàn)到與原生程序一樣的效果。

1）下載設(shè)置開發(fā)環(huán)境，引入Sencha Touch開發(fā)包。

4）使用safari或者chrome瀏覽器查看結(jié)果。

3 jQuery Mobile

JQuery一直以來它都是為桌面瀏覽器設(shè)計(jì)的，是非常流行的富客戶端及Web應(yīng)用程序開發(fā)中使用的JavaScript類庫，沒有特別為移動(dòng)應(yīng)用程序設(shè)計(jì)。jQuery Mobile是一個(gè)新的項(xiàng)目用來添補(bǔ)在移動(dòng)設(shè)備應(yīng)用上的缺憾。它在jQuery框架的基礎(chǔ)上，提供了一定范圍的用戶接口和特性，開發(fā)人員可以在移動(dòng)應(yīng)用上使用。使用該框架可以節(jié)省大量的js代碼開發(fā)時(shí)間。

jQuery Mobile 是 jQuery 在手機(jī)上和平板設(shè)備上的版本。jQuery Mobile 不僅會(huì)給主流移動(dòng)平臺(tái)帶來jQuery核心庫，而且擁有完整統(tǒng)一的jQuery移動(dòng)UI框架。支持全球主流的移動(dòng)平臺(tái)，如Android和Apple iOS。JQuery mobile構(gòu)建于JQuery以及 JQuery UI類庫之上，為前端開發(fā)人員提供了一個(gè)兼容所有主流移動(dòng)設(shè)備平臺(tái)的統(tǒng)一UI接口系統(tǒng)。擁有出色伸縮性，輕量化以及漸進(jìn)增強(qiáng)特性與可訪問性。JQuery mobile針對(duì)的是所有的觸摸屏幕設(shè)備與平板電腦。它為移動(dòng)Web網(wǎng)站的構(gòu)建提供了一系列布局工具，如工具欄、導(dǎo)航，及UI組件，如列表和標(biāo)簽組件等，內(nèi)置了6套不同樣式的CSS主題框架，可以組合應(yīng)用于移動(dòng)web。

JQuery Mobile可以輕松地幫助我們實(shí)現(xiàn)非常好看的，可跨設(shè)備的Web應(yīng)用程序，JQuery Mobile開發(fā)的Web應(yīng)用像Native App，其中包含了Web應(yīng)用中的各種常用部件，如對(duì)話框、表單、列表、按鈕、工具條等，JQuery Mobile使用Ajax加載頁面，實(shí)現(xiàn)炫麗的頁面切換效果

4 Titanium Mobile

TitaniumStudio是Appcelerator公司開發(fā)的一款基于Eclipse的，使開發(fā)者利用Javascript來快速開發(fā)移動(dòng)應(yīng)用程序的跨平臺(tái)的集成開發(fā)平臺(tái)。它提供了豐富的SDK，基于TitaniumStudio，開發(fā)者無需學(xué)習(xí)Objective-C和Java，只用Javascript就可以快速開發(fā)出iOS和Android移動(dòng)應(yīng)用程序。

使用Titanium Mobile可降低開發(fā)成本。寫一套代碼，可以同時(shí)在iOS和Andorid兩個(gè)平臺(tái)上構(gòu)建自己的應(yīng)用。Titanium Mobile平臺(tái)具有良好無限擴(kuò)展性，為開發(fā)者提供了無限可能。Titanium Mobile提供了優(yōu)良的云服務(wù)。平臺(tái)集成了一整套基于Amazon EC2，S3的云服務(wù)，包括user，photo，chat，push notifications，social integration等等。開發(fā)者如果選擇TitaniumStudio集成的云服務(wù)，那么可以只專注于前端的開發(fā)，快速開發(fā)出一款用戶交互的移動(dòng)應(yīng)用程序，完全可以無需構(gòu)建自己的數(shù)據(jù)庫，應(yīng)用服務(wù)器。良好的開發(fā)環(huán)境及人氣，全球有超過30萬的開發(fā)者在TitianiumStudio上開發(fā)移動(dòng)應(yīng)用程序。

參考文獻(xiàn)：

[1] Ajit Kumar. Sencha Touch Cookbook[Z].2009.

[2] 徐會(huì)生，何啟偉，康愛媛.深入淺出Ext JS[M].北京： 人民郵電出版社，2009.

[3] 廖煜榮.Sencha Touch跨平臺(tái)學(xué)習(xí)教程[Z].2011.

[4] Gilmore W J. Big three mobile Web development framework which is suitable for you[Z].2012.