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


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 相关文章推荐
javascript相等运算符与等同运算符详细介绍
Nov 09 Javascript
JS获取月的最后一天与JS得到一个月份最大天数的实例代码
Dec 16 Javascript
javascript实现表格排序 编辑 拖拽 缩放
Jan 02 Javascript
使用JS画图之点、线、面
Jan 12 Javascript
jquery实现textarea输入框限制字数的方法
Jan 15 Javascript
bootstrap table 服务器端分页例子分享
Feb 10 Javascript
如何解决js函数防抖、节流出现的问题
Jun 17 Javascript
新手快速入门微信小程序组件库 iView Weapp
Jun 24 Javascript
详解json串反转义(消除反斜杠)
Aug 12 Javascript
微信小程序授权登陆及每次检查是否授权实例代码
Sep 18 Javascript
微信小程序全局变量GLOBALDATA的定义和调用过程解析
Sep 23 Javascript
原生javascript制作的拼图游戏实现方法详解
Feb 23 Javascript
解决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
apache和php之间协同工作的配置经验分享
2013/04/08 PHP
PHP file_get_contents函数读取远程数据超时的解决方法
2015/05/13 PHP
PHP的PDO错误与错误处理
2019/01/27 PHP
拖动一个HTML元素
2006/12/22 Javascript
JQuery自定义事件的应用 JQuery最佳实践
2010/08/01 Javascript
jquery 按钮状态效果 正常、移上、按下
2013/08/12 Javascript
jQuery常用数据处理方法小结
2015/02/20 Javascript
JavaScript实现彩虹文字效果的方法
2015/04/16 Javascript
jquery checkbox无法用attr()二次勾选问题的解决方法
2016/07/22 Javascript
js学习总结_基于数据类型检测的四种方式(必看)
2017/07/04 Javascript
JS库之wow.js使用方法
2017/09/14 Javascript
vue 的keep-alive缓存功能的实现
2018/03/22 Javascript
JS简单实现动态添加HTML标记的方法示例
2018/04/08 Javascript
详解javascript中的Error对象
2019/04/25 Javascript
javascript实现日历效果
2019/06/17 Javascript
在vue中使用回调函数,this调用无效的解决
2020/08/11 Javascript
[01:03:00]DOTA2上海特级锦标赛A组败者赛 EHOME VS CDEC第一局
2016/02/25 DOTA
python文件的md5加密方法
2016/04/06 Python
使用Python对SQLite数据库操作
2017/04/06 Python
使用Python实现博客上进行自动翻页
2017/08/23 Python
对python 多线程中的守护线程与join的用法详解
2019/02/18 Python
Python常用的json标准库
2019/02/19 Python
Python发展史及网络爬虫
2019/06/19 Python
django最快程序开发流程详解
2019/07/19 Python
python使用sklearn实现决策树的方法示例
2019/09/12 Python
pandas 对group进行聚合的例子
2019/12/27 Python
Python3自动生成MySQL数据字典的markdown文本的实现
2020/05/07 Python
请写出char *p与"零值"比较的if语句
2014/09/24 面试题
口腔工艺技术专业毕业生自荐信
2013/09/27 职场文书
法律专业学生的自我评价
2014/02/07 职场文书
2014年应急管理工作总结
2014/11/26 职场文书
党小组考察意见
2015/06/02 职场文书
2019年员工晋升管理制度范本!
2019/07/08 职场文书
eclipse创建项目没有dynamic web的解决方法
2021/06/24 Java/Android
JS函数式编程实现XDM一
2022/06/16 Javascript
nginx代理实现静态资源访问的示例代码
2022/07/07 Servers