记录一下微信小程序使用canvas踩的坑

微信小程序生成二维码的插件:

  1. wxapp-qrcode
  2. weapp-qrcode-base64 基于base64编码输出二维码，不依赖canvas

问题来源

做一个生成二维码的功能，原来是由前端小程序使用wxapp-qrcode依赖canvas生成二维码。
插件使用canvas生成临时路径并渲染到canvas上，但是由于我把临时路径放在了image标签上，把二维码的canvas使用hidden隐藏了，导致在某些机型上出现了问题。

复现

手机型号：iPhone XS Max
系统：iOS 12.0
微信版本：8.0.2
基础库版本：2.16.0
复现结果：渲染内容短暂显示后消失，真机调试二维码部分出现过极短的闪烁，推测可能是canvas隐藏后闪烁导致的原因
复现录屏：

解决方法

放弃使用wxapp-qrcode插件，直接由后端生成二维码url地址，用image标签渲染出来。

总结

使用canvas渲染时做隐藏某些机型会出现问题，图片尽量使用url地址渲染。