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


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 相关文章推荐
兼容IE/Firefox/Opera/Safari的检测页面装载完毕的脚本Ext.onReady的实现
Jul 14 Javascript
js日历功能对象
Jan 12 Javascript
js中的push和join方法使用介绍
Oct 08 Javascript
基于javascript滚动图片具体实现
Nov 18 Javascript
JS+CSS实现带有碰撞缓冲效果的竖向导航条代码
Sep 15 Javascript
jQuery实现获取绑定自定义事件元素的方法
Dec 02 Javascript
使用jQuery制作基础的Web图片轮播效果
Apr 22 Javascript
Jquery AJAX POST与GET之间的区别详细介绍
Oct 17 Javascript
Vue.js2.0中的变化小结
Oct 24 Javascript
小程序和web画三角形实现解析
Sep 02 Javascript
Vue项目打包编译优化方案
Sep 16 Javascript
js调用网络摄像头的方法
Dec 05 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
博士208HAF收音机实习报告
2021/03/02 无线电
php下intval()和(int)转换使用与区别
2008/07/18 PHP
php file_exists 检查文件或目录是否存在的函数
2010/05/10 PHP
推荐几款用 Sublime Text 开发 Laravel 所用到的插件
2014/10/30 PHP
php中解析带中文字符的url函数分享
2015/01/20 PHP
PHP实现操作redis的封装类完整实例
2015/11/14 PHP
JS event使用方法详解
2008/04/28 Javascript
JavaScript replace(rgExp,fn)正则替换的用法
2010/03/04 Javascript
JS在IE和FireFox之间常用函数的区别小结
2010/03/12 Javascript
jQuery对象的selector属性用法实例
2014/12/27 Javascript
js获取iframe中的window对象的实现方法
2016/05/20 Javascript
EasyUI Pagination 分页的两种做法小结
2016/07/09 Javascript
JavaScript实现复制文章自动添加版权
2016/08/02 Javascript
详解js中Json的语法与格式
2016/11/22 Javascript
python模块之StringIO使用示例
2015/04/08 Python
Python编程中装饰器的使用示例解析
2016/06/20 Python
Python判断文件或文件夹是否存在的三种方法
2017/07/27 Python
sublime python3 输入换行不结束的方法
2018/04/19 Python
python实现对文件中图片生成带标签的txt文件方法
2018/04/27 Python
利用Python查看微信共同好友功能的实现代码
2019/04/24 Python
Django实现跨域的2种方法
2019/07/31 Python
详解Python 重学requests发起请求的基本方式
2020/02/07 Python
用Python绘制漫步图实例讲解
2020/02/26 Python
python如何写出表白程序
2020/06/01 Python
澳大利亚自然和有机的健康美容产品一站式商店:Ziani Beauty
2017/12/28 全球购物
新闻记者实习自我鉴定
2013/09/19 职场文书
实习教师个人的自我评价
2013/11/08 职场文书
高一学生期末评语
2014/04/25 职场文书
签约仪式策划方案
2014/06/02 职场文书
国家奖学金获奖感言
2014/08/16 职场文书
2014年领班工作总结
2014/11/25 职场文书
2015年工商所工作总结
2015/05/21 职场文书
工作收入证明模板
2015/06/12 职场文书
2016年学校“3.12”植树节活动总结
2016/03/16 职场文书
2019中秋节祝福语大全,提前收藏啦
2019/09/10 职场文书
【海涛解说】pis亲自推荐,其实你从来不会玩NW
2022/04/01 DOTA