关于微信小程序:微信小程序中使用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地位定位到页面看不到的地位,显示的二维码其实是依赖二维码生成的图片,