这篇文章主要介绍了微信小程序实现二维码签到考勤系统，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下
一。手动生成二维码的.js代码
这里要引入一个官方文档wxapp.qrcode.min.js
let drawQrcode=require('./utils/wx app。二维码。量滴js’)；//引入wxapp.qrcode.min.js文件
createQRcode(canvasWidth，canvasHeight，canvasId，url) {
//调用qrcode.js里的方法，传入对应参数
drawQrcode({
宽度：canvasWidth，
身高：canvasHeight，
canvasId: canvasId，
文本：url
})
console.log(drawQrcode.width)
},
setCanvasSize() {
let size={ }；
//getSystemInfoSync微信小程序提供getSystemInfoSync获取设备的信息
设RES=wx。getsysteminfosync()；
//控制台。日志(分辨率)；
//获取比例
设比例=686/750；
let width=分辨率窗口宽度*比例；
设高度=宽度；
size.w=宽度；
size.h=高度；
返回大小；
},
表单提交(e) {
设URL=e . detail。价值。网址| |这个。数据。占位符；
//let url=e.detail.value.url？e .细节。价值。网址：这个。数据。占位符；
wx.showToast({
标题： '生成中，
图标："正在加载",
持续时间：2000年
})
让那个_=这个；
让timer=setTimeout(()={
让size=that_ .setCanvasSize()；
//调用创建二维码方法
那个_。createQRcode(size.w，size.h，' mycanvars '，URL)；
wx。隐藏toast()；
清除超时(定时器);
}, 2000)},
/**
* 生命周期函数-监听页面加载
*/
加载：函数（选项){
//setCanvasSize拿到画布区域的尺寸（微信小程序不支持数字正射影像图的操作，所以单独定义方法去获取)
让大小=这个。setcanvassize()；
//console.log(大小);
设URL=this。数据。占位符；
//调用创建二维码方法
this.createQRcode(size.w，size.h，' mycanvars '，URL)；
},
二。准备工作，导入数据库表，和unit.js。获取时间
const DB=wx.cloud.database().收藏("奶牛")
const TB=wx.cloud.database().集合("日志")
设i=0
让id=' '
var util=require('./utils/util。js’)；
三。写入签到签退按钮的.js代码
现在(){
变那个=这个
console.log(that.data.nows)
if (i==0 that.data.now=='签到'){
I=1；
var time1=util.formatTime(新日期())
DB.add({
数据：{
statctime:时间1,
结束时间：""
},
成功(资源){
id=res._id
console.log('签到成功资源id)
},
失败(资源){
console.log('签到失败，res)
}
})
that.setData({
statc:时间1,
现在： '已签到，
颜色：' rgb(199，194，194)'
})
wx.showToast({
标题： '签到成功'
})
var time out=setTimeout(function(){
wx.switchTab({
URL:"/pages/array/first/ones/ones "，
})
},1000)
}
否则{
wx.showToast({
标题： '已签到，请勿重复签到，
图标："无"
})
}
},
nows(){
变那个=这个
if (i==1 || that.data.now=='已签到that.data.nows=='签退'){
I=2；
var time2=util.formatTime(新日期())
DB.doc(id).更新({
数据：{
结束时间：时间2
},
成功(资源){
console.log('签退成功，res)
},
失败(资源){
console.log('签退失败，res)
}
})
that.setData({
结束：时间2,
现在： '已签退，
颜色：' rgb(199，194，194)'
})
wx.showToast({
标题： '签退成功'
})
}
其他
{
if(i==2){
wx.showToast({
标题： '已签退，请勿重复签退，
图标："无"
})
}
否则{
wx.showToast({
标题： '请先签到，签到之后方可签退!',
图标："无"
})
}
}
},
第四。页面监听签退后会跳出签退页面。重新进入需要监听。
变那个=这个
wx.cloud.callFunction({
名称：' getopenid '，
成功(资源){
var openid=res.result.openid
DB.get({
成功(e) {
console.log(e)
变量长度=e .数据。长度；
console.log(长度);
var time1=util.formatTime(新日期())
for(var I=0；我lenthsi ) {
if (e.data[i]._ OpenID==OpenID e . data[I]. stat time . substring(0，10)==time1.substring(0，10)) {
var st=e.data[i]。statctime
var en=e.data[i]。结束时间
that.setData({
statc: st，
现在：“已登记”，
颜色：' rgb(199，194，194)'，
})
}
}
},
失败(e) {
Console.log('查询失败'，e)
}
})
Console.log ('get success '，res.result.openid)
},
失败(res) {
Console.log ('get success '，res)
}
})
至此，一个简单的签到页面就完成了。如果有什么不对，菜鸟期待大神的指导。
希望对你有用。
总结
以上是边肖介绍的实现二维码签到考勤系统的微信小程序。希望对你有帮助。如果您有任何问题，请给我留言，边肖将及时回复您。非常感谢您对我们网站的支持！
如果你觉得这篇文章对你有帮助，请转载，请注明出处，谢谢！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。