微信小程序实现二维码签到考勤系统

一。手动生成二维码的.js代码

这里要引入一个官方文档xapp.qrcode.min.js

let draQrcode = require('../utils/xapp.qrcode.min.js');//引入xapp.qrcode.min.js文件
createQRcode(canvasWidth, canvasHeight, canvasId, url) {
  // 调用qrcode.js里的方法，传入对应参数
  draQrcode({
   idth: canvasWidth,
   height: canvasHeight,
   canvasId: canvasId,
   text: url
  })
  console.log(draQrcode.idth)
 },
 setCanvasSize() {
  let size = {};
  // getSystemInfoSync 微信小程序提供getSystemInfoSync获取设备的信息
  let res = x.getSystemInfoSync();
  // console.log(res);
  // 获取比例
  let scale = 686 / 750;
  let idth = res.indoWidth  scale;
  let height = idth;
  size. = idth;
  size.h = height;
  return size;
 },
 formsubmit(e) {
  let url = e.detail.value.url || this.data.placeholder;
  // let url = e.detail.value.url ? e.detail.value.url : this.data.placeholder;
  x.shoToast({
   title: '生成中',
   icon: 'loading',
   duration: 2000
  })
  let that_ = this;

  let timer = setTimeout(() => {
   let size = that_.setCanvasSize();
   //调用createQRcode方法
   that_.createQRcode(size., size.h, 'mycanvars', url);
   x.hideToast();
   clearTimeout(timer);
  }, 2000)},


 
 onLoad: function (options) {
  //setCanvasSize 拿到画布区域的尺寸（微信小程序不支持dom的操作，所以单独定义方法去获取）
  let size = this.setCanvasSize();
  // console.log(size);
  let url = this.data.placeholder;
  //调用createQRcode方法
  this.createQRcode(size., size.h, 'mycanvars', url);
 },

二。准备工作，导入数据库表，和unit.js。获取时间

const DB = x.cloud.database().collection("cos")
const TB = x.cloud.database().collection("log")
let i = 0
let id=''
var util = require('../utils/util.js');

三。写入签到签退按钮的.js代码

no(){
  
  var that = this;
  console.log(that.data.nos)
  if (i == 0 && that.data.no =='签到'){
   i=1;
   var time1 = util.formatTime(ne Date())
   DB.add({
 data: {
  statctime:time1,
  endtime: ''
 },
 suess(res) {
  id=res._id
  console.log("签到成功", res._id)
 },
 fail(res) {
  console.log("签到失败", res)
 }
   })
   that.setData({
 statc: time1,
 no: '已签到',
 color: 'rgb(199, 194, 194)'
   })
   x.shoToast({
 title: '签到成功'
   })
   var timeout= setTimeout(function(){
 x.sitchTab({
  url: '/pages/arrary/first/ones/ones',
 })
   },1000)
   
  }
  else{
   x.shoToast({
 title: '已签到，请勿重复签到',
 icon: 'none'
   })
  }
 },
 nos(){
  var that = this;
  if (i == 1 || that.data.no == '已签到' && that.data.nos == '签退'){
   i=2;
   var time2 = util.formatTime(ne Date())
   DB.doc(id).update({
 data: {
  endtime: time2
 },
 suess(res) {
  console.log("签退成功", res)
 },
 fail(res) {
  console.log("签退失败", res)
 }
   })
   that.setData({
 ends: time2,
 nos: '已签退',
 colors: 'rgb(199, 194, 194)'
   })
   x.shoToast({
 title: '签退成功'
   })
  }
  else
  {
   if(i==2){
 x.shoToast({
  title: '已签退，请勿重复签退',
  icon: 'none'
 })
   }
   else{
 x.shoToast({
  title: '请先签到，签到之后方可签退！',
  icon: 'none'
 })
   }
  }
 },

第四。页面监听签退后会跳出签退页面。重新进入需要监听。

 var that = this
  x.cloud.callFunction({
   name: "geenid",
   suess(res) {
 var openid = res.result.openid
 DB.get({
  suess(e) {
   console.log(e)
   var lenths = e.data.length;
   console.log(lenths);
   var time1 = util.formatTime(ne Date())
   for (var i = 0; i < lenths; i++) {
if (e.data[i]._openid == openid && e.data[i].statctime.substring(0, 10) == time1.substring(0, 10)) {
 var st = e.data[i].statctime
 var en = e.data[i].endtime
 that.setData({
  statc: st,
  no: '已签到',
  color: 'rgb(199, 194, 194)',
 })
}
   }
  },
  fail(e) {
   console.log("查询失败", e)
  }
 })
 console.log("获取成功", res.result.openid)

   },
   fail(res) {
 console.log("获取成功", res)
   }
  })

到这，一个简单的签到页面就完成了。如有不对的地方，小菜鸟期盼大神的指导。
电脑维修网希望对你们有用处。

以上所述是我给大家介绍的微信小程序实现二维码签到考勤系统，如果大家有任何疑问请给我留言，我会及时回复大家的。在此也非常感谢大家对考高分网网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！