门禁系统是一个经典系统，很多人都在做，比如说指纹门禁、人脸门禁等。二维码门禁相比于传统的门禁有什么特点：1：权限分明，2：日志跟踪，3：管理方便。
硬件：二维码扫描器、继电器、电池锁、网线
软件：微信小程序（前端）、web（后台）
技术：二维码生成、二维码解码、http协议数据传输和接受、局域网使用、公网使用
微信小程序生成二维码代码
// pages/main/index.js
var QR = require("../../utils/qrcode.js");
Page({
data: {
canvasHidden: false,
maskHidden: true,
imagePath: '',
placeholder: '如：A401'//默认二维码生成文本
},
onLoad: function (options) {
// 页面初始化 options为页面跳转所带来的参数
var size = this.setCanvasSize();//动态设置画布大小
var initUrl = this.data.placeholder;
this.createQrCode(initUrl, "mycanvas", size.w, size.h);
//获取access_token
wx.request({
url: 'https://www.babybackhome.com/lg/wxsendmesController/at',
success: function (res) {
var at = wx.setStorageSync("at", res.data.mes)
console.log("后台获取的access——token"+res.data.mes)
}
})
//获取openid
wx.login({
success: function (res) {
var code1 = res.code
var appid1 = "wx9d0142f81a1707c4"
var secret1 = "ececd3066a8334df7905c35502242498"
var ul = 'https://api.weixin.qq.com/sns/jscode2session?appid=' + appid1 + '&secret=' + secret1 + '&js_code=' + code1 + '&grant_type=authorization_code'
//获取openid
wx.request({
url: ul,
method: 'GET',
success: function (e) {
var openid = e.data.openid
console.log('获取登录身份的唯一openid', openid)
wx.setStorageSync('openid', openid)
}
})
}
})
},
onReady: function () {
},
onShow: function () {
// 页面显示
},
onHide: function () {
// 页面隐藏
},
onPullDownRefresh: function () {
//获取access_token
wx.request({
url: 'https://www.babybackhome.com/lg/wxsendmesController/at',
success: function (res) {
var at = wx.setStorageSync("at", res.data.mes)
console.log(res.data.mes)
}
})
//获取openid
wx.login({
success: function (res) {
var code1 = res.code
var appid1 = "wx9d0142f81a1707c4"
var secret1 = "ececd3066a8334df7905c35502242498"
var ul = 'https://api.weixin.qq.com/sns/jscode2session?appid=' + appid1 + '&secret=' + secret1 + '&js_code=' + code1 + '&grant_type=authorization_code'
//获取openid
wx.request({
url: ul,
method: 'GET',
success: function (e) {
var openid = e.data.openid
console.log('获取登录身份的唯一openid', openid)
wx.setStorageSync('openid', openid)
}
})
}
})
},
onUnload: function () {
// 页面关闭
},
//适配不同屏幕大小的canvas
setCanvasSize: function () {
var size = {};
try {
var res = wx.getSystemInfoSync();
var scale = 750 / 686;//不同屏幕下canvas的适配比例；设计稿是750宽
var width = res.windowWidth / scale;
var height = width;//canvas画布为正方形
size.w = width;
size.h = height;
} catch (e) {
// Do something when catch error
console.log("获取设备信息失败" + e);
}
return size;
},
createQrCode: function (url, canvasId, cavW, cavH) {
//调用插件中的draw方法，绘制二维码图片
QR.api.draw(url, canvasId, cavW, cavH);
setTimeout(() => { this.canvasToTempImage(); }, 1000);
},
//获取临时缓存照片路径，存入data中
canvasToTempImage: function () {
var that = this;
wx.canvasToTempFilePath({
canvasId: 'mycanvas',
success: function (res) {
var tempFilePath = res.tempFilePath;
console.log(tempFilePath);
that.setData({
imagePath: tempFilePath,
// canvasHidden:true
});
},
fail: function (res) {
console.log(res);
}
});
},
//点击图片进行预览，长按保存分享图片
previewImg: function (e) {
var img = this.data.imagePath;
console.log(img);
wx.previewImage({
current: img, // 当前显示图片的http链接
urls: [img] // 需要预览的图片http链接列表
})
},
formSubmit: function (e) {
var that = this;
var url = e.detail.value.url;
//获取fromid
that.setData({
maskHidden: false,
});
wx.showToast({
title: '生成中...',
icon: 'loading',
duration: 2000
});
var st = setTimeout(function () {
wx.hideToast()
var size = that.setCanvasSize();
//绘制二维码
that.createQrCode(url, "mycanvas", size.w, size.h);
that.setData({
maskHidden: true
});
clearTimeout(st);
}, 2000)
//消息服务通知
//获取fromid
var fromid = e.detail.formId
wx.setStorageSync("fromid", fromid)
//往后台传输数据存到数据库
var today = new Date();
var year = today.getFullYear();
var m1 = today.getMonth();
var month = m1 + 1
var day = today.getDate();
var h = today.getHours();
var m = today.getMinutes();
var etime = year + "-" + month + "-" + day
var time = h + ":" + m
let _jsonData =
{
"touser": wx.getStorageSync("openid"),
"weapp_template_msg": {
"template_id": "rziENQKqDXfCWPF7sN1C1JNyI0RHBavc8JF2ZbF3JdQ",
//服务通知中进入小程序的入口
"page": "pages/index/index",
"form_id": e.detail.formId,
"data": {
"keyword1": {
"value": wx.getStorageSync("name")
},
"keyword2": {
"value": etime
},
"keyword3": {
"value": time
},
"keyword4": {
"value": "内蒙古师范大学大数据楼316"
}
},
"emphasis_keyword": "keyword1.DATA"
}
}
wx.request({
url: 'https://www.babybackhome.com/lg/wxsendmesController/addsenddata',
data: _jsonData,
method: 'POST',
header: {
'content-type': 'application/json' // 默认值
},
success: function (res) {
console.log("res")
console.log(res)
}
})
// wx.request({
// url: 'https://www.lined5530.top/lg/wxsendmesController/sendMsg',
// data: _jsonData,
// method: 'POST',
// header: {
// 'content-type': 'application/json' // 默认值
// },
// success: function (res) {
// console.log("res")
// console.log(res)
// }
// })
// console.log("faxiaox")
}
})
实现主要思路，微信小程序生成二维码，二维码扫描器解码，通过http协议将数据传输到后台，后台对应的接口接受数据，进行逻辑处理。只要给扫描器返回高低电平就可以，实现门禁控制。
具体实现效果：
关注公众号：小白XBIT
可以看到实现效果，更多的源码等你来拿。
