微信小程序中使用canvas 卡顿问题微信小程序

需求: 微信小程序中生成二维码,不可对二维码进行截图(截图的时候页面提示),
【微信小程序中使用canvas 卡顿问题】
文章图片

问题1. onLoad 中监听手机的截屏动作,同时控制页面显示

//在onLoad 中监听手机的截屏动作,同时控制页面显示 onLoad(){ //二维码下面显示实时时间 this.time = utils.showTime(new Date()); setInterval(() => { this.time = utils.showTime(new Date()); }, 1000)//在onLoad 中监听手机的截屏动作 //noScreenshot 控制页面切换的数据 let that = this; wx.onUserCaptureScreen(function (res) { that.noScreenshot = false; setTimeout(() => { that.noScreenshot = true; }, 3000); }) },// 问题: // 不可以使用v-if 进行页面状态的切换,v-if为false时dom元素直接销毁,当切换为true的时候,canvas是没有重建的,会显示为空白,这里规避可以使用v-show 来处理canvas的显示,这里还将提示页面的定位层级加高了,忘记这里的处理是否是因为v-show为false的时候canvas没有隐藏的原因了,后面使用的时候可以验证一下

问题2. 页面重绘的过程中canvas的位置变化响应很慢

//问题总结:canvas 在绘制的过程中使用的全部都是CPU,没有使用GPU硬件加速,导致绘制很慢出现卡顿的情况, //这里的需求是一个申请可以邀请多个人,用户二维码下面会显示当前已经认证的同伴人数和基本信息,可以折叠,在折叠的过程中,页面尺寸变化时,canvas的位置出现卡顿, //wxml //js //生成canvas 实例 drawQrcode({ width: 140, height: 140, canvasId: 'qrcode', _this: this.$scope, text: applyUserInfo.visitor_code }); //生成实例之后将其转化为img,将url复制给wxml中的image 标签 let that = this; setTimeout(function () { wx.canvasToTempFilePath({ width: 140, height: 140, canvasId: 'qrcode', success: function (res) { var tempFilePath = res.tempFilePath; that.loadImagePath = tempFilePath; }, fail: function (res) { console.log(res); } }); }, 500); //时间需要调整,确保是canvas context 已经生成//这里需要注意的是wxml中其实是将canvas位置定位到页面看不到的位置,显示的二维码其实是依赖二维码生成的图片,