canvas 和 Component 使用中报错
你想反馈一个 Bug 还是 提一个需求？
Bug
如果是 Bug：
* Bug 表现是什么？预期表现是什么？
iOS 真机中调试面板中报错
undefined is not an object (evaluating 'e.canvasId') |
* 如何复现？
在 Component 中使用 canvas 绘图，移除组件后报错。
* 提供一个最简复现 Demo
// canvas-id-error.js/** * [@since](/user/since) 20180321 16:33 * [@author](/user/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](/user/since) 20180321 16:35 * [@author](/user/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;} |
强力驱动