基于小程序的考勤系统设计与实现 郭鑫 毛古宝 方欢摘要：高校考勤是日常教学中的一个常用事件，如何借助信息化的手段精准、快速地实现这一功能是十分必要的该文基于小程序，借助js后端设计语言及前端设计语言wxml，设计和开发了一套考勤小程序该设计的系统将用户角色分为教师和学生，可以完成教师上课考勤功能、学生主动签到等功能，系统使用测试结果表明系统的具备可使用性关键词：小程序；考勤系统；js；wxml：TP311 ：A ：1009-3044（2018）20-0057-031 背景随着互联网的快速发展以及网络速度的不断提升，越来越多的事务处理转向移动端，作为移动端的主角，正发挥着越来越大的作用通过对高校大学生的调查以及笔者自身的体会可以发现，现在大学教师考勤方法比较传统，也有过一些新鲜的尝试，但都没有大规模的施行，这些方法要么费时费力，要么可行度、精确度有待提高然而，考勤情况不仅可以作为教学质量的参考[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 = thiswx.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. -全文完-。