小程序實現校園互助與班級管理平臺

蘭哲威 周雪芹

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

關鍵詞：校園互助;班級管理;微信小程序;表單提交;模態彈窗

中圖分類號：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 背景

在實際活動中發現當前的聊天軟件并不能很好地滿足收集截圖、統計人數、確定到人等的需求，而微信小程序作為簡單高效、不需要單獨下載的新型小程序，在多方面受到大學生的追捧。基于此，設計開發了該大學班級管理與校園互助小程序。

在實現班級通知統計已提交與未提交人數的一系列實驗中，發現當二者處于同一個函數時無法通過一次點擊事件完整執行，提交表單后for循環中的提交對象會發生錯誤、滯后等的現象。

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

2 小程序主體

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

3 登錄及注冊

3.1 登錄模塊

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

3.2 注冊模塊

3.2.1 個人注冊

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

3.2.2 批量注冊

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

在創建對應個人記錄后可由軟件負責人修改對應賬號權限，例如對應班級管理人員、校園新聞負責人或者是否能夠進行校園互助等。

4 新聞通知

4.1 新聞通知模塊

4.1.1 新聞通知模塊架構

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

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

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

頁面設置了滑動刷新，下拉至觸發“onload”事件即可重新調用云數據庫“db.collection（）.get”，若云數據庫集合更新即可獲取更新后的內容。

4.2 校園要事及自定任務

4.2.1 校園新聞模塊

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

4.2.2 班級模塊

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

4.2.3 自定義模塊

自定任務與創建任務的權限屬于學生個人，只有學生對應個人可以查看、創建與刪除自己創建的任務。起到了備忘錄的作用，減少了多個軟件間切換的不必要的煩瑣。互動窗口的點擊事件設置為刪除，在學生完成后點擊該窗口，會彈出模態彈窗提示是否完成。學生點擊確認后即可刪除該自定任務。

5 校園互助

5.1 校園互助模塊

5.1.1 校園互助模塊架構

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

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

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

頁面可以進行下拉刷新，觸發“onload”事件后可重新調用云數據庫更新頁面內容（圖5）。

5.2 校園互助實際應用

5.2.1 互助查詢模塊

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

5.2.2 我的申請模塊

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

5.2.3 接取互助模塊

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

5.2.4 我的互助模塊

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

6 我的首頁

6.1 基本模塊

6.1.1 成長歷程模塊

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

6.1.2 意見反饋模塊

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

6.1.3 請求互助模塊

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

6.1.4 個人主頁模塊

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

6.2 班級管理模塊

6.2.1 完成情況模塊

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

6.2.2 布置任務模塊

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

6.2.3 布置任務模塊三階段

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

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

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

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

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

6.3 發布新聞模塊

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

7 結束語

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

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

3）云數據庫提交過程中如果需要進行for循環對數組依次提交可用分段式，先創建記錄，后逐條添加。

為使本程序能夠適應在大量數據情況下能夠快速檢索得到對應數據，仍需要優化預備工作和檢索實現過程的各項參數。

參考文獻：

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

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

[3] 微信小程序之側邊欄滑動實現[EB/OL].（2018-09-01）[2021-06-30].https：//blog.csdn.net/weidong_y/article/details/8228 9375.

[4] 周文潔.微信小程序開發實戰：微課視頻版[M].北京：清華大學出版社，2020.

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

【通聯編輯：謝媛媛】