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


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 相关文章推荐
List the Codec Files on a Computer
Jun 11 Javascript
Mootools 1.2教程 Tooltips
Sep 15 Javascript
跨域表单提交状态的变相判断代码
Nov 12 Javascript
Javascript 中的类和闭包
Jan 08 Javascript
javascript 函数使用说明
Apr 07 Javascript
jQuery实用基础超详细介绍
Apr 11 Javascript
js实现数组转换成json
Jun 26 Javascript
js带缩略图的图片轮播效果代码分享
Sep 14 Javascript
JS设置下拉列表框当前所选值的方法
Dec 22 Javascript
jQuery基于toggle实现click触发DIV的显示与隐藏问题分析
Jun 12 Javascript
vue.js 实现点击展开收起动画效果
Jul 07 Javascript
详解vue中router-link标签所必备了解的属性
Apr 15 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
一个PHP并发访问实例代码
2012/09/06 PHP
PHP Switch 语句之学习笔记
2013/09/21 PHP
简单的php文件上传(实例)
2013/10/27 PHP
php中有关字符串的4个函数substr、strrchr、strstr、ereg介绍和使用例子
2014/04/24 PHP
WordPress开发中短代码的实现及相关函数使用技巧
2016/01/05 PHP
CI配置多数据库访问的方法
2016/03/28 PHP
php 输出缓冲 Output Control用法实例详解
2020/03/03 PHP
用jQuery模拟页面加载进度条的实现代码
2011/12/19 Javascript
js 字符串转换成数字的三种方法
2013/03/23 Javascript
JS实现清除指定cookies的方法
2014/09/20 Javascript
jQuery中Form相关知识汇总
2015/01/06 Javascript
使用JavaScript刷新网页的方法
2015/06/04 Javascript
jQuery替换textarea中换行的方法
2015/06/10 Javascript
基于jQuery+Cookie实现的防止刷新的在线考试倒计时
2015/06/19 Javascript
javascript的document中的动态添加标签实现方法
2016/10/24 Javascript
jquery实现左右滑动式轮播图
2017/03/02 Javascript
Vue.js开发环境快速搭建教程
2017/03/17 Javascript
移动web开发之touch事件实例详解
2018/01/17 Javascript
Django+Vue跨域环境配置详解
2018/07/06 Javascript
微信小程序 bindtap 传参的实例代码
2020/02/21 Javascript
JavaScript数组排序功能简单实现
2020/05/14 Javascript
Python 探针的实现原理
2016/04/23 Python
Python设计模式之简单工厂模式实例详解
2019/01/22 Python
Django 通过JS实现ajax过程详解
2019/07/30 Python
利用PyTorch实现VGG16教程
2020/06/24 Python
CSS3动画效果回调处理详解
2014/12/10 HTML / CSS
html5 worker 实例(一) 为什么测试不到效果
2013/06/24 HTML / CSS
详解快速开发基于 HTML5 网络拓扑图应用
2018/01/08 HTML / CSS
大学生村官心得体会范文
2014/01/04 职场文书
七年级政治教学反思
2014/02/03 职场文书
3分钟英语演讲稿
2014/04/29 职场文书
2014年信访工作总结
2014/11/17 职场文书
首都博物馆观后感
2015/06/05 职场文书
解决golang在import自己的包报错的问题
2021/04/29 Golang
Vue详细的入门笔记
2021/05/10 Vue.js
MySQL 数据类型选择原则
2021/05/27 MySQL