小程序?qū)崿F(xiàn)校園互助與班級(jí)管理平臺(tái)

蘭哲威 周雪芹

摘要：鑒于在擔(dān)任班級(jí)管理人員過程中體會(huì)到目前程序使用的不便，研發(fā)了這款校園互助與班級(jí)管理平臺(tái)微信小程序。以新聞通知、校園互助和個(gè)人主頁三個(gè)頁面為主體，通過云函數(shù)的調(diào)用來實(shí)現(xiàn)發(fā)布校園新聞、班級(jí)通知、校園互助，查看完成情況等功能。一系列可靠的實(shí)踐結(jié)果表明，該款小程序能夠較好解決大學(xué)生班級(jí)管理人員對(duì)截圖收集、通知發(fā)放等方面的問題，降低管理人員時(shí)間成本，提高管理效率。

關(guān)鍵詞：校園互助;班級(jí)管理;微信小程序;表單提交;模態(tài)彈窗

中圖分類號(hào)：TP311.1 ? ? ?文獻(xiàn)標(biāo)識(shí)碼：A

文章編號(hào)：1009-3044（2021）35-0064-04

Campus Mutual Aid and Class Management Platform

LAN Zhe-wei， ZHOU Xue-qin

（1.School of Mechanical Engineering， Shandong University of Technology， Zibo 255049， China;2.Scholl of Computer Science and Technology University of Technology，Zibo 255049，China）

Abstract： In view of the inconvenience of using the current program when working as a class manager， this wechat applet of campus mutual aid and class management platform is developed. With the three pages of news notification， campus mutual assistance and personal home page as the main body， the functions of publishing campus news， class notification， campus mutual assistance and viewing the completion are realized through the call of cloud function. A series of reliable practical results show that this small program can better solve the problems of college student class managers in screenshot collection and notice distribution， reduce the time cost of managers and improve management efficiency.

Key words： campus mutual aid; class management; Wechat applet; form submission; modal pop-up

1 背景

在實(shí)際活動(dòng)中發(fā)現(xiàn)當(dāng)前的聊天軟件并不能很好地滿足收集截圖、統(tǒng)計(jì)人數(shù)、確定到人等的需求，而微信小程序作為簡(jiǎn)單高效、不需要單獨(dú)下載的新型小程序，在多方面受到大學(xué)生的追捧。基于此，設(shè)計(jì)開發(fā)了該大學(xué)班級(jí)管理與校園互助小程序。

在實(shí)現(xiàn)班級(jí)通知統(tǒng)計(jì)已提交與未提交人數(shù)的一系列實(shí)驗(yàn)中，發(fā)現(xiàn)當(dāng)二者處于同一個(gè)函數(shù)時(shí)無法通過一次點(diǎn)擊事件完整執(zhí)行，提交表單后for循環(huán)中的提交對(duì)象會(huì)發(fā)生錯(cuò)誤、滯后等的現(xiàn)象。

在一系列嘗試后，改用以模態(tài)彈窗作為中介執(zhí)行二次點(diǎn)擊事件等技術(shù)進(jìn)行實(shí)現(xiàn)。該項(xiàng)成果具有泛用性，讓用戶的點(diǎn)擊事件代替定時(shí)事件，適合在處理“form”表單提交時(shí)某一數(shù)組或有多組數(shù)組需要執(zhí)行“for”循環(huán)賦值時(shí)的云平臺(tái)表單提交事件。

2 小程序主體

小程序以登錄、新聞通知、校園互助和我的首頁四大模塊為主體，其中登錄模塊包括內(nèi)部賬號(hào)密碼登錄、注冊(cè)等兩種模塊;新聞通知模塊包括校園新聞、班級(jí)通知、自定任務(wù)以及創(chuàng)建任務(wù)等四種模塊;校園互助模塊有我的申請(qǐng)、我的互助以及互助查詢?nèi)N模塊;我的首頁模塊中則包括了個(gè)人主頁、意見反饋、請(qǐng)求互助和成長(zhǎng)歷程四種基本模塊，對(duì)不同的權(quán)限有發(fā)布新聞模塊、布置任務(wù)、完成情況模塊等（圖1）。

3 登錄及注冊(cè)

3.1 登錄模塊

由于是校園內(nèi)部管理軟件，因此統(tǒng)一采用學(xué)生學(xué)號(hào)為賬號(hào)的賬號(hào)密碼二次登錄[1]，如此降低了校外人員登錄的可能。登錄過程采用賬號(hào)、密碼、空號(hào)進(jìn)行“for”循環(huán)三重判斷，使用“db.collection（）.get”調(diào)用云數(shù)據(jù)庫，用“for”循環(huán)遍歷對(duì)比輸入的賬號(hào)、密碼對(duì)應(yīng)的返回值，確保賬號(hào)密碼一一對(duì)應(yīng)登錄。

3.2 注冊(cè)模塊

3.2.1 個(gè)人注冊(cè)

學(xué)生個(gè)人注冊(cè)，填寫對(duì)應(yīng)信息：賬號(hào)（學(xué)號(hào)）、密碼、姓名、對(duì)應(yīng)班級(jí)以及聯(lián)系方式。首先通過調(diào)用云數(shù)據(jù)庫進(jìn)行對(duì)比確保沒有重復(fù)注冊(cè)或非學(xué)號(hào)賬號(hào)注冊(cè)[2]。用戶在輸入對(duì)應(yīng)信息后滿足以上條件方可通過“db.collection（）.add”將信息上傳到云服務(wù)器中。

3.2.2 批量注冊(cè)

另一種以班級(jí)為單位注冊(cè)，提高了使用過程中的效率。通過“Excel”表格，將所需字段一一羅列，在對(duì)應(yīng)字段下批量添加對(duì)應(yīng)信息，再將“Excel”表格進(jìn)行一定的格式修改后直接批量導(dǎo)入云數(shù)據(jù)庫。

在創(chuàng)建對(duì)應(yīng)個(gè)人記錄后可由軟件負(fù)責(zé)人修改對(duì)應(yīng)賬號(hào)權(quán)限，例如對(duì)應(yīng)班級(jí)管理人員、校園新聞負(fù)責(zé)人或者是否能夠進(jìn)行校園互助等。

4 新聞通知

4.1 新聞通知模塊

4.1.1 新聞通知模塊架構(gòu)

新聞通知模塊是本程序設(shè)計(jì)架構(gòu)上的第一個(gè)頁面，其采用了滑動(dòng)式側(cè)邊欄設(shè)計(jì)[3]，以側(cè)邊欄和主頁兩層頁面堆疊，主頁疊于側(cè)邊欄之上，通過“boolean”值判斷是否隱藏或顯示主頁。

以手指點(diǎn)擊屏幕的第一點(diǎn)為原點(diǎn)，滑動(dòng)后停止的那一點(diǎn)為終點(diǎn)，兩者之間的差若>0，則改變“boolean”值，進(jìn)而觸發(fā)事件，將主頁顯示或隱藏。主頁顯示在設(shè)計(jì)上因?yàn)樾侣剶?shù)量的不確定性，將“width”設(shè)定為100%，“height”為“auto”。

但在實(shí)驗(yàn)中發(fā)現(xiàn)當(dāng)暫無新聞通知時(shí)會(huì)出現(xiàn)“height”=0的情況，此時(shí)主頁高度為0，無法觸發(fā)滑動(dòng)事件，同時(shí)側(cè)邊欄和主頁底色選擇不同，會(huì)發(fā)生頁面顏色斷層現(xiàn)象（圖2）。針對(duì)這一情況，采用將主頁底部?jī)?nèi)邊距“padding-bottom”設(shè)定為特定值的辦法，與側(cè)邊欄四個(gè)點(diǎn)擊按鈕：校園新聞、班級(jí)通知、自定任務(wù)和創(chuàng)建任務(wù)的總高度一致，當(dāng)沒有通知時(shí)主頁會(huì)生成一個(gè)高度為特定值的空白頁面，可以觸發(fā)滑動(dòng)事件（圖3）。

頁面設(shè)置了滑動(dòng)刷新，下拉至觸發(fā)“onload”事件即可重新調(diào)用云數(shù)據(jù)庫“db.collection（）.get”，若云數(shù)據(jù)庫集合更新即可獲取更新后的內(nèi)容。

4.2 校園要事及自定任務(wù)

4.2.1 校園新聞模塊

校園新聞通過for循環(huán)將集合中每個(gè)記錄從云數(shù)據(jù)庫調(diào)用導(dǎo)入本地空數(shù)組，利用“wxml”頁面的<view>組件表達(dá)出來。以聊天氣泡為樣式作為新聞通知的互動(dòng)窗口。窗口在設(shè)計(jì)上設(shè)置“width”為屏寬的90%，能夠適應(yīng)學(xué)生使用的不同手機(jī);“height”設(shè)定是“auto”，隨新聞行數(shù)的增加而增長(zhǎng)，避免出現(xiàn)空白格過多或者文字無法完全顯示的情況（圖4）。

4.2.2 班級(jí)模塊

每個(gè)班級(jí)都有一組設(shè)定為該班班級(jí)代號(hào)的識(shí)別碼，班級(jí)通知中帶有該識(shí)別碼即可發(fā)送到對(duì)應(yīng)班級(jí)學(xué)生的班級(jí)通知模塊中展示。班級(jí)模塊的互動(dòng)窗口與校園新聞的樣式一致。且根據(jù)班級(jí)管理人員的設(shè)置能夠形成兩種窗口：當(dāng)班級(jí)管理人員設(shè)置的“boolean”值為“false”時(shí)該班級(jí)通知的窗口一種為純展示窗口，無法觸發(fā)跳轉(zhuǎn)事件;當(dāng)該“boolean”設(shè)置為“true”時(shí)，窗口下方會(huì)顯示“需要提交截圖”字樣，學(xué)生點(diǎn)擊對(duì)應(yīng)窗口后會(huì)觸發(fā)跳轉(zhuǎn)事件跳轉(zhuǎn)至提交截圖頁面，同時(shí)調(diào)用云數(shù)據(jù)庫將對(duì)應(yīng)任務(wù)的識(shí)別碼緩存到本地。提交截圖頁面上會(huì)顯示日期、任務(wù)名，中間選擇圖片按鈕觸發(fā)點(diǎn)擊事件后能夠選擇單張截圖[4]并與緩存到本地的對(duì)應(yīng)任務(wù)識(shí)別碼一起上傳，上傳成功后會(huì)有彈窗提醒，之后跳轉(zhuǎn)回新聞通知頁面，此時(shí)學(xué)生在點(diǎn)擊該窗口時(shí)會(huì)觸發(fā)模態(tài)彈窗提醒學(xué)生已經(jīng)上傳完成，不會(huì)再跳轉(zhuǎn)至提交截圖頁面。

4.2.3 自定義模塊

自定任務(wù)與創(chuàng)建任務(wù)的權(quán)限屬于學(xué)生個(gè)人，只有學(xué)生對(duì)應(yīng)個(gè)人可以查看、創(chuàng)建與刪除自己創(chuàng)建的任務(wù)。起到了備忘錄的作用，減少了多個(gè)軟件間切換的不必要的煩瑣。互動(dòng)窗口的點(diǎn)擊事件設(shè)置為刪除，在學(xué)生完成后點(diǎn)擊該窗口，會(huì)彈出模態(tài)彈窗提示是否完成。學(xué)生點(diǎn)擊確認(rèn)后即可刪除該自定任務(wù)。

5 校園互助

5.1 校園互助模塊

5.1.1 校園互助模塊架構(gòu)

校園互助模塊是本程序設(shè)計(jì)架構(gòu)上的第二個(gè)頁面，參考了時(shí)下大學(xué)校園內(nèi)流行的懸賞群機(jī)制。互助分類選擇上用多項(xiàng)選擇器分成類型—地點(diǎn)—時(shí)間三者，能夠區(qū)分大多數(shù)校園互助。

互動(dòng)窗口上采用了多列型自定義動(dòng)畫彈出窗格設(shè)計(jì)，將學(xué)生申請(qǐng)的互助需要分列顯示，超出的字?jǐn)?shù)以省略號(hào)代替。多列選擇器在頁面上方，點(diǎn)擊后即可觸發(fā)“pick”事件進(jìn)行選擇。

窗口下方設(shè)有詳情和收起兩個(gè)按鈕。點(diǎn)擊收起按鈕觸發(fā)收起事件：將彈窗收起;點(diǎn)擊詳情按鈕觸發(fā)跳轉(zhuǎn)事件跳轉(zhuǎn)至互助詳細(xì)情況頁面。該頁面內(nèi)所有內(nèi)容將詳細(xì)展示，且下方的“確認(rèn)互助”按鈕點(diǎn)擊后會(huì)更新云數(shù)據(jù)庫中該記錄的內(nèi)容，在申請(qǐng)人處“我的”頁面會(huì)顯示已接受和互助人的信息;而在互助人處“互助”頁面會(huì)顯示申請(qǐng)人的信息。在完成后互助人點(diǎn)擊確認(rèn)按鈕，云數(shù)據(jù)庫內(nèi)容更新，申請(qǐng)人處會(huì)顯示該項(xiàng)申請(qǐng)已完成，此時(shí)申請(qǐng)人點(diǎn)擊該窗口即可彈出模態(tài)彈窗，確認(rèn)后顯示已完成，云數(shù)據(jù)庫刪除該記錄。這樣一次校園互助確認(rèn)完成。

頁面可以進(jìn)行下拉刷新，觸發(fā)“onload”事件后可重新調(diào)用云數(shù)據(jù)庫更新頁面內(nèi)容（圖5）。

5.2 校園互助實(shí)際應(yīng)用

5.2.1 互助查詢模塊

互助查詢模塊是校園互助模塊的主頁，也是該模塊的基礎(chǔ)。通過調(diào)用云函數(shù)“db.collection（）.get”，以“pick”多列選擇器的返回值為條件進(jìn)行查詢，將返回的數(shù)據(jù)緩存到本地的數(shù)組，利用“wxml”頁面的<view>組件表達(dá)出來。

5.2.2 我的申請(qǐng)模塊

我的申請(qǐng)模塊是將學(xué)生本人的申請(qǐng)集合到一起的頁面。其除了調(diào)用云函數(shù)“db.collection（）.get”用于本地?cái)?shù)組的緩存以外，還有對(duì)云數(shù)據(jù)庫的刪除功能。將查詢到的記錄“_id”作為識(shí)別碼，用“db.collection（）.remove”就能進(jìn)行對(duì)應(yīng)記錄的刪除。

5.2.3 接取互助模塊

接取互助模塊在云函數(shù)調(diào)用“db.collection（）.get”上添加了搜索條件，能夠在云數(shù)據(jù)庫中搜索到對(duì)應(yīng)的記錄，并通過點(diǎn)擊事件用“db.collection（）.update”進(jìn)行對(duì)應(yīng)字段“boolean”值的修改來顯示該互助是否接取。

5.2.4 我的互助模塊

我的互助模塊是將學(xué)生本人所接取的互助集合到一起的頁面。其通過調(diào)用云函數(shù)“db.collection（）.get”用于本地?cái)?shù)組的緩存以外，還使用了“db.collection（）.update”將該記錄本身進(jìn)行改寫，修改代表完成狀態(tài)的字段的“boolean”值來顯示是否完成。

6 我的首頁

6.1 基本模塊

6.1.1 成長(zhǎng)歷程模塊

成長(zhǎng)歷程是將班級(jí)通知中學(xué)生個(gè)人上傳的截圖通過調(diào)用云函數(shù)“db.collection（）.get”將記錄中的圖片地址“url”和“tempfilePath”緩存到本地?cái)?shù)組，通過<view>表達(dá)出來。這里的“UI”設(shè)計(jì)參考了卡片窗口形式的設(shè)計(jì)。

6.1.2 意見反饋模塊

意見反饋是單獨(dú)的上傳頁面。通過“db.collection（）.add”將反饋意見和反饋圖片上傳到單獨(dú)的集合中。該集合在小程序中未被表達(dá)，只能通過云數(shù)據(jù)庫平臺(tái)查看，降低了反饋信息無法完整反饋給開發(fā)人員或者管理人員的可能。

6.1.3 請(qǐng)求互助模塊

點(diǎn)擊請(qǐng)求互助按鈕跳轉(zhuǎn)至申請(qǐng)互助頁面，通過“db.collection（）.add”將所需信息填寫完整后發(fā)送至云數(shù)據(jù)庫。其中類型的選擇用“pick”事件的多列選擇器進(jìn)行與互助查詢模塊一樣的分類選擇，返回值作為類型的識(shí)別碼。

6.1.4 個(gè)人主頁模塊

點(diǎn)擊上方頭像，跳轉(zhuǎn)進(jìn)入個(gè)人主頁。以“db.collection（）.get”在數(shù)據(jù)庫中按登錄界面登錄時(shí)記錄的學(xué)號(hào)為條件查詢個(gè)人信息，在用<view>組件進(jìn)行表達(dá)。展示的信息包括學(xué)號(hào)、聯(lián)系方式和信譽(yù)積分。信譽(yù)積分用于判斷是否能進(jìn)行校園互助。當(dāng)信譽(yù)積分低于某一特定值時(shí)，將無法進(jìn)行校園互助（圖6）。

6.2 班級(jí)管理模塊

6.2.1 完成情況模塊

完成情況模塊是分為三個(gè)頁面的組合，只有對(duì)應(yīng)班級(jí)管理人員可以查看。第一個(gè)頁面“db.collection（）.get”得到所有班級(jí)通知中需要提交截圖的部分并列表顯示。每一個(gè)任務(wù)用<view>組件表達(dá)，同時(shí)設(shè)置點(diǎn)擊事件跳轉(zhuǎn)至第二個(gè)頁面。第二個(gè)頁面是對(duì)應(yīng)任務(wù)的完成人員與未完成人員。未完成人員用數(shù)組進(jìn)行隨機(jī)排序，而完成人員將會(huì)生成與第一個(gè)頁面類似的列表，點(diǎn)擊后會(huì)跳轉(zhuǎn)至截圖展示與下載頁面，點(diǎn)擊圖片即可下載對(duì)應(yīng)截圖。

6.2.2 布置任務(wù)模塊

布置任務(wù)模塊采用表單提交的形式，分為三個(gè)階段，只有對(duì)應(yīng)班級(jí)管理人員可以查看。一階段是通過“form”表單提取<textarea>返回的值。第二階段用第一次點(diǎn)擊事件以“db.collection（）.add”的方式將輸入值提交到云端，至此二階段結(jié)束。如果該項(xiàng)任務(wù)需要提交截圖，則進(jìn)入第三階段。

6.2.3 布置任務(wù)模塊三階段

第三階段是將表單提交到云數(shù)據(jù)庫生成新記錄時(shí)提交班級(jí)成員名單作為未完成人員。班級(jí)人員名單時(shí)通過“db.collection（）.get”以班級(jí)識(shí)別碼為條件查詢，再導(dǎo)入本地?cái)?shù)組[5]。但經(jīng)多次試驗(yàn)后發(fā)現(xiàn)導(dǎo)入情況不佳，常常出現(xiàn)只導(dǎo)入首個(gè)或末尾的單條記錄。后改用“for”循環(huán)單個(gè)導(dǎo)入?yún)s將其他信息也多次導(dǎo)入，于是開始嘗試階段式完成，即第一部分先創(chuàng)建該項(xiàng)任務(wù)記錄，再導(dǎo)入人員數(shù)據(jù)。

第一種方案，延時(shí)處理。但是有時(shí)會(huì)提交到上一個(gè)表單，即數(shù)據(jù)提交發(fā)生滯后現(xiàn)象;使用跳轉(zhuǎn)后延時(shí)也是同一現(xiàn)象。在多次測(cè)試中發(fā)現(xiàn)若延時(shí)處理設(shè)定值為2000有一定概率不發(fā)生信息滯后現(xiàn)象，但需要布置一次任務(wù)后退出小程序重新登錄。尚未得出確切原因，懷疑是本地緩存中對(duì)應(yīng)存放任務(wù)識(shí)別碼的緩存未能及時(shí)更新。

第二種方案，將程序提出另作函數(shù)，放入“db.collection（）.add”的“success”事件后，得到上傳成功后的返回值再執(zhí)行，但是函數(shù)運(yùn)行到這一步時(shí)常常發(fā)生卡頓、不執(zhí)行的現(xiàn)象。尚未得出原因。

第三種方案，再添加一個(gè)點(diǎn)擊事件，在上傳完成后人工點(diǎn)擊觸發(fā)函數(shù)，進(jìn)入“for”循環(huán)，每次得到一個(gè)班級(jí)同學(xué)的記錄并進(jìn)行“db.collection（）.update（{_.push}）”將該同學(xué)的記錄添加到該任務(wù)中。這一方案能夠完美實(shí)現(xiàn)提交班級(jí)成員名單，但是過于煩瑣，且若是忘記提交就會(huì)在云數(shù)據(jù)庫中生成一個(gè)空記錄，占用空間。

在嘗試將第三種方案與模態(tài)彈窗結(jié)合，在“db.collection（）.add”的“success”事件后添加一組模態(tài)彈窗“wx.showModal”，顯示“上傳成功”提示，點(diǎn)擊確定后才能退出。確定按鈕觸發(fā)第三方案的事件。且添加了“wx.removeStorageSync（）”事件，確保對(duì)應(yīng)“db.collection（）.add”的“success”事件后添加一組模態(tài)彈窗“wx.showModal”，顯示“上傳成功”提示，點(diǎn)擊確定后才能退出。確定按鈕觸發(fā)第三方案的事件。且添加了“wx.removeStorageSync（）”事件，確保對(duì)應(yīng)緩存在每次循環(huán)開始前都是空集合。以此較好解決了數(shù)組無法緩存本地以及表單提交數(shù)組的問題。

6.3 發(fā)布新聞模塊

發(fā)布新聞模塊與發(fā)布班級(jí)通知類似，且只有校園新聞負(fù)責(zé)人有權(quán)限發(fā)布。取消了接收識(shí)別碼和班級(jí)成員，所有用戶都可以接收。

7 結(jié)束語

1）該軟件能提高班級(jí)管理人員的工作效率和降低過程中所需的成本。

2）滑動(dòng)型側(cè)邊欄如果主頁高度為自動(dòng)需要設(shè)置一定初始值才能運(yùn)行。

3）云數(shù)據(jù)庫提交過程中如果需要進(jìn)行for循環(huán)對(duì)數(shù)組依次提交可用分段式，先創(chuàng)建記錄，后逐條添加。

為使本程序能夠適應(yīng)在大量數(shù)據(jù)情況下能夠快速檢索得到對(duì)應(yīng)數(shù)據(jù)，仍需要優(yōu)化預(yù)備工作和檢索實(shí)現(xiàn)過程的各項(xiàng)參數(shù)。

參考文獻(xiàn)：

[1] 微信小程序登錄功能實(shí)現(xiàn)（通過用戶名和密碼）[EB/OL].（2019-07-26）[2021-06-30].https：//blog.csdn.net/weixin_4210 6981/article/details/97403912.

[2] 周文潔.微信小程序開發(fā)零基礎(chǔ)入門[M].北京：清華大學(xué)出版社，2019.

[3] 微信小程序之側(cè)邊欄滑動(dòng)實(shí)現(xiàn)[EB/OL].（2018-09-01）[2021-06-30].https：//blog.csdn.net/weidong_y/article/details/8228 9375.

[4] 周文潔.微信小程序開發(fā)實(shí)戰(zhàn)：微課視頻版[M].北京：清華大學(xué)出版社，2020.

[5] 陳云貴，高旭.微信小程序開發(fā)從入門到實(shí)戰(zhàn)：微課視頻版[M].北京：清華大學(xué)出版社，2020.

【通聯(lián)編輯：謝媛媛】