小程序内生成二维码并自动刷新

微信小程序内生成二维码，自动刷新，手动停止刷新，超时停止刷新等

小程序码

页面中有canvas和image两种方式展示，image的图片路径是由canvas绘制好了之后获取到的，所以image的刷新会比canvas慢一会，我这里是设置的滞后500毫秒。

<image bindtap="previewImg" mode="widthFix" src="{{imagePath}}"></image>
<canvas style="width: 300rpx;height: 300rpx;background:#f1f1f1;" canvas-id="mycanvas"/>

js中，首先调整canvas画布的大小

setCanvasSize: function () {
   var size = {};
   try {
       var res = wx.getSystemInfoSync();
       var scale = 750 / 300;//不同屏幕下canvas的适配比例；设计稿是750宽
       var width = res.windowWidth / scale;
       var height = width;//canvas画布为正方形
       size.w = width;
       size.h = height;
    } catch (e) {
       console.log("获取设备信息失败" + e);
    }
    return size;
},

调用qrcode.js生成二维码，这里生成的url我用了当前时间，二维码生成后，调用canvasToTempImage方法，将二维码保存成图片链接，在image标签中使用

createQrCode: function (canvasId, cavW, cavH) {
   let ct = Date.parse(new Date())
   let url = 'current_time=' + ct
   console.log('当前生成时间是。。。。', ct)
   //调用插件中的draw方法，绘制二维码图片
   QR.api.draw(url, canvasId, cavW, cavH);
   setTimeout(() => { this.canvasToTempImage(); }, 500);
},

canvasToTempImage: function () {
   var that = this;
   wx.canvasToTempFilePath({
       canvasId: 'mycanvas',
       success: function (res) {
           var tempFilePath = res.tempFilePath;
           console.log('生成临时图片路径。。。。',tempFilePath);
           that.setData({
               imagePath: tempFilePath,
           });
        },
        fail: function (res) {
             console.log(res);
        }
   });
},

然后就是定时刷新啦，首先要在data中存储一个定时器：

data: {
   imagePath:'',
    // 存储定时器
   setInter:''
},

onload时，调用autoRefresh方法，在autoRefresh方法里，会首先先执行一次生成二维码的函数，再用定时任务每隔5秒钟执行一次，如果只用定时任务，那第一次执行会在5秒后

autoRefresh: function() {
   let that = this;
   let size = that.setCanvasSize();//动态设置画布大小
   that.createQrCode("mycanvas", size.w, size.h) //先生成一次
   //定义定时器
   that.data.setInter = setInterval(function () {
     console.log('定时一次', Date.parse(new Date()))
     that.createQrCode("mycanvas", size.w, size.h)
   }, 5000);
},

点击手动刷新，会执行manuRefresh方法，这个方法会首先清除autoRefresh里面的定时任务，再重新执行autoRefresh方法

manuRefresh: function() {
   let that = this
   console.log('手动刷新')
   clearInterval(that.data.setInter)
   that.autoRefresh()
},

点击“停止自动刷新”按钮，会执行stopRefresh方法，清除定时任务

stopRefresh: function() {
   let that = this
   console.log('点击取消自动刷新')
   clearInterval(that.data.setInter)
},

如果要设置超时停止刷新，就要在每次调用 autoRefresh 方法的时候，保存一个开始时间 st

 autoRefresh: function() {
  let that = this;
  that.setData({
    st: Date.parse(new Date())
  })
  ...
},

然后在 createQrCode 方法中判断当前时间与 st 的时间差，如果超过了设定的时间，则清除定时器。

createQrCode: function (canvasId, cavW, cavH) {
    let that = this
    let ct = Date.parse(new Date())
    if ((ct - that.data.st) > that.data.expireTime * 1000 ) { //超时，停止刷新
      clearInterval(that.data.setInter)
    } else {
      ...
    }
  },

完整代码请大家移步我的GitHub

小程序内生成二维码并自动刷新

推荐阅读更多精彩内容