基于Hybrid模式的校園問卷調(diào)查系統(tǒng)的應(yīng)用研究

華英 唐菲

Hybrid App主要以Web+Native兩者相互調(diào)用為主，兼具了Native App良好用戶體驗，也兼具了Web App跨平臺開發(fā)低成本的優(yōu)勢。校園問卷調(diào)查系統(tǒng)是以WeX5平臺設(shè)計開發(fā)的HTML5移動應(yīng)用，并以APP的外殼呈現(xiàn)。

隨著網(wǎng)絡(luò)環(huán)境的不斷改善和終端性能的不斷提高，校園用戶對移動應(yīng)用和無線網(wǎng)絡(luò)的依賴遠遠高于PC終端和有線網(wǎng)絡(luò)。無論學生還是教師，他們的網(wǎng)絡(luò)行為在時間、地點、需求等方面都呈現(xiàn)出碎片化和個性化趨勢。

1開發(fā)模式的選擇

1.1原生本地應(yīng)用開發(fā)模式

Native APP基于移動設(shè)備底層操作系統(tǒng)，不需要借助外部平臺或第三方框架即可直接使用由移動設(shè)備平臺提供的各種應(yīng)用接口（API），可以直接訪問移動設(shè)備的硬件資源。可以打造具有很強的交互性和完美用戶體驗、性能穩(wěn)定、執(zhí)行效率高等優(yōu)勢的移動應(yīng)用。但Native APP必須選用和操作系統(tǒng)版本匹配的語言進行開發(fā)，編譯后的可執(zhí)行文件也僅適用于該操作系統(tǒng)版本。這就導致開發(fā)、更新和維護的周期長，任務(wù)重，成本高。

1.2 Web應(yīng)用開發(fā)模式

Web應(yīng)用使用HTML、CSS和JavaScript技術(shù)實現(xiàn)應(yīng)用的開發(fā)，并最終在瀏覽器上運行。雖然Web APP和Native APP呈現(xiàn)效果類似，但執(zhí)行方式卻完全不同。Web應(yīng)用無需提前編譯，每次運行時依靠瀏覽器引擎解析頁面。無論移動開發(fā)平臺是Android或者iOS，只需開發(fā)一個版本即可實現(xiàn)跨平臺運行，而且免除了在應(yīng)用商店不斷更新程序包的過程，大大提高了開發(fā)、更新和維護的效率。但Web APP很難訪問移動終端的硬件設(shè)備，也無法調(diào)用移動平臺的各種API，同時因為運行時解析，對設(shè)備性能和網(wǎng)絡(luò)環(huán)境的要求都較高，用戶體驗度不高。

1.3混合應(yīng)用開發(fā)模式

Native APP和Web APP各有優(yōu)勢，又都有劣勢。Hybrid APP結(jié)合了前兩種開發(fā)模式的優(yōu)勢，即使用跨平臺Web技術(shù)開發(fā)應(yīng)用程序，又可以直接訪問移動設(shè)備硬件接口。Hybrid APP通常是基于第三方跨平臺移動應(yīng)用引擎框架進行開發(fā)，從開發(fā)層面實現(xiàn)“一次開發(fā)，多處運行”的機制，成為真正適合跨平臺的開發(fā)。例如國外的PhoneGap、Titanium、Sencha，還有國內(nèi)的AppCan、Rexsee、WeX5等等。Hybrid App開發(fā)模式正在被越來越多的公司和開發(fā)者所認同，逐漸成為主流的移動應(yīng)用開發(fā)模式。

2開發(fā)平臺的選擇

本課題選用的是WeX5跨平臺移動開發(fā)框架，該框架前端采用HTML5、CSS3、JavaScript標準，使用AMD規(guī)范的RequireJS、Bootstrap、jQuery等技術(shù)；基于PhoneGap框架，利用Cordova引擎提供的API可以輕松訪問移動設(shè)備硬件；支持Java、.NET、PHP等多種類型的后端；提供一鍵部署功能，可以將開發(fā)的APP輕松部署到CloudX5云服務(wù)器上。WeX5頁面包含w文件、JS文件和CSS文件3個頁面，w頁面由組件構(gòu)成，定義頁面的展現(xiàn)，JS文件以模塊化的方式定義JS類，定義頁面功能，CSS文件定義頁面樣式。WeX5支持單頁Web應(yīng)用模式，提供了Shell為每個頁面實現(xiàn)路由，作為前端事件總線，負責頁面間事件的派發(fā)和調(diào)度，可以使用戶體驗到Native APP的速度和流暢。本課題即是利用WeX5平臺開發(fā)的一個單頁Web應(yīng)用。

3問卷調(diào)查系統(tǒng)的實現(xiàn)

3.1前端頁面開發(fā)

前端頁面開發(fā)需要定義界面元素和用戶交互。WeX5提供了豐富的UI組件體系，包括布局組件、數(shù)據(jù)組件、表單組件……還提供了一個可視化、組件化、拖曳式的基于eclipse的IDE，完全做到了所見即所得。WeX5使用組件封裝了HTML標簽，基本包含了界面開發(fā)中需要用到的所有部件。校園問卷調(diào)查系統(tǒng)中所有的界面元素都使用WeX5提供的內(nèi)置組件。

數(shù)據(jù)組件和列表組件是本課題中非常重要的兩個組件。數(shù)據(jù)組件用于存儲頁面上的數(shù)據(jù)，并利用其他展現(xiàn)組件展示給用戶。WeX5中提供了data和baasData兩種數(shù)據(jù)組件，data用于綁定靜態(tài)數(shù)據(jù)，baasData用于綁定后臺數(shù)據(jù)庫數(shù)據(jù)。數(shù)據(jù)組件可以實現(xiàn)雙向感知，與之綁定的展現(xiàn)組件數(shù)據(jù)發(fā)生變化時，綁定的數(shù)據(jù)也同時更新，反之亦然。數(shù)據(jù)組件需要先添加到model組件下，再設(shè)置tableName屬性綁定數(shù)據(jù)表，model組件提供了整個頁面生命周期中觸發(fā)的事件。

本課題實現(xiàn)的校園問卷調(diào)查系統(tǒng)，無論問卷列表頁面或者問卷答題頁面，都需要顯示多條數(shù)據(jù)。列表組件list用于在界面上顯示多條數(shù)據(jù)，設(shè)置list的data屬性指向要顯示的數(shù)據(jù)組件。list組件下面是listTemplateUI，再下面是li，用于顯示的span或input組件都放在li下，并設(shè)置其bind-text屬性即可綁定數(shù)據(jù)表中的字段。有時我們不需要顯示數(shù)據(jù)表中的所有數(shù)據(jù)，這就需要對數(shù)據(jù)組件中的數(shù)據(jù)進行篩選，如教師端我的問卷中只需要顯示當前用戶發(fā)布的問卷，這就需要通過用戶ID對數(shù)據(jù)表進行篩選，WeX5提供給我們兩種篩選方法。一種通過設(shè)置list的filter屬性，設(shè)定過濾條件表達式，列表中即可顯示篩選后的數(shù)據(jù)。一種通過setFilter方法進行過濾，后者可以設(shè)定更加多樣的篩選條件。

3.2后端服務(wù)開發(fā)

前端頁面需要數(shù)據(jù)時，向后端服務(wù)發(fā)送請求，后端服務(wù)訪問數(shù)據(jù)庫并將查詢結(jié)果返回前端頁面。WeX5中可以自定義服務(wù)器端，也可通過Baas來，Bass是為移動互聯(lián)網(wǎng)應(yīng)用開發(fā)而提供的云服務(wù)。利用WeX5中的Bass服務(wù)，無需編寫后端服務(wù)器代碼，既能快速實現(xiàn)數(shù)據(jù)的請求和返回。本課題的后端服務(wù)主要是對數(shù)據(jù)基本的CRUD操作，因此使用WeX5提供的Bass服務(wù)快速實現(xiàn)后端服務(wù)開發(fā)。僅需在首選項設(shè)置中添加數(shù)據(jù)庫連接，然后在Bass目錄下創(chuàng)建包和服務(wù)，為每個數(shù)據(jù)表添加action即可。WeX5提供queryAction和saveAction兩種action，前者用來查詢數(shù)據(jù)，后者用來保存數(shù)據(jù)，可以滿足基本的數(shù)據(jù)請求需求。

3）3.3WeX5不僅提供了豐富的組件和快捷的后端服務(wù)開發(fā)，而且能第三方插件進行集成。本課題對問卷調(diào)查結(jié)果的統(tǒng)計分析需要采用圖表方式實現(xiàn)，WeX5集成Echarts可以快速實現(xiàn)該功能。Echarts是一個純Javascript的圖表庫，支持柱狀圖、折線圖等12類圖表和7個交互組件，可以流暢的在PC和移動設(shè)備上運行。

WeX5集成Echarts圖表的方式也非常簡單，將Echarts資源目錄dist復制到項目目錄下，在需要引用該插件的JS文件中添加require（"./dist/echarts-all"）即可。修改option中各鍵對應(yīng)的值，設(shè)定圖標內(nèi)容、顯示數(shù)值等。最后通過如下語句將圖表顯示在頁面中，其中chart為顯示組件的xid值：

var myChart=echarts.init（this.getElementByXid（'chart'））；

myChart.setOption（option）；

4結(jié)論

隨著移動設(shè)備性能的不斷提升和網(wǎng)絡(luò)環(huán)境的日益優(yōu)化，Hybrid APP在移動端的用戶體驗和執(zhí)行效率都有了很大的提升，兼于它本身的跨平臺、開發(fā)維護成本低等優(yōu)勢，Hybrid開發(fā)模式正逐漸成為移動開發(fā)的主流模式。WeX5是一個Hybrid APP開發(fā)框架，為開發(fā)者提供了豐富的組件、強大的后端服務(wù)和便捷的插件，對開發(fā)成本不高、開發(fā)周期短的校園應(yīng)用是一個不錯的選擇。

（作者單位：蘇州市職業(yè)大學）