当前位置： 移动技术网 > IT编程>开发语言>JavaScript > 微信小程序实现二维码签到考勤系统

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

2020年03月09日  | 移动技术网IT编程  | 我要评论

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

这里要引入一个官方文档

let drawqrcode = 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() {
  let size = {};
  // getsysteminfosync 微信小程序提供getsysteminfosync获取设备的信息
  let res = wx.getsysteminfosync();
  // console.log(res);
  // 获取比例
  let scale = 686 / 750;
  let width = res.windowwidth * scale;
  let height = width;
  size.w = width;
  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;
  wx.showtoast({
   title: '生成中',
   icon: 'loading',
   duration: 2000
  })
  let that_ = this;

  let timer = settimeout(() => {
   let size = that_.setcanvassize();
   //调用createqrcode方法
   that_.createqrcode(size.w, size.h, 'mycanvars', url);
   wx.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.w, size.h, 'mycanvars', url);
 },

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

const db = wx.cloud.database().collection("cows")
const tb = wx.cloud.database().collection("log")
let i = 0
let id=''
var util = require('../utils/util.js');

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

now(){
  
  var that = this;
  console.log(that.data.nows)
  if (i == 0 && that.data.now =='签到'){
   i=1;
   var time1 = util.formattime(new date())
   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: '签到成功'
   })
   var timeout= settimeout(function(){
    wx.switchtab({
     url: '/pages/arrary/first/ones/ones',
    })
   },1000)
   
  }
  else{
   wx.showtoast({
    title: '已签到，请勿重复签到',
    icon: 'none'
   })
  }
 },
 nows(){
  var that = this;
  if (i == 1 || that.data.now == '已签到' && that.data.nows == '签退'){
   i=2;
   var time2 = util.formattime(new date())
   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'
    })
   }
  }
 },

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

 var that = this
  wx.cloud.callfunction({
   name: "getopenid",
   success(res) {
    var openid = res.result.openid
    db.get({
     success(e) {
      console.log(e)
      var lenths = e.data.length;
      console.log(lenths);
      var time1 = util.formattime(new 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,
         now: '已签到',
         color: 'rgb(199, 194, 194)',
        })
       }
      }
     },
     fail(e) {
      console.log("查询失败", e)
     }
    })
    console.log("获取成功", res.result.openid)

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

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

总结

以上所述是小编给大家介绍的微信小程序实现二维码签到考勤系统，希望对大家有所帮助

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网