收藏
回答

canvas 和 Component 使用中报错

框架类型 操作系统 操作系统版本 手机型号 微信版本
小程序 iOS 11.2.6 iPhone 6s 6.6.5

你想反馈一个 Bug 还是 提一个需求?

Bug


如果是 Bug:


* Bug 表现是什么?预期表现是什么?

iOS 真机中调试面板中报错

undefined is not an object (evaluating 'e.canvasId')



* 如何复现?

在 Component 中使用 canvas 绘图,移除组件后报错。


* 提供一个最简复现 Demo

// canvas-id-error.js
/**
 * @since 20180321 16:33
 * @author vivaxy
 */
 
Page({
  data: {
    show: true,
  },
  handleToggle() {
    this.setData({ show: !this.data.show });
  },
});


// canvas-id-error.json
{
  "navigationBarTitleText": "canvasId error",
  "usingComponents": {
    "custom-component": "./custom-component/custom-component"
  }
}


<!-- canvas-id-error.wxml -->
<block wx:if="{{show}}">
  <custom-component></custom-component>
</block>
<button bindtap="handleToggle">Toggle canvas</button>


/* canvas-id-error.wxss */
custom-component {
  width: 750rpx;
  height: 750rpx;
  display: block;
}


// custom-component/custom-component.js
/**
 * @since 20180321 16:35
 * @author vivaxy
 */
Component({
  attached() {
    this.canvasContext = wx.createCanvasContext('my-canvas-id', this);
    this._render();
  },
  detached() {
    this.canvasContext = null;
  },
  methods: {
    _render() {
      if (!this.canvasContext) {
        return;
      }
      const ctx = this.canvasContext;
      ctx.moveTo(10, 10);
      ctx.lineTo(100, 10);
      ctx.lineTo(100, 100);
      ctx.fill();
      ctx.draw();
    },
  },
});


// custom-component/custom-component.json
{
  "component": true
}


<!-- custom-component/custom-component.wxml -->
<canvas canvas-id="my-canvas-id"></canvas>


/* custom-component/custom-component.wxss */
canvas {
  width: 750rpx;
  height: 750rpx;
  display: block;
}


回答关注问题邀请回答
收藏

5 个回答

  • 微信技术专员 - Rex
    微信技术专员 - Rex
    2018-03-21

    麻烦给个相关的代码片段(https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/minicode.html),我们定位下问题

    2018-03-21
    有用
    回复
  • Kevin
    Kevin
    2018-09-28

    同样的问题,请问怎么解决的

    2018-09-28
    有用
    回复
  • 罗艺娜
    罗艺娜
    2018-04-13

    请问这个怎么解决的,我也是报这个错

    2018-04-13
    有用
    回复
  • 上心
    上心
    2018-03-24

    解决了吗,什么原因?

    2018-03-24
    有用
    回复
  • vivaxy
    vivaxy
    2018-03-22

    wechatide://minicode/QIA126mN6SYC

    2018-03-22
    有用
    回复
登录 后发表内容