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

一。手动生成二维码的.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._idconsole.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 = thiswx.cloud.callFunction({name: "getopenid",success(res) {var openid = res.result.openidDB.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].statctimevar en = e.data[i].endtimethat.setData({statc: st,now: '已签到',color: 'rgb(199, 194, 194)',})}}},fail(e) {console.log("查询失败", e)}})console.log("获取成功", res.result.openid)},fail(res) {console.log("获取成功", res)}})

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

微信小程序实现二维码签到考勤相关推荐

【微信小程序】二维码跳转规则的前缀匹配是什么意思？
前言基础库 2.12.0 开发者工具 1.03.2008270 微信小程序的二维码跳转规则为了方便小程序开发者更便捷地推广小程序,兼容线下已有的二维码,微信公众平台开放扫描普通链接二维码跳转小程序 ...
微信小程序获取二维码中URL中带的参数
解析微信小程序获取二维码中的url参数 onLoad: function (options) { console.log(options) let qrUrl = decodeURIComponent ...
微信小程序普通二维码解析
1.区别于微信小程序官方二维码是直接从onLoad的 options 解构出来就行,它是一个对象,这个大家都知道. 2.普通二维码也是从onLoad的 options 里解构出来,此时options ...
微信小程序扫描二维码或者条码
程序是需要扫描条形码然后跳转到对应的产品信息页,其实微信小程序就有一个扫码识别的API,下面一起来看看: wx.scanCode(Object object) 调起客户端扫码界面进行扫码. 示例代码: ...
微信小程序转二维码方法分享
微信小程序转二维码方法分享需要转码的可以看看这个东西是看个人需求的,618就要来了,各种活动也将来袭有些小伙伴不知道怎么生成为了方便小程序邀请活动没法外发,这里分享下将小程序转二维码的方法首 ...
微信小程序分享二维码生成
生成微信小程序分享二维码微信小程序官方开放的二维码的接口,其中有一个是生成小程序二维码的,还有一个是圆形的小程序码,我这里就用php生成二维码. 完整代码: public function shar ...
微信小程序获取二维码接口整理，.Net Core后台获取小程序二维码
2019独角兽企业重金招聘Python工程师标准>>> 一.关于二维码接口说明参考:https://my.oschina.net/tianma3798/blog/1811307 获 ...
C#生成微信小程序文章二维码
/// <summary>/// 获取access_token/// </summary>/// <returns></returns>[HttpGet ...
微信小程序获取二维码
原文链接:https://blog.csdn.net/w410589502/article/details/77702358/ 版权归原有博主,此处为了方便自己是查看,故copy一份,B接口调用,亲测 ...
张小龙详细解读：微信小程序扫描二维码可进入（附实录）
在今天举行的2017微信公开课PRO版上,腾讯微信负责人张小龙表示,微信小程序特性是:无须安装.触手可及.用完即走.无须卸载. 张小龙解答了关于小程序的疑问,并透露小程序计划于2017年1月9日正式上 ...

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

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

微信小程序实现二维码签到考勤相关推荐

最新文章

热门文章