“疫管小助手”微信小程序的設(shè)計(jì)與開發(fā)

黃樂 左文濤*張 昊 何志滔

（廣州工商學(xué)院工學(xué)院，廣東 廣州 510850）

1 引言

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

2 系統(tǒng)設(shè)計(jì)

2.1 開發(fā)模型與設(shè)計(jì)方法

項(xiàng)目的需求較明確，因此使用傳統(tǒng)的瀑布模型來開發(fā)，采用結(jié)構(gòu)化的軟件設(shè)計(jì)方法，自頂向下、逐步求精[2]。將小程序的功能以模塊劃分，減少復(fù)雜性，提高系統(tǒng)的可靠性、可維護(hù)性?？蚣芎徒M件大多采用微信原生，部分功能較復(fù)雜采用自行封裝組件的方式。

2.2 所用技術(shù)

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

（2）騰訊云服務(wù)器、騰訊云對象存儲(chǔ)、騰訊云數(shù)據(jù)庫MySQL（TencentDB for MySQL）。云服務(wù)器或云主機(jī)是一種簡單高效、安全可靠、處理能力可彈性伸縮的計(jì)算服務(wù)。本項(xiàng)目使用的對象存儲(chǔ)（Cloud Object Storage,COS）是騰訊云提供的一種存儲(chǔ)海量文件的分布式存儲(chǔ)服務(wù)，具有高擴(kuò)展性、低成本、可靠安全等優(yōu)點(diǎn)。騰訊云數(shù)據(jù)庫MySQL是一種穩(wěn)定可靠、可彈性擴(kuò)展和便于管理的關(guān)系型數(shù)據(jù)庫服務(wù)，提供備份恢復(fù)、監(jiān)控、容災(zāi)、快速擴(kuò)容、數(shù)據(jù)傳輸?shù)热捉鉀Q方案，簡化了數(shù)據(jù)庫運(yùn)維工作。

（3）Echarts。Echarts是一款基于JavaScript的數(shù)據(jù)可視化圖表庫，提供直觀、生動(dòng)、可交互、可個(gè)性化定制的數(shù)據(jù)可視化圖表。

3 系統(tǒng)功能實(shí)現(xiàn)

疫管小助手小程序主要功能模塊包括首頁、班級、發(fā)現(xiàn)和我的。系統(tǒng)層次圖如圖1所示。

圖1 系統(tǒng)層次圖

3.1 首頁頁面

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

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

（2）自定義發(fā)布：管理員根據(jù)實(shí)際需求選擇需要收集的用戶的打卡內(nèi)容；

（3）緊急模式：警告班級用戶目前班級所在的地區(qū)有疫情風(fēng)險(xiǎn)。

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

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

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

3.2 班級頁面

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

3.3 發(fā)現(xiàn)頁面

更多功能：該界面會(huì)根據(jù)后續(xù)使用者的反饋和需求添加更多的功能。

3.4 我的頁面

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

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

（3）聯(lián)系我們：調(diào)用客服API，與微信客服對話。

3.5 程序運(yùn)行界面

首次進(jìn)入小程序時(shí)，會(huì)來到選擇身份登錄的界面。選擇好自己的身份以后，系統(tǒng)會(huì)根據(jù)用戶選擇的身份跳轉(zhuǎn)到不同的頁面，選擇“用戶”跳轉(zhuǎn)到加入班級頁面，如圖2所示；選擇“管理員”跳轉(zhuǎn)到創(chuàng)建班級頁面，如圖3所示。

圖2 加入班級

圖3 創(chuàng)建班級

4 系統(tǒng)特點(diǎn)

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

5 系統(tǒng)測試

5.1 運(yùn)行環(huán)境

網(wǎng)站服務(wù)器端環(huán)境，騰訊云服務(wù)器。用戶客戶端環(huán)境：Android或IOS系統(tǒng)安裝微信APP，Windows10安裝微信3.6.0.18或更新版本。

5.2 首次進(jìn)入小程序

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

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

5.3 首頁頁面

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

圖4 選擇班級發(fā)布打卡

圖5 發(fā)布打卡完成

5.4 班級頁面

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

圖6 班級頁面

圖7 進(jìn)入班級查看打卡信息

5.5 我的頁面

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

6 結(jié)語

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