- canvas 和 Component 使用中报错
你想反馈一个 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[代码][代码]: [代码][代码]750[代码][代码]rpx;[代码][代码] [代码][代码]height[代码][代码]: [代码][代码]750[代码][代码]rpx;[代码][代码] [代码][代码]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[代码][代码]: [代码][代码]750[代码][代码]rpx;[代码][代码] [代码][代码]height[代码][代码]: [代码][代码]750[代码][代码]rpx;[代码][代码] [代码][代码]display[代码][代码]: [代码][代码]block[代码][代码];[代码][代码]}[代码]
2018-03-21 - canvas 在 Component 中使用中报错
[图片] 相关问题: https://developers.weixin.qq.com/blogdetail?action=get_post_info&docid=0006428bcc0788d8e7765bf6d56000&highline=canvas%20Component
2018-04-04