开发工具版本号：stable 1.06.2401020
操作系统：win10专业版本，
我在自定义组件中，wxml中定义了<view class="cvs">
<canvas id="mycanvasHome" canvas-id="mycanvasHome" type="2d" bindtouchstart="pantStart" bindtouchmove="pantMove" style="width: {{w_c}}px;height: {{h_c}}px;">
</canvas>
</view>
在对应的js文件中，生命周期ready函数中获取ctx，代码如下：const query = wx.createSelectorQuery().select('#mycanvasHome').fields({node: true,size: true}).exec(function (res){
console.log('select_mycanvasHome')
console.log(res)
const canvas = res[0].node
const context = canvas.getContext('2d')
const renderW = res[0].width
const renderH = res[0].height
const dpr = wx.getWindowInfo().pixelRatio
canvas.width = renderW * dpr
canvas.height = renderH * dpr
context.scale(dpr, dpr)
this.setData({
ctx: context
})
})
在其他页面的json中也注册了自定义组件： "mystockLine": "../../component/stockLine/stockLine"
在其他页面的wxml中调用这个组件的代码如下：<mystockLine ></mystockLine>
在调试时报错如下:
TypeError: Cannot read property 'node' of null
at Object.<anonymous> (stockLine.js? [sm]:29)
at Function.<anonymous> (WAServiceMainContext.js?t=wechat&s=1709696379677&v=3.3.4:1)
at :21660/appservice/<SelectorQuery callback function>
at WAServiceMainContext.js?t=wechat&s=1709696379677&v=3.3.4:1
at WAServiceMainContext.js?t=wechat&s=1709696379677&v=3.3.4:1
at Array.forEach (<anonymous>)
at WAServiceMainContext.js?t=wechat&s=1709696379677&v=3.3.4:1
at WAServiceMainContext.js?t=wechat&s=1709696379677&v=3.3.4:1
at WASubContext.js?t=wechat&s=1709696379677&v=3.3.4:1
at ve (WASubContext.js?t=wechat&s=1709696379677&v=3.3.4:1)(env: Windows,mp,1.06.2401020; lib: 3.3.4)
请问是什么原因，调试了两天了，也没有解决，实在不知道总是出在哪了，用文心一言大模型也没有解决这个问题。
肯请微信团队高人指点一二，诚盼，万分感谢。
自定义组件中应使用 this.createSelectorQuery() 来代替 wx.createSelectorQuery() 。
ctx:context
})，工具提示错误：TypeError: this.setData is not a function，感谢
Component({
/**
* 组件的属性列表
*/
properties: {
},
/**
* 组件的初始数据
*/
data: {
ctx: "",
w_c: 300,
h_c: 200
},
/**
* 组件的方法列表
*/
methods: {
canvasInit: function () {
const query = this.createSelectorQuery().select('#mycanvasHome').fields({node: true,size: true}).exec(function (res){
console.log('select_mycanvasHome')
console.log(res)
const canvas = res[0].node
const context = canvas.getContext('2d')
const renderW = res[0].width
const renderH = res[0].height
const dpr = wx.getWindowInfo().pixelRatio
canvas.width = renderW * dpr
canvas.height = renderH * dpr
context.scale(dpr, dpr)
let that = this
// that.data.ctx=context
that.setData({
ctx:context
})
//this.data.ctx =
})
},
onKlineEvent(event) {
const ctx = this.data.ctx
ctx.strokeStyle = "#00FF00"
ctx.lineWidth = 0.333
ctx.moveTo(10, 10)
ctx.lineTo(10, 200)
ctx.stroke()
},
pantStart(event) {
let x = event.touches[0].x
let y = event.touches[0].y
//const ctx1 = this.data.ctx
//ctx.lineCap = "round"
ctx1.lineJoin = "miter"
ctx1.strokeStyle = "#00FF00"
ctx1.lineWidth = 1
ctx1.moveTo(x, y)
},
pantMove: function (event) {
let x = event.touches[0].x
let y = event.touches[0].y
const ctx = this.data.ctx
ctx.lineTo(x, y)
ctx.stroke()
},
},
lifetimes: {
attached: function () {
// 在组件实例进入页面节点树时执行
//this.canvasInit()
console.log('初始化完成1')
},
ready() {
this.canvasInit()
console.log('初始化完成2')
},
detached: function () {
// 在组件实例被从页面节点树移除时执行
},
},
})