“疫管小助手”微信小程序的設計與開發

黃樂 左文濤*張 昊 何志滔

（廣州工商學院工學院，廣東 廣州 510850）

1 引言

隨著移動互聯網的發展和信息技術的進步，微信小程序以其便捷、無需下載等優勢深受廣大用戶的喜愛。微信小程序廣泛應用于教學、醫療、購物等方面。傳統的網站和APP平臺存在開發周期較長、開發和維護成本較高等問題，而基于微信的小程序的設計相對簡單，主要涉及前端開發和后臺管理。本文設計開發的小程序主要根據每一個地區的疫情防控如小區、學校、公司等應用場所，給予方便快捷的人員管理，方便收集和管理群眾的信息[1]。

2 系統設計

2.1 開發模型與設計方法

項目的需求較明確，因此使用傳統的瀑布模型來開發，采用結構化的軟件設計方法，自頂向下、逐步求精[2]。將小程序的功能以模塊劃分，減少復雜性，提高系統的可靠性、可維護性。框架和組件大多采用微信原生，部分功能較復雜采用自行封裝組件的方式。

2.2 所用技術

（1）微信小程序。微信小程序是快應用的一種，是一種不需要下載和安裝就可以使用的應用，主要涉及的相關技術包括JavaScript、WXML、WXSS。JavaScript，簡稱“JS”，是一種具有函數優先的輕量級，解釋型或即時編譯型的編程語言。雖然它是作為開發Web頁面的腳本語言而出名，但是它也被用到了很多非瀏覽器環境中，JavaScript基于原型編程、多范式的動態腳本語言，并且支持面向對象、命令式、聲明式、函數式編程范式。WXML（WeiXin Markup Language）：框架設計的一套標簽語言，結合基礎組件、事件系統，可以構建出頁面的結構。WXSS(WeiXin Style Sheets)：是一套樣式語言，用于描述WXML的組件樣式。WXSS用來決定WXML的組件應該怎么顯示。為了適應廣大的前端開發者，WXSS具有CSS大部分特性。同時為了更適合開發微信小程序，WXSS對CSS進行了擴充以及修改。

（2）騰訊云服務器、騰訊云對象存儲、騰訊云數據庫MySQL（TencentDB for MySQL）。云服務器或云主機是一種簡單高效、安全可靠、處理能力可彈性伸縮的計算服務。本項目使用的對象存儲（Cloud Object Storage,COS）是騰訊云提供的一種存儲海量文件的分布式存儲服務，具有高擴展性、低成本、可靠安全等優點。騰訊云數據庫MySQL是一種穩定可靠、可彈性擴展和便于管理的關系型數據庫服務，提供備份恢復、監控、容災、快速擴容、數據傳輸等全套解決方案，簡化了數據庫運維工作。

（3）Echarts。Echarts是一款基于JavaScript的數據可視化圖表庫，提供直觀、生動、可交互、可個性化定制的數據可視化圖表。

3 系統功能實現

疫管小助手小程序主要功能模塊包括首頁、班級、發現和我的。系統層次圖如圖1所示。

圖1 系統層次圖

3.1 首頁頁面

發布打卡信息：管理員可以通過指定一個或多個班級發布打卡信息。其中可選擇“快捷發布”“自定義發布”“緊急模式”三種發布信息。

（1）快捷發布：收集用戶的健康碼和行程碼；

（2）自定義發布：管理員根據實際需求選擇需要收集的用戶的打卡內容；

（3）緊急模式：警告班級用戶目前班級所在的地區有疫情風險。

發布的實現首先定義var fabuTime=util.formatTime(new Date())獲取當前發布的時間，然后調用云函數在云數據庫里通過code字段找到指定的班級，在content字段里添加打卡信息，部分代碼如下：

（4）收集打卡信息：用戶加入了管理員所在的班級后，可以接收到管理員在班級發布的打卡信息，用戶可以點擊打卡上傳信息。

（5）發布通知：管理員發布的通知可以被班級里所有的人看到，可以用來發布注意事項或緊急通知。

3.2 班級頁面

（1）查看班級信息：班級里管理員和用戶都可以在這里查看自己創建和加入的班級信息（班級名字，班級人數，班級邀請碼，班級類型），同時還可以點擊進入班級查看班級在14天里打卡的具體信息，其中每一天的打卡信息都會以可視化的條狀圖展現出來，本項目的可視化條狀圖主要依托于Echarts可視化工具實現，具體實現的核心代碼如下：

3.3 發現頁面

更多功能：該界面會根據后續使用者的反饋和需求添加更多的功能。

3.4 我的頁面

（1）查看和修改個人信息：可以查看和修改自己的頭像和昵稱。

（2）意見反饋：可以提交意見和反饋，例如程序異常閃退等。

（3）聯系我們：調用客服API，與微信客服對話。

3.5 程序運行界面

首次進入小程序時，會來到選擇身份登錄的界面。選擇好自己的身份以后，系統會根據用戶選擇的身份跳轉到不同的頁面，選擇“用戶”跳轉到加入班級頁面，如圖2所示；選擇“管理員”跳轉到創建班級頁面，如圖3所示。

圖2 加入班級

圖3 創建班級

4 系統特點

疫管小助手適用于大多數的疫情防控群體。用戶的打卡信息會以條狀圖的可視化方式展現出來并實時更新[4]，同時在圖表下方會實時顯示出已打卡和未打卡的人數和名單，還可以查看前14天的打卡信息，方便掌握班級近期的打卡信息，也方便班集體進行14天健康檢測，不用擔心班級的打卡信息因為過期導致無法查看。本項目順應了快應用飛速發展的時代背景，基于微信龐大的用戶群體，具有開發和推廣成本低、跨平臺等優勢[4]。

5 系統測試

5.1 運行環境

網站服務器端環境，騰訊云服務器。用戶客戶端環境：Android或IOS系統安裝微信APP，Windows10安裝微信3.6.0.18或更新版本。

5.2 首次進入小程序

用戶首次打開小程序會顯示用標簽實現的輪播圖界面，前兩張輪播圖是對該小程序功能的簡單介紹，最后一張輪播圖是選擇身份的功能，可選擇“管理員”或“用戶”兩種身份。

選擇管理員身份就會跳轉到創建班級頁面，班級創建成功會顯示創建成功界面并給出唯一的班級邀請碼，下一步即可跳轉到首頁頁面；選擇用戶身份會跳轉到加入班級頁面，班級加入成功同樣也會跳轉到首頁頁面。

5.3 首頁頁面

管理員在首頁可進行打卡操作，在首頁頁面的TabBar欄上方有一個發布按鈕，管理員點擊發布就可以選擇“快捷發布”“自定義發布”“緊急模式”三個選項，點擊快捷發布就會跳轉到選擇班級的頁面，選中的班級會有顏色變化的表現，如圖4所示，點擊發布后就會自動跳轉回首頁可查看自己發布的打卡信息（管理員在自己班級發布的打卡信息顯示“查看班級”，班級用戶顯示“打卡”），如圖5所示。

圖4 選擇班級發布打卡

圖5 發布打卡完成

5.4 班級頁面

在這里可查看班級打卡信息同時也可創建和加入班級，如圖6所示，點擊班級進入即可查看具體的打卡信息，當天的已打卡人數和未打卡人數以可視化條狀圖的形式顯示出來，在條狀圖下方會具體顯示班級管理員，已打卡人員和未打卡人員的名單。右上方可以選擇14天內的任意一天的日期即可查看當天的打卡信息，也可在此界面退出班級，如圖7所示。

圖6 班級頁面

圖7 進入班級查看打卡信息

5.5 我的頁面

該頁面有在線客服，分享小程序，意見反饋和關于作者功能，點擊個人信息可進入更改自己的頭像、昵稱和退出登錄。

6 結語

本小程序的目的是為了方便管理人員在防疫期間對群體的管理，減少管理人員的工作量，做到無接觸、無距離限制即可完成對群眾的信息收集，是對現有疫情管理技術手段的一種有效補充，也可用于防疫之外普通的人員管理和信息收集。