WeX5開發框架下班級量化考評App的設計與實現

張遠平

摘? 要： WeX5是目前流行的App開發平臺，支持快速開發各類輕量級的App應用。通過App進行班級量化考評管理，能充分發揮移動互聯網和智能手機的優勢，快捷便利地為班級管理提供服務。從提升教育管理效率的需求出發，使用WeX5開發工具開發一款滿足班級量化考評需求的App應用軟件，實現統一登錄、掃碼錄入、數據查詢、信息推送和數據匯總等功能。實踐證明，該App能大大提高學校教育管理的效率。

關鍵詞： WeX5; 班級量化考評; App; 設計與實現

中圖分類號：TP319? ? ? ? ? 文獻標識碼：A? ? ?文章編號：1006-8228（2020）11-66-04

Abstract： WeX5 is a current popular App development platform that supports the rapid development of various lightweight App applications. The quantitative evaluation management of class by using an App can give full play to the advantages of mobile Internet and smart phone， and provide services for class management quickly and conveniently. Starting from the need for improving the efficiency of education management， WeX5 development tool is used to develop the App software that meets the quantitative evaluation needs of class， and the functions of unified login， scan code entry， data query， information push， and data summary are realized. Practice has proved that the App can greatly improve the efficiency of education management in the school.

Key words： WeX5; class quantitative evaluation; App; design and implementation

0 引言

班級量化考評是指在制定完善的評比規則的情況下，通過采集班集體或學生個人的評價數據，在班級管理過程中實施量化考核的過程。為了提高班級的管理水平，學校需要進一步豐富和完善考評手段，使考評管理實現制度化、科學化和信息化?，F階段，有一些學校在班級考評管理方面還存在一定的問題。①管理思想固化，因循守舊，缺乏創新思維，師生信息化素養有待提高。②操作方式落后。班級評比登記以手工登記為主，再錄入相應的系統供用戶瀏覽、查詢，造成信息發布不及時，獲取信息渠道不暢等，有時還會因此而延誤教學進度或最佳時機。

“互聯網+教育”理念對教育信息化產生了持續推動作用，智能手機在校園逐步普及，教育類App的應用已經滲透到教育教學管理的各個環節。對學校而言，如何利用手機為教育教學服務，是當前的一個熱點議題[1]。班級量化考評App正是發揮移動互聯網的優勢，提高教育管理效果的一個有效途徑。

1 需求分析

1.1 功能性需求

班級量化考評App要求實現單點登錄、統一認證，并給各管理部門分配權限，實現學生考勤、課堂紀律、衛生檢查、集會檢查、儀容儀表檢查、宿舍評分、處分管理等功能。該App能對考評情況進行分類展現和查詢，并對數據進行匯總，通過生成階段性得分、學期總分等報表信息，為教育管理決策提供服務。同時，通過對數據的采集、分析和提取，生成學生的德育電子檔案，為教育大數據的應用提供支撐。

應用操作上，力求快捷、簡便，輸入方式包括手工輸入和二維碼掃描輸入，信息輸入后能第一時間推送到手機端，體現智能手機信息處理的高效性。

1.2 非功能性需求

選用目前App開發的主流工具，縮短開發周期，使維護成本可控。要求App部署在云服務器，運行穩定可靠，提供掃碼下載安裝。界面操作美觀實用，符合日常操作習慣。

根據需求分析報告，整理得到系統功能結構圖如圖1所示。

2 相關開發平臺

2.1 WeX5開發平臺

WeX5是北京起步科技（justep）公司推出的基于H5的開源、免費的App快速開發平臺。它支持安卓App、蘋果App、微信公眾號、webApp及其他各種輕應用的開發[2]。WeX5提供了豐富的組件，采用可視化的設計模式和開放式的開發架構，前端支持HTML5+CSS+JS，后端支持asp、php、.net等，能輕松對接即時通訊、推送、支付等插件。

2.2 極光推送（JPush）平臺

極光推送（JPush）是獨立的第三方云推送平臺，能為移動應用開發者提供移動消息推送服務。開發者只需在客戶端集成極光推送 SDK，即可輕松地把 Push功能添加到App中[4]。WeX5開發環境集成了極光推送插件，使開發者能快速開發出具備推送功能的App應用。

3 課堂考勤與紀律登記功能模塊的設計與實現

3.1 數據庫相關表設計

在本例中，采用WeX5文件包下的mysql作為后臺數據庫，運行heidiMysql數據庫管理工具，創建班級量化考評數據庫classManage。本模塊涉及的數據庫表包括班級信息表（class）、學生信息表（student）、考勤信息表（checkon）、考勤項目表（checkonitem）、課堂紀律登記表（classviolation）、課堂紀律登記項目表（classviolationitem）、課堂時間表（classtimetable）、用戶表（user）等，以考勤信息表的設計為例，如表1所示。

3.2 部分功能的實現

3.2.1 登錄頁面的實現

系統登錄的功能是對用戶的登錄信息進行驗證，如用戶登錄成功，則在手機中保存登錄信息，使該App能實現用戶的自動登錄。登錄驗證功能使用了數據組件的setFilter方法，對用戶輸入的賬號信息進行匹配，如果登錄信息能夠匹配賬戶表，則進入目標頁面，同時調用sessionStorage的setItem方法記錄用戶的信息，以實現自動登錄的功能。其主要代碼如下：

var uData=this.comp（"userData"）;

var userid=this.comp（"idInput"）.val（）;

var userpwd=this.comp（"passwordInput"）.val（）;

uData.setFilter（"f1"，"userID='"+userid+"'

and password='"+userpwd+"'"）;

uData.refreshData（）;

if（uData.count（）>0） {

var row=uData.getFirstRow（）;

var username=row.val（"userName"）;

var userbranch=row.val（"branch"）;

var userUUID={};

userUUID.userID=userid;

userUUID.userName=username;

userUUID.userBranch=userbranch;

localStorage.setItem（"userUUID"，JSON.stringify（userUUID））;

this.getParent（）.comp（"contents1"）.getContent

（"myContent"）.active（）; }

3.2.2 考勤與紀律數據登記頁面的實現

⑴ 手工輸入方式

在文本框中輸入學生的學號，獲取學生的信息，并顯示學生的照片進行對比，同時根據當前時間智能化地生成選項，用戶選擇違紀項目進行登記，把采集到的違紀信息保存到數據庫中。以考勤登記的實現為例，其部分代碼如下：

var checkonD=this.comp（“checkonData”）;

checkonD.newData（{

“defaultValues” ： [ {

“ID”：justep.UUID.createUUID（），

“stuNo”：this.comp（“stuNoinput”）.val（），

“stuName”：$（this.getElementByXid

（“stuNameoutput”））.html（），

“stuClass”： $（this.getElementByXid

（“stuClassoutput”））.html（），

“checkonItem”：$（this.getElementByXid

（“selectItem”））.find（“option：selected”）.text（），

“checkonScore”：this.comp（“selectItem”）.val（），

“checkonWeek”：this.comp（“selectweek”）.val（），

“checkonWeekDay”：this.comp（“selectweekday”）.val（），

“checkonSection”：this.comp（“selectsection”）.val（），

“checkonMemo”：this.comp（“memotextarea”）.val（），

“recorduser”：userLocal.userName

} ]

}）;

checkonD.saveData（）;

⑵ 掃描二維碼輸入方式

跟手工輸入方式的區別在于通過掃描學生名單或校卡上的二維碼采集信息，輸入效率相對較高。實現二維碼掃描主要是通過調用cordova插件實現的，其主要代碼如下：

require（"$UI/system/lib/cordova/cordova"）;

require（"cordova！com.justep.cordova.plugin

.barcodescanner"）; //引用二維碼插件

Model.prototype.scanBtnClick=function（event） {

var me=this;

function onSuccess（result） {

me.comp（"stuNoinput"）.val（result.text）;

}

function onError（error） {

justep.Util.hint（"掃描失??！"）;

}

justep.barcodeScanner.scan（onSuccess， onError）;

};

3.2.3 消息推送功能的實現

⑴ 在需要實現極光推送功能的w頁面中，添加對極光插件的引用，并調用jpush.js文件建立實例。引用極光推送插件的代碼如下：