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

華英 唐菲

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

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

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

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

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

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

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

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

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

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

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

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

3.1前端頁面開發(fā)

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

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

本課題實(shí)現(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í)我們不需要顯示數(shù)據(jù)表中的所有數(shù)據(jù)，這就需要對(duì)數(shù)據(jù)組件中的數(shù)據(jù)進(jìn)行篩選，如教師端我的問卷中只需要顯示當(dāng)前用戶發(fā)布的問卷，這就需要通過用戶ID對(duì)數(shù)據(jù)表進(jìn)行篩選，WeX5提供給我們兩種篩選方法。一種通過設(shè)置list的filter屬性，設(shè)定過濾條件表達(dá)式，列表中即可顯示篩選后的數(shù)據(jù)。一種通過setFilter方法進(jìn)行過濾，后者可以設(shè)定更加多樣的篩選條件。

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

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

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

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

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

myChart.setOption（option）；

4結(jié)論

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

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