需求: 微信小程序中生成二维码,不可对二维码进行截图(截图的时候页面提示),
【微信小程序中使用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位置定位到页面看不到的位置,显示的二维码其实是依赖二维码生成的图片,推荐阅读
- 前端|微信小程序如何实现转发/分享功能
- 马哥源码资讯|微擎模块 同城黑卡小程序4.6.0后台模块+前端小程序
- 小程序源码|小程序源码（社群微群人脉系统-多玩法安装简单）
- 微信小程序（黑马）|【微信小程序】视图容器和基本内容组件
- 微信小程序|微信小程序项目实例——图片处理小工具（自制低配版美图秀秀）
- 微信小程序|微信小程序学习之旅--零基础制作自己的小程序--第二个页面的制作
- 微信小程序|微信小程序（第二十四章）- 数据交互前置
- 小程序|微信小程序入门篇
- 微信小程序|二、零基础入门微信小程序项目开发之页面跳转实现