一、引入

原安卓图书馆选座项目CSDN博客链接：
Android图书馆选座系统课程设计

最近在搞微信小程序，想把以前写的安卓图书馆选座项目的编辑地图移到小程序上去，但是发现小程序的canvas性能优化极差，导致编辑地图卡顿，如下：
我
可以明显的感觉，绘画黄色的线框很卡。

二、分析问题

我网上搜索相关解决方法，发现没有比较简单的可行方法，于是自己琢磨好久。
发现如果打开小程序开始界面是如上编辑地图的界面，绘制黄色框并不会很卡顿，而如果像我这个小程序本身要求要从显示当前地图界面，再跳转到编辑地图界面，绘制黄色框就会卡顿，流程如下：

问题所在
因为显示地图界面存在一个canvas、而编辑地图又存在一个canvas，小程序运行两个canvas会导致性能下降
尝试解决
既然是有两个canvas导致界面卡顿，那么我想在显示地图界面跳转到编辑地图界面时使用redirectTo、reLaunch两中一个，将当前显示地图界面关闭那显示地图界面的canvas自然会销毁，在我小程序跳转代码修改如下：

  nagTo: function () {// wx.navigateTo({//     url:"/pages/libraryeditmap/libraryeditmap"// });wx.redirectTo({url: "/pages/libraryeditmap/libraryeditmap"});// wx.reLaunch({//   url: "/pages/libraryeditmap/libraryeditmap"// });},

可现实啪啪打脸~，即使关闭了当前显示地图界面，canvas似乎没有销毁一样，在编辑地图界面还是卡顿。
于是此方法行不通

三、解决方法

基于以上分析，小程序在页面销毁时似乎不销毁canvas，那我想到用代码控制在页面销毁/卸载之前告诉页面要销毁canvas。

在wxml的canvas控件父节点view加上wx:if语句控制显示与否
在js文件中data中设置isshowcav,canvas变量
在onLoad中加载canvas控件并将其canvas设置到data中
在onUnLoad方法中，将获取的canvas的高宽设为0，并且isshowcav设为false

个人猜测，这里将canvas的高宽设为0，并且设置canvas不显示后，显示地图界面卸载后会检测这canvas无用了会将其销毁。
这样在编辑地图界面绘制canvas就不会卡顿了。

四、解决后效果图

可以看到绘制黄色框挺流畅的了

五、绘制好的地图

另外，图书馆安卓项目也成功移到小程序上了

感兴趣的朋友可以看看原项目Blog哦：
Android图书馆选座系统课程设计

微信小程序Canvas卡顿优化解决方法相关推荐

微信小程序 canvas 卡顿闪退
场景: 页面中使用 canvas标签绘制海报会很有规律的出现卡顿,甚至于小程序闪退. 具体规律: 在当前页面不做任何操作,一般停留十几秒或以上,再次操作页面时,就会出现页面卡住或闪退,卡顿的时长一 ...
微信小程序canvas画布不清晰解决方法
绘制的图片,文字等十分模糊添加以下代码,通过设置分辨率来解决 const dpr = wx.getSystemInfoSync().pixelRatiocanvas.width = res[0].w ...
Taro开发微信小程序遇到的问题和解决方法
Taro开发微信小程序遇到的问题和解决方法参考文章: (1)Taro开发微信小程序遇到的问题和解决方法 (2)https://www.cnblogs.com/wuliujun521/p/114753 ...
uniapp微信小程序视频播放卡顿
我小程序项目中需要去播放视频,但是我们的视频都是很长的 70分钟 90分钟 140分钟的这种,播放起来特别卡. 视频放在阿里云开了cdn,但还是卡顿我查了很多资料,因为视频码率太高了, ...
微信小程序开发中常见问题及解决方法
本文章总结小程序开发中常见的错误问题.希望能帮助初学者少走弯路,避免类似的错误. 1:出现"脚本错误或者未正确调用Page()"的错误提示. 解决方法:出现这个错误的原因通常是因为 ...
微信小程序异步转同步的解决方法
一.前言二. promise的概念三.promise的使用四.一个因为异步请求出问题的案例五.案例的解决方案 1.运用promise解决异步转同步问题 2.运用async+await+prom ...
微信小程序用户未授权bug解决方法，微信小程序获取用户信息失败解决方法
微信小程序开发交流qq群 173683895 承接微信小程序开发.扫码加微信. 正文: bug示例图: 导致这个bug的原因是 wx.getUserInfo(OBJECT) 接口做了调整: ...
微信小程序包体积过大解决方法
因为微信开发者工具提交需要整个项目大小不超过2M,超过2M则不能提交,会出现下面这个报错解决方法: 1.在Hbuilder x上面勾选上运行时压缩代码 2.分包操作在pages.json文件中设置 ...
微信小程序bindtap不生效的解决方法
用bindtap监听输入框的时候不生效可以尝试将基础库调成最新的版本,如下: 详情 -> 调试基础库

微信小程序Canvas卡顿优化解决方法

文章目录