SenchaTouch框架在移動Web開發(fā)技術(shù)中的研究與應(yīng)用

王麗娜+孫艷華+張靜

【摘 要】移動互聯(lián)網(wǎng)技術(shù)發(fā)展迅速，跨平臺解決方案是移動應(yīng)用開發(fā)面臨的最大問題。論文提出了基于Web技術(shù)的Secha Touch框架實現(xiàn)移動應(yīng)用跨平臺開發(fā)的方法，Sencha Touch框架融合了移動應(yīng)用程序開發(fā)領(lǐng)域尖端技術(shù)，通過瀏覽器內(nèi)核WebKit渲染，以Web應(yīng)用的形式展現(xiàn)了本地應(yīng)用的風(fēng)格。

【關(guān)鍵詞】移動應(yīng)用；HTML5；Sencha Touch；跨平臺；移動Web開發(fā)

引言

目前移動互聯(lián)網(wǎng)技術(shù)迅速發(fā)展，移動生活或辦公是未來的主旋律，基于移動智能終端的移動應(yīng)用開發(fā)是當(dāng)前IT行業(yè)的熱門技術(shù)。移動APP是基于相應(yīng)的操作系統(tǒng)之上的，主流操作系統(tǒng)包括：Android和IOS。針對不同的操作系統(tǒng)開發(fā)本地應(yīng)用，開發(fā)或維護的成本高，主要體現(xiàn)在以下幾方面：

首先，開發(fā)語言不同，Android系統(tǒng)是Java框架進行開發(fā)，而IOS系統(tǒng)是Object-C語言開發(fā)；其次，移動應(yīng)用系統(tǒng)在版本升級或更新時均要提供對不同版本的支持；再者，在系統(tǒng)的維護階段，如有功能變更，針對不同操作系統(tǒng)需要一個功能多次開發(fā)，無疑增大了開發(fā)成本降低工作效率。

在移動應(yīng)用開發(fā)的過程中面臨的主要問題是跨平臺實現(xiàn)一次開發(fā)部署多處運行，Web應(yīng)用可解決移動跨平臺問題，傳統(tǒng)Web開發(fā)不能滿足智能移動終端的打包發(fā)布特點，且與終端瀏覽器的兼容性也是主要問題之一。雖然各智能終端系統(tǒng)不同，但其瀏覽器都是WebKit內(nèi)核?；贖TML5技術(shù)的SenchaTouch框架融合了移動應(yīng)用程序開發(fā)領(lǐng)域尖端技術(shù)和Web開發(fā)特點，對移動應(yīng)用開發(fā)實現(xiàn)跨平臺提供了技術(shù)支持[1]。

1.基于SenchaTouch框架跨平臺技術(shù)

1.1 SenchaTouch的跨平臺實現(xiàn)

SenchaTouch是基于HTML5、JavaScript、CSS的MobileApp框架，可以讓W(xué)ebAPP體驗上更接近本地APP，但同時也是Web應(yīng)用程序框架[2]。Sencha Touch是通過瀏覽器的核心引擎WebKit來渲染，Android和IOS的瀏覽器內(nèi)核均是WebKit[3]。Sencha Touch包含移動應(yīng)用開發(fā)的基本特性：滑動觸摸屬性、自適應(yīng)布局、數(shù)據(jù)集成，提供了強大的數(shù)據(jù)包，通過Ajax、JSONp、YQL等方式綁定到組件模版，寫入本地離線存儲[4]。數(shù)據(jù)集成的特性對實現(xiàn)表現(xiàn)層與數(shù)據(jù)層的邏輯提供技術(shù)支持，并且同時支持上線操作與離線操作的Web應(yīng)用程序開發(fā)[5]。SenchaTouch其輸出完全基于Web，開發(fā)者可以部署自己的應(yīng)用程序而不必等待本地市場的批準(zhǔn)或驗收。傳統(tǒng)Web應(yīng)用程序結(jié)合新技術(shù)框架Sencha Touch的移動跨平臺因素，實現(xiàn)了移動門戶系統(tǒng)在各移動操作系統(tǒng)之間一次開發(fā)、一次部署、多處運行。

1.2 HTML5的跨平臺技術(shù)應(yīng)用

HTML5提供了移動Web應(yīng)用程序本地存儲的API程序接口，與傳統(tǒng)的本地cookies存儲不同，HTML5支持兩種新的存儲方式，一種是Web Storage，另一種是Web SQL Databases。此種方式無論是在效率上還是程序的健壯性方面都有很大的提升。

HTML5還提供了移動Web應(yīng)用程序的離線緩存技術(shù)，其關(guān)鍵在于離線資源配置清單（cache manifest）、網(wǎng)絡(luò)在線監(jiān)測（navigator.online）。通過HTML5的離線緩存技術(shù)實現(xiàn)離線訪問，意味著更快的訪問速度，在效率上有大的提高。

2.基于SenchaTouch的移動Web技術(shù)框架

2.1移動Web技術(shù)簡介

移動Web是指基于移動網(wǎng)絡(luò)的Web服務(wù)，它是基于移動互聯(lián)網(wǎng)的。移動網(wǎng)絡(luò)是指使用移動設(shè)備，如手機、平板電腦或其他智能終端連接到公共網(wǎng)絡(luò)，相對于PC，它沒有一個固定的網(wǎng)絡(luò)連接。移動Web應(yīng)用正是基于移動互聯(lián)網(wǎng)中的Web服務(wù)開發(fā)出的應(yīng)用，結(jié)合實際的業(yè)務(wù)場景，隨時隨地為客戶提供便捷的服務(wù)。

2.2 基于Sencha Touch框架的移動Web技術(shù)架構(gòu)

基于Sencha Touch框架的移動Web開發(fā)系統(tǒng)結(jié)構(gòu)分為三層架構(gòu)：表現(xiàn)層、業(yè)務(wù)邏輯層、數(shù)據(jù)服務(wù)層，系統(tǒng)架構(gòu)圖如圖1所示：

業(yè)務(wù)邏輯層與展現(xiàn)層數(shù)據(jù)傳輸采用JSON數(shù)據(jù)格式，輕量級的數(shù)據(jù)傳輸符合移動互聯(lián)網(wǎng)技術(shù)的特點，對于HTML5交互移動通訊門戶采用JSNI方式與本地門戶進項交互處理，通過JSNI與能力統(tǒng)一接口及應(yīng)用鑒權(quán)等實現(xiàn)能力調(diào)用。在Sencha Touch框架中采用JSONP跨域請求，使頁面在不同域中的服務(wù)器請求數(shù)據(jù)，具體實現(xiàn)如下：

終端HTML 端：

服務(wù)器端：

Class getMeetDataAction（）{ //服務(wù)器端業(yè)務(wù)實現(xiàn)類

……

……//代碼省略；

parseResponse（{“Name”：”Meet”，”Id”：”？”，”Rank”：7}）；

}

在技術(shù)架構(gòu)中用到了HTML5的離線緩存技術(shù)，用戶登陸后進入新聞瀏覽模塊時將遠端數(shù)據(jù)同步到本地，以離線資源包或離線清單的形式結(jié)合HTML5本地數(shù)據(jù)庫進行存儲。如此便不必頻繁重復(fù)的與遠端數(shù)據(jù)庫服務(wù)器進行數(shù)據(jù)交互，節(jié)省流量的同時也提高了用戶瀏覽的相應(yīng)速度。

在展現(xiàn)層，通過HTML5、CSS、JavaScript等Web技術(shù)實現(xiàn)本地應(yīng)用的表現(xiàn)層，直接由WebKit引擎來渲染，并通過瀏覽器打開。

在系統(tǒng)實現(xiàn)的過程中加載所需的Sencha Touch。代碼如下：

加載所需的CSS、JavaScript文件后開發(fā)人員可根據(jù)UI需求編寫自己的外部js文件。

3.結(jié)束語

論文研究了基于Sencha Touch框架移動Web應(yīng)用開發(fā)技術(shù)，實現(xiàn)了一次開發(fā)、一次部署、多處運行。與傳統(tǒng)基于Web開發(fā)的平臺相比，此技術(shù)實現(xiàn)的移動APP操作更加便捷、智能。企業(yè)移動應(yīng)用時當(dāng)前比較有發(fā)展前景的，如何更好的解決移動應(yīng)用跨平臺問題還需進一步的思考和研究。

參考文獻：

[1]Sencha Touch Mobile JavaScript Framework[EB/OL].[2011-11-05].http：//www.sencha. com/products/touch/.

[2] 邵長遠，高春玲，李睿.基于Sencha Touch的移動閱讀器設(shè)計與實現(xiàn)[J].圖書館理論與實踐，2013，3：85-88.

[3] 陸鋼，李慧云.HTML5技術(shù)應(yīng)用現(xiàn)狀與發(fā)展趨勢研究[J].廣東通信技術(shù)，2013，5：2-5.

[4]黃永慧，陳程凱.HTML5在移動應(yīng)用開發(fā)上的應(yīng)用前景[J].計算機技術(shù)與發(fā)展，2013，23（7）：208-210.

[5] 王小龍，趙志威，屠曉光，李唐艷.基于瀏覽器端MVC的富客戶端技術(shù)的應(yīng)用與研究[J].自動化與儀器儀表，2013，3：26-29.

[6] 王麗娜，孫艷華.基于移動智能終端的離線緩存技術(shù)研究[J].電腦知識與技術(shù)，2015，33：27-28.

作者簡介：

王麗娜（1987.2—），女，山東菏澤人，碩士研究生，講師，研究方向：數(shù)據(jù)庫信息系統(tǒng)。endprint