关于微信小程序:微信小程序中使用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 <view class="wrap-qrcode-info">      <canvas class="wrap-qrcode-canvas" canvasId='qrcode'></canvas>      <image :src="loadImagePath"></image> </view>  //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地位定位到页面看不到的地位,显示的二维码其实是依赖二维码生成的图片,