乐趣区

关于微信小程序:微信小程序中使用canvas-卡顿问题

jiezi

需要: 微信小程序中生成二维码, 不可对二维码进行截图 (截图的时候页面提醒),

问题 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 地位定位到页面看不到的地位, 显示的二维码其实是依赖二维码生成的图片,
退出移动版