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

小程序碼

頁面中有canvas和image兩種方式展示，image的圖片路徑是由canvas繪制好了之后獲取到的，所以image的刷新會比canvas慢一會，我這里是設(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畫布的大小

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

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

createQrCode: function (canvasId, cavW, cavH) {
   let ct = Date.parse(new Date())
   let url = 'current_time=' + ct
   console.log('當前生成時間是。。。。', 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('生成臨時圖片路徑。。。。',tempFilePath);
           that.setData({
               imagePath: tempFilePath,
           });
        },
        fail: function (res) {
             console.log(res);
        }
   });
},

然后就是定時刷新啦，首先要在data中存儲一個定時器：

data: {
   imagePath:'',
    // 存儲定時器
   setInter:''
},

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

autoRefresh: function() {
   let that = this;
   let size = that.setCanvasSize();//動態(tài)設(shè)置畫布大小
   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);
},

點擊手動刷新，會執(zhí)行manuRefresh方法，這個方法會首先清除autoRefresh里面的定時任務(wù)，再重新執(zhí)行autoRefresh方法

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

點擊“停止自動刷新”按鈕，會執(zhí)行stopRefresh方法，清除定時任務(wù)

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

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

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

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

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