蘭哲威 周雪芹

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

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

中圖分類號：TP311.1 ? ? ?文獻標識碼：A

文章編號：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 背景

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

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

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

2 小程序主體

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

3 登錄及注冊

3.1 登錄模塊

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

3.2 注冊模塊

3.2.1 個人注冊

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

3.2.2 批量注冊

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

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

4 新聞通知

4.1 新聞通知模塊

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

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

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

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

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

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

4.2.1 校園新聞模塊

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

4.2.2 班級模塊

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

4.2.3 自定義模塊

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

5 校園互助

5.1 校園互助模塊

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

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

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

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

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

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

5.2.1 互助查詢模塊

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

5.2.2 我的申請模塊

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

5.2.3 接取互助模塊

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

5.2.4 我的互助模塊

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

6 我的首頁

6.1 基本模塊

6.1.1 成長歷程模塊

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

6.1.2 意見反饋模塊

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

6.1.3 請求互助模塊

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

6.1.4 個人主頁模塊

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

6.2 班級管理模塊

6.2.1 完成情況模塊

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

6.2.2 布置任務(wù)模塊

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

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

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

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

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

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

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

6.3 發(fā)布新聞模塊

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

7 結(jié)束語

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

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

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

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

參考文獻：

[1] 微信小程序登錄功能實現(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è)邊欄滑動實現(xiàn)[EB/OL].（2018-09-01）[2021-06-30].https：//blog.csdn.net/weidong_y/article/details/8228 9375.

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

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

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