SenchaTouch框架在移動Web開發技術中的研究與應用

王麗娜+孫艷華+張靜

【摘 要】移動互聯網技術發展迅速，跨平臺解決方案是移動應用開發面臨的最大問題。論文提出了基于Web技術的Secha Touch框架實現移動應用跨平臺開發的方法，Sencha Touch框架融合了移動應用程序開發領域尖端技術，通過瀏覽器內核WebKit渲染，以Web應用的形式展現了本地應用的風格。

【關鍵詞】移動應用；HTML5；Sencha Touch；跨平臺；移動Web開發

引言

目前移動互聯網技術迅速發展，移動生活或辦公是未來的主旋律，基于移動智能終端的移動應用開發是當前IT行業的熱門技術。移動APP是基于相應的操作系統之上的，主流操作系統包括：Android和IOS。針對不同的操作系統開發本地應用，開發或維護的成本高，主要體現在以下幾方面：

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

在移動應用開發的過程中面臨的主要問題是跨平臺實現一次開發部署多處運行，Web應用可解決移動跨平臺問題，傳統Web開發不能滿足智能移動終端的打包發布特點，且與終端瀏覽器的兼容性也是主要問題之一。雖然各智能終端系統不同，但其瀏覽器都是WebKit內核。基于HTML5技術的SenchaTouch框架融合了移動應用程序開發領域尖端技術和Web開發特點，對移動應用開發實現跨平臺提供了技術支持[1]。

1.基于SenchaTouch框架跨平臺技術

1.1 SenchaTouch的跨平臺實現

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

1.2 HTML5的跨平臺技術應用

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

HTML5還提供了移動Web應用程序的離線緩存技術，其關鍵在于離線資源配置清單（cache manifest）、網絡在線監測（navigator.online）。通過HTML5的離線緩存技術實現離線訪問，意味著更快的訪問速度，在效率上有大的提高。

2.基于SenchaTouch的移動Web技術框架

2.1移動Web技術簡介

移動Web是指基于移動網絡的Web服務，它是基于移動互聯網的。移動網絡是指使用移動設備，如手機、平板電腦或其他智能終端連接到公共網絡，相對于PC，它沒有一個固定的網絡連接。移動Web應用正是基于移動互聯網中的Web服務開發出的應用，結合實際的業務場景，隨時隨地為客戶提供便捷的服務。

2.2 基于Sencha Touch框架的移動Web技術架構

基于Sencha Touch框架的移動Web開發系統結構分為三層架構：表現層、業務邏輯層、數據服務層，系統架構圖如圖1所示：

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

終端HTML 端：

服務器端：

Class getMeetDataAction（）{ //服務器端業務實現類

……

……//代碼省略；

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

}

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

在展現層，通過HTML5、CSS、JavaScript等Web技術實現本地應用的表現層，直接由WebKit引擎來渲染，并通過瀏覽器打開。

在系統實現的過程中加載所需的Sencha Touch。代碼如下：

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

3.結束語

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

參考文獻：

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

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

[3] 陸鋼，李慧云.HTML5技術應用現狀與發展趨勢研究[J].廣東通信技術，2013，5：2-5.

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

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

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

作者簡介：

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