微信小程序内生成二维码，自动刷新，手动停止刷新，超时停止刷新等
小程序码
页面中有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
