微信小程序 Canvas 在IOS下,导致无法滑动、页面卡死

最近在写一个活动小程序,其中有一个抽奖组件,测试的时候发现Canvas在Ios下的渲染问题。

如果用户使用苹果设备,按住Canvas绘制区域时滑动页面,会导致页面卡死,只有重启小程序才能恢复。

但是Android用户却没有任何问题。


初步排查

初步排查怀疑是Canvas这种原生组件在绘制的时候出现了问题导致的。

但是查询微信官方文档论坛,发现有人遇到了同样的问题。

原生组件渲染问题的官方回复,后续版本修复原生组件渲染问题的官方回复,后续版本修复

但是这篇提问是在19年5月份发的,微信官方就是10月实现了原生组件同层渲染,来解决这个问题。我检查了下基础库版本,是2.21.2,远超过要求。

真机调试下,小程序Canvas无法绘制

我在真机调试下,调试小程序Canvas,一直无法绘制,我以为是Echarts不兼容导致的。

实际上,这TMD的是微信开发者工具的问题,真机和模拟器都没问题。

微信小程序,任何涉及到原生组件的调试一定要在真机上调试!Android和IOS都试一遍,不然就是大坑!!!

Waxy主题:自定义网站背景

本篇文章为Waxy主题设置中自定义CSS/JS的高级应用。

如何自定义网站静态背景?

body {
    /*背景颜色*/
    background-color:#990505;
    /*背景图片url,可与上一项同时使用*/
    background-image: url(https://pic.idzd.top/usr/bg/5f6eeefb319ae1601105659386.jpg);
    /*背景图片重复方式,此处为不重复*/
    background-repeat: no-repeat;
    /*背景图片起始位置,此处为居中*/
    background-position: center;
    /*背景图片尺寸,此处为填充模式*/
    background-size: cover;
    /*背景图片是否滚动,此处为不滚动*/
    background-attachment: fixed;
}

Waxy主题:自定义Canvas背景

本篇文章为Waxy主题设置中自定义CSS/JS的高级应用。

什么是Canvas?

Canvas 是 HTML5 中一个新特性,开发者绘制一系列图形。通过和JavaScript配合,可以使静态的图形动起来~

当然更加具体的内容,还请您自己学习,这里不做展开~

后面飞扬的花瓣就是基于Canvas技术实现的后面飞扬的花瓣就是基于Canvas技术实现的

如何自定义Canvas背景?

目前Waxy主题支持3种方式自定义Canvas背景,在文章后面,我提供了几个整理好的背景。