“疫管小助手”微信小程序的设计与开发

2022-10-19黄乐左文涛何志滔

电脑与电信 2022年7期

黄乐左文涛*张昊何志滔

（广州工商学院工学院，广东广州 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所示。