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


Posted in Javascript onJanuary 16, 2020

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

这里要引入一个官方文档wxapp.qrcode.min.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)
   }
  })

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

总结

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

Javascript 相关文章推荐
$.format,jquery.format 使用说明
Jul 13 Javascript
JQuery 返回布尔值Is()条件判断方法代码
May 14 Javascript
JS实现鼠标经过好友列表中的好友头像时显示资料卡的效果
Jul 02 Javascript
jQuery中wrapAll()方法用法实例
Jan 16 Javascript
通过Jquery.cookie.js实现展示浏览网页的历史记录超管用
Oct 23 Javascript
javascript实现拖放效果
Dec 16 Javascript
JavaScript类型检测之typeof 和 instanceof 的缺陷与优化
Jan 13 Javascript
AngularJS Bootstrap详细介绍及实例代码
Jul 28 Javascript
前端设计师们最常用的JS代码汇总
Sep 25 Javascript
Bootstrap选项卡动态切换效果
Nov 28 Javascript
详解vuex持久化插件解决浏览器刷新数据消失问题
Apr 15 Javascript
如何让vue长列表快速加载
Mar 29 Vue.js
解决vue+ element ui 表单验证有值但验证失败问题
Jan 16 #Javascript
JavaScript实现简单的计算器
Jan 16 #Javascript
js面向对象之实现淘宝放大镜
Jan 15 #Javascript
js实现简单的打印表格
Jan 15 #Javascript
js实现图片实时时钟
Jan 15 #Javascript
js实现中文实时时钟
Jan 15 #Javascript
JS实现音量控制拖动
Jan 15 #Javascript
You might like
怎么使 Mysql 数据同步
2006/10/09 PHP
php从数据库读取数据,并以json格式返回数据的方法
2018/08/21 PHP
使用PHPWord生成word文档的方法详解
2019/06/06 PHP
PHP date_default_timezone_set()设置时区操作实例分析
2020/05/16 PHP
js判断undefined类型示例代码
2014/02/10 Javascript
jquery取子节点及当前节点属性值的方法
2014/09/09 Javascript
BootStrap树状图显示功能
2016/11/24 Javascript
NodeJS使用七牛云存储上传文件的方法
2017/07/24 NodeJs
Angular入口组件(entry component)与声明式组件的区别详解
2018/04/09 Javascript
js使用ajax传值给后台,后台返回字符串处理方法
2018/08/08 Javascript
jquery实现动态添加附件功能
2018/10/23 jQuery
Vux+Axios拦截器增加loading的问题及实现方法
2018/11/08 Javascript
JS中使用cavas截图网页并解决跨域及模糊问题
2018/11/13 Javascript
Bootstrap Paginator+PageHelper实现分页效果
2018/12/29 Javascript
ES6模板字符串和标签模板的应用实例分析
2019/06/25 Javascript
解决layer.confirm快速点击会重复触发事件的问题
2019/09/23 Javascript
vue中监听路由参数的变化及方法
2019/12/06 Javascript
JavaScript事件循环及宏任务微任务原理解析
2020/09/02 Javascript
[26:24]完美副总裁、DOTA2负责人蔡玮专访:电竞如人生
2014/09/11 DOTA
[01:08]DOTA2“血战之命”预告片
2017/08/12 DOTA
Python实现的几个常用排序算法实例
2014/06/16 Python
Windows上配置Emacs来开发Python及用Python扩展Emacs
2015/11/20 Python
python中根据字符串调用函数的实现方法
2016/06/12 Python
python中使用iterrows()对dataframe进行遍历的实例
2018/06/09 Python
python实现机器学习之多元线性回归
2018/09/06 Python
python矩阵的转置和逆转实例
2018/12/12 Python
Python设置matplotlib.plot的坐标轴刻度间隔以及刻度范围
2019/06/25 Python
基于python计算并显示日间、星期客流高峰
2020/05/07 Python
欧洲最大的美妆零售网站:Feelunique
2017/01/14 全球购物
西班牙多品牌鞋店连锁店:Krack
2018/11/30 全球购物
编程实现当输入某产品代码则打印出该产品记录的功能
2014/05/03 面试题
绿色家庭事迹材料
2014/05/01 职场文书
2015年销售部工作总结范文
2015/04/27 职场文书
毕业论文答辩稿范文
2015/06/23 职场文书
解决Goland 同一个package中函数互相调用的问题
2021/05/06 Golang
《原神》新角色演示“神里绫人:林隐泓洄” 宠妹狂魔
2022/04/03 其他游戏