收藏
回答

通过 wx:if 控制新版 Canvas 接口渲染内容显隐会导致微信闪退 ​​​​

框架类型 问题类型 API/组件名称 终端类型 微信版本 基础库版本
小程序 Bug 新版 canvas 接口 微信iOS客户端 7.0.8 2.8.3

当使用 wx:if 控制新版 canvas 显隐时(https://developers.weixin.qq.com/community/develop/doc/00020a02c2c040114d19a398f5b001?highLine=canvas),会导致微信 App 闪退。iOS 版本 13.1.2

<canvas
wx:if="{{show}}"
  type="2d"
  id="canvas"
  style="width: 300px; height: 300px;"
></canvas>
 
<button bindtap="showHide">显示/隐藏</button>

视频链接:https://share.icloud.com/photos/0t16pVlvARSgj0vp5yfoyow8Q


最后一次编辑于  2019-10-08
回答关注问题邀请回答
收藏

3 个回答

  • Eric Huang
    Eric Huang
    置顶回答2019-10-10

    这个问题已知了,我们下个版本会修复。这里主要是因为通过 wx:if 控制 canvas 的时候会销毁画布,但是 requestAnimationFrame 仍然在运行,绘制到一块已经销毁的画布上导致闪退。你可以:

    在隐藏画布之前手动做一下 cancelRequestAnimation 把循环先停止。


    2019-10-10
    有用
    回复 1
    • Corz
      Corz
      2019-12-17
      有可能不单止是requestAnimationFrame 与cancelRequestAnimation   整个渲染过程也有可能会出现问题,项目采用canvas2d  d在页面unload与onhide 都执行cancelRequestAnimation 也一样会闪,还使用过settimeout代替requestAnimationFrame 与cancelRequestAnimation   也还是存在一定的机率闪退,不过机率小很多
      2019-12-17
      回复
  • 灵芝
    灵芝
    2019-10-08

    是只使用这个代码片段可以复现问题吗?这边测试未复现问题,出现问题的具体机型是什么?

    2019-10-08
    有用
    回复 6
    • 󠀀
      󠀀
      2019-10-08
      是的,这个代码片段就可以,只要出现使用 wx:if 控制的 canvas 都闪退,使用机型是 iPhone 11 Pro Max 和 iPhone XS Max,iOS 13.1.2,均出现此问题,运行视频:https://share.icloud.com/photos/0t16pVlvARSgj0vp5yfoyow8Q,Android 目前好像没有此问题
      2019-10-08
      回复
    • 󠀀
      󠀀
      2019-10-08
      您这边再次尝试一下,如果不行的话,我给您提供另外一个可以复现的,我也同时可以提供对应的微信 App 运行日志,真的这个闪退 bug 从假期开始困扰我一周了
      2019-10-08
      回复
    • 󠀀
      󠀀
      2019-10-09
      对了,补充一下,微信开发者工具版本 1.02.1909292
      2019-10-09
      回复
    • 灵芝
      灵芝
      2019-10-09回复󠀀
      麻烦也提供一下日志:我->设置->帮助与反馈右上角有个上报日志的入口

      提供一下出现问题的微信号,出现问题的时间点(精确到分钟)
      2019-10-09
      回复
    • 󠀀
      󠀀
      2019-10-10回复灵芝
      我这边上传了日志,劳烦您查看一下,出现问题时间 2019-10-10 14:44 - 14:45,微信号我这边私信您了。
      2019-10-10
      回复
    查看更多(1)
  • 沉冰
    沉冰
    2019-10-08

    canvas,你可以采用定位的方式让它隐藏,

    例如设置canvas的position:fixed;top:100rpx;left:100rpx;

    想隐藏时,改为top:-2000rpx;left:-2000rpx;

    2019-10-08
    有用
    回复 4
    • 󠀀
      󠀀
      2019-10-08
      答非所问,我使用的是新版接口,新版本是支持同层渲染的。不是旧版不支持同层渲染的接口。
      2019-10-08
      回复
    • 󠀀
      󠀀
      2019-10-08
      并且我的应用场景不适合这种解决方案。
      2019-10-08
      回复
    • 󠀀
      󠀀
      2019-10-08
      请仔细审题后作答。
      2019-10-08
      回复
    • 雨声
      雨声
      2019-11-27
      老版canvas这种解决方案也会造成页面卡顿,不要误人子弟。
      2019-11-27
      回复
登录 后发表内容
问题标签