微信小程序实现二维码签到考勤系统
一。手动生成二维码的.js代码
这里要引入一个官方文档wxapp.qrcode.min.js
letdrawQrcode=require('../utils/wxapp.qrcode.min.js');//引入wxapp.qrcode.min.js文件
createQRcode(canvasWidth,canvasHeight,canvasId,url){
//调用qrcode.js里的方法，传入对应参数
drawQrcode({
width:canvasWidth,
height:canvasHeight,
canvasId:canvasId,
text:url
})
console.log(drawQrcode.width)
},
setCanvasSize(){
letsize={};
//getSystemInfoSync微信小程序提供getSystemInfoSync获取设备的信息
letres=wx.getSystemInfoSync();
//console.log(res);
//获取比例
letscale=686/750;
letwidth=res.windowWidth*scale;
letheight=width;
size.w=width;
size.h=height;
returnsize;
},
formsubmit(e){
leturl=e.detail.value.url||this.data.placeholder;
//leturl=e.detail.value.url?e.detail.value.url:this.data.placeholder;
wx.showToast({
title:'生成中',
icon:'loading',
duration:2000
})
letthat_=this;
lettimer=setTimeout(()=>{
letsize=that_.setCanvasSize();
//调用createQRcode方法
that_.createQRcode(size.w,size.h,'mycanvars',url);
wx.hideToast();
clearTimeout(timer);
},2000)},
/**
*生命周期函数--监听页面加载
*/
onLoad:function(options){
//setCanvasSize拿到画布区域的尺寸（微信小程序不支持dom的操作，所以单独定义方法去获取）
letsize=this.setCanvasSize();
//console.log(size);
leturl=this.data.placeholder;
//调用createQRcode方法
this.createQRcode(size.w,size.h,'mycanvars',url);
},
二。准备工作，导入数据库表，和unit.js。获取时间
constDB=wx.cloud.database().collection("cows")
constTB=wx.cloud.database().collection("log")
leti=0
letid=''
varutil=require('../utils/util.js');
三。写入签到签退按钮的.js代码
now(){
varthat=this;
console.log(that.data.nows)
if(i==0&&that.data.now=='签到'){
i=1;
vartime1=util.formatTime(newDate())
DB.add({
data:{
statctime:time1,
endtime:''
},
success(res){
id=res._id
console.log("签到成功",res._id)
},
fail(res){
console.log("签到失败",res)
}
})
that.setData({
statc:time1,
now:'已签到',
color:'rgb(199,194,194)'
})
wx.showToast({
title:'签到成功'
})
vartimeout=setTimeout(function(){
wx.switchTab({
url:'/pages/arrary/first/ones/ones',
})
},1000)
}
else{
wx.showToast({
title:'已签到，请勿重复签到',
icon:'none'
})
}
},
nows(){
varthat=this;
if(i==1||that.data.now=='已签到'&&that.data.nows=='签退'){
i=2;
vartime2=util.formatTime(newDate())
DB.doc(id).update({
data:{
endtime:time2
},
success(res){
console.log("签退成功",res)
},
fail(res){
console.log("签退失败",res)
}
})
that.setData({
ends:time2,
nows:'已签退',
colors:'rgb(199,194,194)'
})
wx.showToast({
title:'签退成功'
})
}
else
{
if(i==2){
wx.showToast({
title:'已签退，请勿重复签退',
icon:'none'
})
}
else{
wx.showToast({
title:'请先签到，签到之后方可签退！',
icon:'none'
})
}
}
},
第四。页面监听签退后会跳出签退页面。重新进入需要监听。
varthat=this
wx.cloud.callFunction({
name:"getopenid",
success(res){
varopenid=res.result.openid
DB.get({
success(e){
console.log(e)
varlenths=e.data.length;
console.log(lenths);
vartime1=util.formatTime(newDate())
for(vari=0;i
到这，一个简单的签到页面就完成了。如有不对的地方，小菜鸟期盼大神的指导。
希望对你们有用处。
总结
以上所述是小编给大家介绍的微信小程序实现二维码签到考勤系统，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对毛票票网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！
声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。