基于微信小程序的考勤系统设计与实现

郭鑫 毛古宝 方欢

摘要：高校考勤是日常教学中的一个常用事件，如何借助信息化的手段精准、快速地实现这一功能是十分必要的。该文基于微信小程序，借助js后端设计语言及前端设计语言wxml，设计和开发了一套考勤微信小程序。该设计的系统将用户角色分为教师和学生，可以完成教师上课考勤功能、学生主动签到等功能，系统使用测试结果表明系统的具备可使用性。

关键词：微信小程序；考勤系统；js；wxml

中图分类号：TP311 文献标识码：A 文章编号：1009-3044（2018）20-0057-03

1 背景

随着互联网的快速发展以及网络速度的不断提升，越来越多的事务处理转向移动端，手机作为移动端的主角，正发挥着越来越大的作用。通过对高校大学生的调查以及笔者自身的体会可以发现，现在大学教师考勤方法比较传统，也有过一些新鲜的尝试，但都没有大规模的施行，这些方法要么费时费力，要么可行度、精确度有待提高。然而，考勤情况不仅可以作为教学质量的参考[1]，而且对学生自身学习也具备督促作用，所以一种高效的考勤方法显得尤为必要。结合学生大都每天都使用智能手机，如果能将考勤与智能手机结合起来，则势必会大大减少学生课堂日常考勤的压力，提高教师的工作效率 [2]。

该文旨在开发一款产品用于高校上课的考勤活动，为实现这一目标，首先针对现有的几种考勤方式与应用场景之间的关系进行具体分析比较汇总[3-4]，分析结果如表1所示。

从表1可以看出，在高校考勤这一应用场景下，APP和小程序都有很大的优势，同时微信小程序基于微信，直接从微信端进入，省去安装一个APP的步骤，而且能使用微信的一系列的权限，比起APP有更大的优势。

2 系统需求分析

2.1 系统总体分析

小程序用于高校的上课考勤，用户从微信端进入小程序，获取当前用户的信息，注册时将微信号与学号或工号唯一绑定，登录之后通过用户名来判定是老师还是学生，以显示不同的界面。进入系统后可以使用校园资讯、上课打卡、查看课程表等功能，老师在打卡结束之后还能看到经处理过的统计情况。系统用例图如图1所示。

2.2 系统模块分析

1）注册。注册会将个人的学号与微信号相关联，起到一定的防作弊的作用，用户在签到的时候都只能用关联注册过的微信号才有效，即当不是用绑定的微信号登陆时，是无法进行考勤操作的。老师用工号注册，学生用学号注册，生成唯一的关联，保存到数据库中。

2）登录。从关联注册的微信进入小程序，用学号或、工号密码登录。非关联注册的微信登录无效。

3）资讯。展示校园的讯息、通知等，丰富小程序功能。

4）签到。老师在有考勤需求时，点击签到，即将自己的位置信息上传到服务器，同时激活计时器，学生需要在一分钟内完成签到才视作有效。学生登录成功后点击相应的按钮来签到，同时将个人信息、位置信息上传到服务器，与老师的位置信息进行比对，在一定的范围内认为是有效的操作，反之会在最终的统计表里显示该用户位置可疑。

5）结果显示。在计时器结束后，服务器进行比对信息，将本班的基本信息统计推送给老师，包括本班一共多少人，签到成功多少人，有哪些人位置不在范围内，有哪些人没有签到。老师可根据最后的统计信息进行抽查，提高准确率。

3 系统设计

3.1 系统功能设置

系统采用B/S架构，基于微信客户端，由发出各种操作请求，核心的部分数据比对集中到服务器上[5]。数据库操作是该系统的重要组成部分，在系统实现过程中有大量的数据库操作，合理的数据库操作可以极大地提高系统的运行速度及质量，同时这也关乎教师得到的反馈信息的准确性。

3.2 客户端界面设计

1）注册界面设计。如图3所示，在小程序初始化过程中即获取到当前用户的微信信息，注册过程中以学号或工号为账号，注册成功即将微信号与用户绑定，在此之后就只能通过该微信号进行打卡，否則打卡无效。

2）登录界面设计。如图4所示，输入学号或工号、密码即可登录成功。

3）首页设计。如图5所示，添加了学校的资讯以及一些有关大学生的信息，丰富小程序的功能。

4）打卡界面设计。如图6所示，通过微信调用手机的GPS，获取到位置信息，老师同学们根据当前是第几节课进行打卡，同时会监听系统的时钟，判断点击按钮是否在相应的时间段下，不在规定的时间段则打卡无效。

5）学生信息返回界面。如图7所示，在打卡成功后会显示该界面以示打卡成功。

6）教师信息返回界面。如图8所示，在规定的时间结束后，教师端会收到统计信息表包括班级、课程、应到多少人、实到多少人、未签到多少人，位置可疑的同学 。老师可根据返回的信息表进行下一步的活动。

7）用户中心设计。登录后可以查询自己上课的打卡情况、课程表，还可以进行问题反馈。

4 签到关键代码

data： { //数据存储

x：''，

y：''，

tx：''，

ty：''

}，

sign： function （） { //签到功能函数

const that = this

wx.getLocation（{ //获取位置信息函数

type： 'wgs84'，

success： function （res） {

var latitude = res.latitude //获取经度信息

var longitude = res.longitude //获取纬度信息

that.setData（{ x： res.latitude }） //数据存储

that.setData（{ y： res.longitude }） //数据存储

} }） }，

upload：function（）{ //获取到的位置信息上传到服务器

const query = Bmob.Query（'sign'）；

query.set（"xx"， this.data.x）

query.set（"yy"， this.data.y）

query.save（）.then（res => {

console.log（res）

}）.catch（err => {

console.log（err）

}） }，

check：function（）{ //检测位置函数

const query = Bmob.Query（user'）； //获取老师的位置信息

query.get（'objectId'）.then（res => {

console.log（res）

}）.catch（err => {

console.log（err）

}）

if（x-tx<=10&&y-ty;<=10）{ //签到成功，跳转页面

wx.navigateTo（{

url： '../call1/call1'，

}）；

wx.showToast（{

title： '签到成功'，

icon： 'none'，

duration： 2000

}） }

else{ //签到失败出现提示信息

wx.showToast（{

title： '签到失败'，

icon： 'none'，

duration： 2000

}）

} }，

onTouch： function （event） { //功能实现函数

this.sign（）；

this.upload（）；

this.check（）；

}，

else if （this.data.phone.length ！= 0 &&this.data.password.length; ！= 0 ） {

const query = Bmob.Query（'user'）； //上传数据库

query.set（"uwx"， this.data.userInfo.nickName） //设置uwx为微信昵称

query.set（"uno"， this.data.phone） //设置uno为学号、工号

query.set（"upass"， this.data.password） //设置upass为密码

query.set（"uatt"， false） //设置uatt false为学生否则為老师

query.set（"uname"， name） //设置uname为与学生表对应姓名

query.save（）.then（res => {

console.log（res）

}）.catch（err => {

console.log（err）

}）

5 结束语

该文设计了基于微信小程序的考勤系统，解决了传统上课考勤速度慢、效果差的痛点，通过该系统可以提高上课的效率，减少不必要的时间浪费，未来可在此基础上增添更多的功能，满足学生和老师在日常学习生活中的其他问题。

参考文献：

[1] 王铂智. 基于微信小程序的签到系统[J]. 电子世界， 2018（4）： 106-107.

[2] 何军. 基于Portal路由微信AP只能考勤系统的设计与实现[J]. 计算机及通信研究， 2018（3）： 56-58.

[3] 张国杰， 吴杰峰， 刘路莎， 等. 基于微信小程序的数字化社区学习地图开发[J]. 广州大学学报：社会科学版，2017（11）： 57-62.

[4] 葛会会. 基于Android 蓝牙考勤系统的设计与实现[D]. 南昌： 东华理工大学， 2016.

[5] 黄新艳. 微信小程序开发中flex布局容器及元素之属性技术释疑[J]. 信息与电脑， 2017（8）： 78-80.