基于微信小程序的評價工具設(shè)計*

王淵博，李 晶，馬世鵬

(西安郵電大學(xué) 通信與信息工程學(xué)院，陜西 西安 710121)

0 引言

近年來，小程序已被應(yīng)用于課程教學(xué)[1-2]、數(shù)字校園[3-6]、運維監(jiān)控[7]與測量系統(tǒng)[8]等方面.微信用戶規(guī)模廣，并且依賴于它的小程序又是輕量化的應(yīng)用[9,10]，與HTML5和App相比，微信小程序在手機應(yīng)用開發(fā)上具有明顯優(yōu)勢[11].

本文設(shè)計一種基于微信小程序的學(xué)生勞動評價工具，試圖實現(xiàn)學(xué)生勞動教育的過程性和實時性評價.

1 需求分析

本研究的核心功能是對中小學(xué)生的勞動行為進行記錄和評價，為了更具廣泛性，將評價類別擴展到多方面的校園行為，如儀容儀表、課間活動、到校與離校紀律等.主要內(nèi)容有：

(1)建立學(xué)生二維碼.二維碼所含信息為學(xué)生的編號、姓名、年級、班級信息，不含其他隱私信息.二維碼印制或貼在校服上.

(2)當教職工在校園中發(fā)現(xiàn)學(xué)生的特定行為時，通過小程序掃描學(xué)生身上的二維碼，識別學(xué)生信息，然后在小程序中對具體行為進行實時記錄，并給出贊揚或批評結(jié)論.

(3)統(tǒng)計和展示評價內(nèi)容.存儲評價記錄，并分類展示全校、個人的評價記錄，形成學(xué)生的過程性評價材料.評價數(shù)據(jù)可導(dǎo)出存檔.

2 總體設(shè)計

2.1 客戶端

小程序作為客戶端，采用視圖層，邏輯層分離的開發(fā)模式，視圖層用于展示內(nèi)容，獲取用戶輸入等，具體對應(yīng)于各頁面的wxml、wxss源文件[12]；邏輯層用于實現(xiàn)業(yè)務(wù)邏輯，包括網(wǎng)絡(luò)請求、數(shù)據(jù)處理、緩存管理等，對應(yīng)于各頁面的js源文件.總體設(shè)計結(jié)構(gòu)如圖1所示.

圖1 總體設(shè)計結(jié)構(gòu)Fig.1 Overall design structure

小程序主要有四個頁面：首頁,提供掃碼功能和其他頁面的導(dǎo)航功能;評價頁,針對某個學(xué)生記錄其行為并做出評價;統(tǒng)計展示頁，展示學(xué)生個人的評價記錄和對全校的評價數(shù)據(jù)作統(tǒng)計；個人中心頁，進行注冊和個人信息維護.小程序呈現(xiàn)的每個頁面都以四個形式化文件存在：wxml布局文件、wxss樣式文件、java script交互文件、json配置文件.

2.2 服務(wù)端

服務(wù)端主要實現(xiàn)業(yè)務(wù)數(shù)據(jù)處理、數(shù)據(jù)存儲等功能.服務(wù)端基于J2EE技術(shù)開發(fā)，采用MVC分層設(shè)計模式，分為控制器層、業(yè)務(wù)邏輯層、數(shù)據(jù)訪問層，各層均面向接口編程.控制器層負責解析HTTP請求并向客戶端返回數(shù)據(jù)，如評價內(nèi)容提交請求、注冊登錄請求等；業(yè)務(wù)邏輯層實現(xiàn)具體的業(yè)務(wù)規(guī)則，如評價內(nèi)容提交流程、評價數(shù)據(jù)格式、評價查詢條件等；數(shù)據(jù)訪問層進行數(shù)據(jù)庫的操作.各頁面的js程序向服務(wù)端進行業(yè)務(wù)請求后，服務(wù)端的控制器層受理請求，然后依次調(diào)用業(yè)務(wù)邏輯層、數(shù)據(jù)訪問層的方法，實現(xiàn)業(yè)務(wù)請求的響應(yīng).

3 功能實現(xiàn)

基于小程序的網(wǎng)絡(luò)服務(wù)的業(yè)務(wù)流程是這樣的：小程序頁面向服務(wù)端發(fā)起數(shù)據(jù)查詢和數(shù)據(jù)提交請求，服務(wù)端進行數(shù)據(jù)處理與數(shù)據(jù)庫訪問，然后將響應(yīng)數(shù)據(jù)返回給小程序展示[13].下面按照這個過程介紹軟件功能的具體實現(xiàn)，由于各業(yè)務(wù)模塊在實現(xiàn)時遵循同樣的設(shè)計模式和程序結(jié)構(gòu)，因此以不同的模塊為例來說明實現(xiàn)的方法.

3.1 網(wǎng)絡(luò)請求

3.1.1 請求與響應(yīng)雖然小程序與服務(wù)端進行網(wǎng)絡(luò)交互的內(nèi)容不同，但網(wǎng)絡(luò)通信的方式卻是相同的.小程序通過wx.request接口向服務(wù)端提交和拉取數(shù)據(jù).代碼基本結(jié)構(gòu)如表1所示.

表1 網(wǎng)絡(luò)通信基本結(jié)構(gòu)

服務(wù)端會對請求做出響應(yīng)，響應(yīng)數(shù)據(jù)包含在上面的“res”中，res.data包含了有效的響應(yīng)數(shù)據(jù)，以json格式進行存儲，如表2所示.

表2 響應(yīng)數(shù)據(jù)格式

result的值可以是多種類型，如果是做刪除操作，那么可以是整形值，用1表示成功，0表示失敗.如果是查詢操作，就需要返回查詢結(jié)果，以查詢學(xué)生評價記錄為例，操作失敗時result賦值為null,操作成功則賦值為json數(shù)組，如表3所示.

表3 數(shù)據(jù)體result的json數(shù)據(jù)格式

3.1.2 cookie管理本設(shè)計規(guī)定教職工初次使用小程序時需要注冊登錄，登陸成功后才會被授權(quán)使用小程序的掃碼和評價等功能.通過cookie機制可以使登陸成功的狀態(tài)具有一定時效性，在時效內(nèi)無須重復(fù)登錄就可以訪問服務(wù)端資源.通過模擬瀏覽器中cookie的實現(xiàn)，與登錄相關(guān)的cookie信息設(shè)計為：name=“campus.username”，value=“登錄用戶名”，path=“/”.path的值設(shè)為“/”是為了在請求與用戶關(guān)聯(lián)的資源時，能夠?qū)⒌卿浵嚓P(guān)cookie發(fā)送出去，例如要訪問評價記錄，它的資源路徑為/comment，客戶端首先提取需要發(fā)送的所有cookie，包括登錄相關(guān)cookie，然后檢測這些cookie是否在有效期，若有效則發(fā)送，若失效則不發(fā)送.服務(wù)端收到登錄cookie信息后，重新設(shè)定cookie有效時間，然后將此cookie封裝到響應(yīng)頭中發(fā)送給客戶端，這樣cookie的有效期就得以更新.

3.2 服務(wù)端分層設(shè)計不同的業(yè)務(wù)模塊，在服務(wù)端都是按照控制器層、業(yè)務(wù)邏輯層、數(shù)據(jù)訪問層三層來設(shè)計，下面分別介紹三個層次的設(shè)計方法.

3.2.1 控制器層小程序端發(fā)起的網(wǎng)絡(luò)請求，首先是經(jīng)過控制器層處理.控制器層由不同業(yè)務(wù)模塊的Servlet類構(gòu)成，它們繼承自HttpServlet，在doGet()和doPost()中分別處理get請求和post請求，與請求有關(guān)的信息封裝在HttpServletRequest類中，以上兩個方法是請求受理的入口，在其中獲取客戶端傳遞的參數(shù)值和數(shù)據(jù)，交由業(yè)務(wù)邏輯層處理，然后將處理結(jié)果再反饋回來，最后服務(wù)端對客戶端的請求做出響應(yīng)，響應(yīng)由HttpServletResponse類完成.下面以掃碼識別業(yè)務(wù)模塊為例，介紹控制器層的處理過程.

學(xué)生二維碼作為身份識別碼，包含學(xué)生的基本信息，以json數(shù)據(jù)格式組織，如{"id":6,"grade":"2","class":"2","name":"胡飛"}，表示編號為6的2年級2班的胡飛同學(xué).通過調(diào)用小程序接口wx.scanCode()掃描二維碼，識別出基本信息后，會以學(xué)生id作為查詢條件再向服務(wù)端請求匹配更多的學(xué)生信息.

學(xué)生信息資源地址為“/student”，操作包括查詢、添加、刪除，如表4所示.

表4 學(xué)生信息業(yè)務(wù)請求接口

控制器層的處理過程如圖2所示.

圖2 學(xué)生信息業(yè)務(wù)控制器層處理流程Fig.2 processing flow of controller layer of student information business

3.2.2 業(yè)務(wù)邏輯層控制器層根據(jù)業(yè)務(wù)請求類型進行業(yè)務(wù)分發(fā)后，業(yè)務(wù)邏輯層就要去處理業(yè)務(wù).以評價記錄模塊為例，業(yè)務(wù)邏輯層接口定義如表5所示.

表5 評價記錄模塊業(yè)務(wù)邏輯層接口

接口參數(shù)使用java bean(RecordProfile)傳遞數(shù)據(jù)，這些實體類的屬性與相應(yīng)的數(shù)據(jù)庫表中的字段對應(yīng).這些評價記錄接口，用于數(shù)據(jù)增、刪、改、查，最終要調(diào)用數(shù)據(jù)訪問層對應(yīng)的接口方法，將返回值交由控制器層處理，如查詢學(xué)生所有的評價記錄，業(yè)務(wù)邏輯層調(diào)用List queryRecordByStudent(long studentId,byte recordType)，查詢到記錄數(shù)據(jù)，封裝到List類型并傳遞給控制器層，控制器層將其轉(zhuǎn)換為json數(shù)組形式，數(shù)組元素的內(nèi)容為RecordProfile實體映射的json對象，然后將該json數(shù)組封裝到約定的json格式中，作為服務(wù)端的響應(yīng)數(shù)據(jù)發(fā)送到客戶端.

3.2.3 數(shù)據(jù)訪問層數(shù)據(jù)訪問層的主要任務(wù)是實現(xiàn)數(shù)據(jù)的“增、刪、改、查”，它的接口通常與業(yè)務(wù)邏輯層的相對應(yīng)，在其中要構(gòu)造操作數(shù)據(jù)庫的sql語句.

從數(shù)據(jù)庫得到的數(shù)據(jù)，根據(jù)不同的用途封裝成不同的形式，如：全校評價記錄統(tǒng)計，需要用實體類封裝，然后放入List集合中；學(xué)生、教師的基本信息，需要用實體類封裝；用戶的登錄狀態(tài)信息，只需要將部分字段值封裝在Map類型.以評價模塊為例，該模塊主要涉及評價記錄的添加，接口定義為：Int addRecordItem(RecordProfile record,long studentId)，一個參數(shù)是評價信息RecordProfile ,另一個是學(xué)生身份信息studentId.當業(yè)務(wù)邏輯層的接口調(diào)用addRecordItem后，它最終要去調(diào)用數(shù)據(jù)訪問層對應(yīng)的接口方法insert(final String sql,Object args)，sql參數(shù)代表數(shù)據(jù)庫操作語句，它的值需要構(gòu)造："insert into record_profile(student_id,record_type,record_class,record_content) VALUES(?,?,?,?)"，其中“？”變量代表的值來源于實體RecordProfile相應(yīng)的屬性值.

3.3 頁面展示

小程序在數(shù)據(jù)展示時涉及兩個問題，一是數(shù)據(jù)的獲取，二是頁面的設(shè)計.數(shù)據(jù)獲取與顯示可以是直接從服務(wù)端請求數(shù)據(jù)并顯示，也可以從本地緩存讀取數(shù)據(jù)顯示，前者已經(jīng)做了介紹，下面就來介紹數(shù)據(jù)緩存和頁面設(shè)計的方法.

3.3.1 數(shù)據(jù)緩存為了減少網(wǎng)絡(luò)請求次數(shù)，可以將一些數(shù)據(jù)緩存在本地使用，如教師與學(xué)生信息、評價類型信息等，但對經(jīng)常變化的數(shù)據(jù)，則不能進行緩存，比如實時評價記錄.在進行緩存時，為特定的業(yè)務(wù)請求定義一個緩存時間，過期后需要重新發(fā)起網(wǎng)絡(luò)請求并更新緩存，未過期則直接從緩存獲取數(shù)據(jù).除過緩存過期時要更新緩存，在進行一些添加、刪除、更新數(shù)據(jù)的請求時也要進行緩存更新.如本設(shè)計的評價記錄業(yè)務(wù)模塊，在對學(xué)生行為評價前，通過網(wǎng)絡(luò)請求查詢到的評價記錄可以進行緩存，只要不添加新的記錄，那么頁面上展示的記錄就是從緩存獲取的，但是若用戶要刪除或添加一項記錄，那么在網(wǎng)絡(luò)請求成功后，在本地的緩存記錄中同時要添加或刪除這一項記錄，使得本地數(shù)據(jù)與服務(wù)端的保持一致.另外，在用戶點擊刷新按鈕等強制更新情形下，不管緩存有沒有過期，都需要重新請求數(shù)據(jù)，更新緩存.

本地緩存可以存儲在微信小程序的用戶空間中，寫入緩存時調(diào)用wx.setStorageSync().如要對“批評”記錄進行緩存，在wx.request的success函數(shù)中添加代碼：wx.setStorageSync(‘critic’, records)，相應(yīng)地，如果要讀取這部分緩存內(nèi)容，則調(diào)用接口wx.getStorageSync(‘critic’)來實現(xiàn).

3.3.2 界面設(shè)計

(1)頁面模板

界面的布局和樣式主要由每個頁面的wxml文件和wxss文件決定.由于本設(shè)計中的每個頁面的框架結(jié)構(gòu)都是固定的：頂部導(dǎo)航欄，采用系統(tǒng)的設(shè)置，包括回退鍵、標題名稱；中間部分的內(nèi)容由各個頁面決定，代表著頁面的功能；底部導(dǎo)航欄，四個導(dǎo)航選項分別為四個頁面提供入口.這種布局結(jié)構(gòu)可以模板形式存在，不同的頁面在此基礎(chǔ)上進行擴充和具體化.

(2)視圖組件

首頁頁面聚焦掃碼功能，使用image組件及bindtap屬性處理用戶的點擊掃碼行為.對于評價頁面，需要展示學(xué)生的基本信息，以及被贊揚和批評的次數(shù)，還要選擇評價類型和評價結(jié)論，記錄具體行為等.統(tǒng)計展示頁面，用于展示從網(wǎng)絡(luò)或緩存提取的數(shù)據(jù)，內(nèi)容動態(tài)增加.這兩個頁面中包含的元素較多，通過使用滾動視圖scroll-view，依賴wxml的動態(tài)渲染技術(shù)，通過標簽屬性wx:if和wx:for進行內(nèi)容的篩選和重復(fù)渲染，使得顯示內(nèi)容隨著數(shù)據(jù)的增多而自動擴展.在對評價類別做選擇時，使用picker-view組件可以給用戶呈現(xiàn)一個內(nèi)容選擇視圖，并不全部顯示可選擇的項目，而是在滑動時可見，這樣就能夠節(jié)省頁面空間，通過為picker-view組件的bindchange屬性指定的事件處理函數(shù)，在用戶選擇項目后能夠?qū)x擇的結(jié)果進行識別和處理.

4 實際應(yīng)用

圖3所示為評價工具實現(xiàn)的部分頁面，所有頁面都使用前述的模板框架，分為頂部導(dǎo)航欄、中間主體功能區(qū)、底部導(dǎo)航欄.圖3(a)為進入小程序后首先呈現(xiàn)的頁面，通過點擊“掃一掃”圖標，啟動掃碼識別功能，在正確解析學(xué)生二維碼包含的信息后，跳轉(zhuǎn)到圖3(b)所示的評價頁面，該頁面顯示待評價學(xué)生的姓名、班級、被贊揚和批評次數(shù)等信息，用戶可以選擇評價類型，如勞動評價、儀容儀表、課間表現(xiàn)等，然后根據(jù)這些一級類型目錄進一步選擇二級類型，之后選擇記錄類型，包括贊揚和批評，最后輸入具體的事件并提交，這就是一次完整的評價過程.提交成功后，跳轉(zhuǎn)至圖3(c)的個人評價記錄頁面，展示學(xué)生被評價次數(shù)、具體評價內(nèi)容的記錄，如要繼續(xù)評價，點擊頂部回退鍵返回到評價頁面.在評價頁面中，還可以通過點擊贊揚次數(shù)和批評次數(shù)圖標，分別跳轉(zhuǎn)到學(xué)生的贊揚和批評記錄展示頁面.在所有頁面的底部導(dǎo)航欄，都可以通過點擊導(dǎo)航欄中的圖標，進入相應(yīng)的功能頁面，包括全校贊揚統(tǒng)計頁面、批評統(tǒng)計頁面、個人中心頁面、首頁.所有的記錄數(shù)據(jù)作為評價的事實依據(jù)，都保存在數(shù)據(jù)庫服務(wù)器上，并能夠以表格形式導(dǎo)出，便于統(tǒng)計和分析.

5 結(jié)語

勞動教育評價微信小程序符合當前中小學(xué)勞動教育評價的要求，實現(xiàn)了過程性評價和事實依據(jù)的統(tǒng)一.本研究基于微信用戶廣泛和小程序易于使用的特點，采用小程序平臺最新的框架技術(shù)，將傳統(tǒng)的紙質(zhì)評價轉(zhuǎn)變?yōu)樾畔⒒u價，使得評價過程更便捷和有效.與其他從思想、模式、方法等方面對勞動教育評價開展的研究不同，本研究是從技術(shù)層面的設(shè)計和實現(xiàn)展開的，設(shè)計的成果得到了需求學(xué)校的認可和試用.隨著智慧校園建設(shè)的進一步推進，如何與校園其他智慧應(yīng)用場景相融合，使得基于學(xué)生身份二維碼的評價功能得到擴充，評價數(shù)據(jù)得到共享，不同應(yīng)用系統(tǒng)得到連通，是下一步研究工作的方向.