vue实现动态二维码完成签到功能

最近在项目中通过前端生成的动态二维码完成签到功能

下面使整体项目的逻辑思路：

动态的生成二维码并且获取当前的时间戳，通过扫码比对时间戳过后确定是否签到成功。

步骤

• 使用npm安装qrCodejs2-在所需的页面导入

npm install qrcodejs2

• 写一个div容器用于生成二维码的存放

 

•  在页面中生成二维码，通过开启关闭定时器刷新二维码实现动态功能

creatQrCode() {
      return new QRCode(this.$refs.qrCodeUrl, {
        text: "", // 需要转换为二维码的内容
        width: 360,
        height: 360,
        correctLevel: QRCode.CorrectLevel.L
      });
    },
    start() {
    
      if (this.timer) {
        clearInterval(this.timer);
        this.timer = null;
      } else {
        this.timer = setInterval(() => {
          this.qrcode.clear();
          let obj = {}//二维码携带的数据
          this.qrcode.makeCode(JSON.stringify(obj));
        }, 3000);
      }
    },

• 在移动端页面通过uniApp扫码的控件并且扫描二维码

tips：这个在这里不是重点，就先不进行阐述，关于生成扫码空间的问题将会在下一篇文章中详细说明

https://blog.csdn.net/qq_43641432/article/details/109210697

将扫码的结果返回通过JSON对象将获取到的String解析判断是否扫码是指定的二维码，如果不是指定的二维码，则返回扫码不正确。如果是指定的二维码，则判断当前的时间和二维码携带的时间戳之差是否大于指定的时间差。如果小于，则签到成功。传给后端正确的数据。

tips：以上内容以供记录自己的一些小经验以及以后复习知识使用，欢迎各位大佬评论指正。