微信小程序內(nèi)生成二維碼，自動(dòng)刷新，手動(dòng)停止刷新，超時(shí)停止刷新等

小程序碼

頁(yè)面中有canvas和image兩種方式展示，image的圖片路徑是由canvas繪制好了之后獲取到的，所以image的刷新會(huì)比canvas慢一會(huì)，我這里是設(shè)置的滯后500毫秒。

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

js中，首先調(diào)整canvas畫(huà)布的大小

setCanvasSize: function () {
   var size = {};
   try {
       var res = wx.getSystemInfoSync();
       var scale = 750 / 300;//不同屏幕下canvas的適配比例；設(shè)計(jì)稿是750寬
       var width = res.windowWidth / scale;
       var height = width;//canvas畫(huà)布為正方形
       size.w = width;
       size.h = height;
    } catch (e) {
       console.log("獲取設(shè)備信息失敗" + e);
    }
    return size;
},

調(diào)用qrcode.js生成二維碼，這里生成的url我用了當(dāng)前時(shí)間，二維碼生成后，調(diào)用canvasToTempImage方法，將二維碼保存成圖片鏈接，在image標(biāo)簽中使用

createQrCode: function (canvasId, cavW, cavH) {
   let ct = Date.parse(new Date())
   let url = 'current_time=' + ct
   console.log('當(dāng)前生成時(shí)間是。。。。', ct)
   //調(diào)用插件中的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('生成臨時(shí)圖片路徑。。。。',tempFilePath);
           that.setData({
               imagePath: tempFilePath,
           });
        },
        fail: function (res) {
             console.log(res);
        }
   });
},

然后就是定時(shí)刷新啦，首先要在data中存儲(chǔ)一個(gè)定時(shí)器：

data: {
   imagePath:'',
    // 存儲(chǔ)定時(shí)器
   setInter:''
},

onload時(shí)，調(diào)用autoRefresh方法，在autoRefresh方法里，會(huì)首先先執(zhí)行一次生成二維碼的函數(shù)，再用定時(shí)任務(wù)每隔5秒鐘執(zhí)行一次，如果只用定時(shí)任務(wù)，那第一次執(zhí)行會(huì)在5秒后

autoRefresh: function() {
   let that = this;
   let size = that.setCanvasSize();//動(dòng)態(tài)設(shè)置畫(huà)布大小
   that.createQrCode("mycanvas", size.w, size.h) //先生成一次
   //定義定時(shí)器
   that.data.setInter = setInterval(function () {
     console.log('定時(shí)一次', Date.parse(new Date()))
     that.createQrCode("mycanvas", size.w, size.h)
   }, 5000);
},

點(diǎn)擊手動(dòng)刷新，會(huì)執(zhí)行manuRefresh方法，這個(gè)方法會(huì)首先清除autoRefresh里面的定時(shí)任務(wù)，再重新執(zhí)行autoRefresh方法

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

點(diǎn)擊“停止自動(dòng)刷新”按鈕，會(huì)執(zhí)行stopRefresh方法，清除定時(shí)任務(wù)

stopRefresh: function() {
   let that = this
   console.log('點(diǎn)擊取消自動(dòng)刷新')
   clearInterval(that.data.setInter)
},

如果要設(shè)置超時(shí)停止刷新，就要在每次調(diào)用 autoRefresh 方法的時(shí)候，保存一個(gè)開(kāi)始時(shí)間 st

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

然后在 createQrCode 方法中判斷當(dāng)前時(shí)間與 st 的時(shí)間差，如果超過(guò)了設(shè)定的時(shí)間，則清除定時(shí)器。

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

完整代碼請(qǐng)大家移步我的GitHub