查寝打卡微信小程序的设计与实现＊

闵 慧，李 鹏，刘 婷，章宜玉

(1.湖南信息职业技术学院软件学院，湖南 长沙 410200；2.湖南中医药大学信息科学与工程学院)

0 引言

校园安全是顺利开展学校教育活动的基础，而定时查寝是学校的一种常态化的安全管理方式。除了学校宿管的定期查寝，各个二级学院也有查寝任务。大多数二级学院的查寝，是由学生会或班主任、辅导员去执行。学生会查寝提前发布查寝通知，然后走访所有的寝室。由于人力、物力的原因，不可能每天都进行一次大规模的查寝。在这个科技如此发达的时代，机器、程序可以去做很多繁琐和复杂的事物。本款小程序意在帮助老师及学生会成员更好的管理学生的出勤状况，提高学生打卡的兴致，提高管理人员查寝的效率，节省人力物力成本。

1 开发、测试环境及相关技术

本系统采用前、后端分离的方式开发，分为微信小程序前端和服务器后端两个技术端。在微信小程序端，综合使用了微信小程序原生组件进行布局，使用组件库进行优化，使用微信小程序原生API进行功能的实现。后端使用Node.js 结合Express 框架进行开发，姿势和手势的识别采用了百度AI技术。使用MySQL数据库存储数据。系统采用的开发与测试环境如表1所示。

表1 开发与测试环境

1.1 Node.js技术

Node.js是一个开源跨平台的服务器端Java Script运行环境，它以Google Chrome V8 解析引擎为基础，采用类似Nginx的以事件循环驱动的异步I/O模型提高运行效率，Node.js的核心优势在于通用、灵活、高性能。

1.2 Express框架

Express 是一个简洁而灵活的Node.js Web 应用框架，提供了一系列强大的功能，能够帮助人们创建各种Web应用。

1.3 微信小程序开发

微信小程序是一种无需下载即可使用的应用，它依托于微信，可跨安卓和iOS 平台使用，开发成本低，操作简单，微信客户可以通过微信聊天进入小程序，也可以在使用小程序时方便切换到聊天界面，灵活快捷。基于小程序的诸多优点，小程序的线上线下推广十分普遍。

1.4 百度智能云手势识别技术

百度AI技术拥有语音技术、图像技术、文字识别、人脸与人体识别、视频技术等多种人工智能技术解决方案。手势识别技术是其中的一种，它可识别图片中的手部位置和手势类型，可识别包括拳头、比心、祈祷、点赞等24种常见手势。本文中的手势和姿势识别调用的就是百度AI中的相关API接口实现。

2 系统总体功能

查寝打卡小程序中拥有管理员、学生两种角色。管理端主要用于学院管理，供学生会、老师等管理员角色使用，用于管理学生的日常出勤。学生端主要是学生角色使用，用于打卡签到。此系统是基于校园层次上的学生签到打卡系统，能便捷、高效的检查出勤状况，能够系统、完整的显示学生签到情况。系统灵活性较高，操作简单快捷，而且不受时间和地域的限制。管理员在管理员端可新增学生、一键发布签到任务，学生就可以在学生端收到打卡推送，只要学生在宿舍，能按时按照指定的要求完成指定的动作，完成打卡即可。系统具体的功能结构如图1所示。

图1 查寝打卡微信小程序功能结构

3 数据库设计

数据库在整个系统设计开发流程中有着至关重要的作用，数据库的设计直接影响整个系统的运行效率。本小程序使用MySQL8.0.12 进行开发，共设计了包括学校表、班级表、宿舍表、学生表、楼栋表、签到表、手势表等在内的14张表。

4 系统功能实现

查寝打卡小程序将拥有两种角色，管理员角色和学生角色。管理员角色可以添加学生、发起签到、请假审批和查看签到详情，每一个功能对应的界面效果图2(a)～图2(d)所示。学生角色可以进行签到打卡和请假提交。

图2 管理员功能

4.1 管理员添加学生功能

打卡小程序因为需要进行人脸对比，初次进入时数据库中无学生的数据，需要管理员登录管理员账号，进入添加学生页面，添加待管理的学生信息。添加学生信息界面如图2(a)所示。

4.2 管理员发起签到功能

管理员可以选择修改签到的开始时间和结束时间、动作和手势，发起签到。如果当前时间段已经发起过签到，则发起签到失败；如果当前时间段没有发起过签到，反之则发起签到成功，允许接收订阅消息的学生将会收到签到提示。这里用到了微信云函数推送消息来通知各个学生。学生在登录小程序允许授权后，会将openid 存入数据库，管理员发起签到，根据数据库存储的openid，给学生推送消息。发起签到界面如图2(b)所示。

4.3 管理员请假审批功能

管理员登录之后选择右下边个人中心，点击查看请假申请，能看到今天需要申请请假的人数，通过点击申请记录可以查看请假详情。管理员可以根据请假理由和相关证明，进行批假或者打回。请假审批界面如图2(c)所示。

4.4 管理员查看签到功能

管理员可以查看学生的签到情况。小程序前端向后台提交请求并带上院系id、日期和签到次数（如无日期和当日发起签到次数，默认查询最新数据），后台查询出已签学生信息和未签学生信息，返回给小程序前端。查看签到界面如图2(d)所示。

4.5 学生签到打卡功能

学生登录成功后，进入签到页面。第一次登录的学生需要给小程序授权，方便后面签到通知的发送。签到页面的正中间是一个醒目的相机图标，点击该图标就可以进行签到。签到时需要拍摄自己的脸部及管理员指定地具体的动作或者手势，才能签到成功。具体签到打卡页面效果如图3所示。

图3 学生签到

4.6 学生请假提交功能

学生如果有事或生病可以提交请假申请。请假经过审批之后便无需签到；如果请假未通过，则还需要学生去签到或者再次提交相关信息进行重新申请。在递交请假申请时，需要选择请假类型，填写请假理由，上传相关证明，比如病假就需要上传病历单。

5 结束语

本文设计并实现了一款查寝打卡微信小程序，系统采用微信云开发技术、Node.js 技术、Express 框架技术、百度AI手势识别技术、MySQL 数据库技术等多种技术实现。小程序目前拥有24 种固定手势和6 种手绘姿势，识别能力具有一定的限制，下一步研究重点是将打卡形式多样化，进一步提高手势、姿势识别的正确率。