uni.createSelectorQuery()..select(`#${diskId}`).boundingClientRect 在微信小程序运行返回的是 null

分类：uni-app

uniapp

使用 vue3 setup 语法糖的情况下

const handleGetDiskRect = () => {  
    return new Promise<void>((resolve) => {  
        const query = uni.createSelectorQuery();  
        query  
            .select(`#${diskId}`)  
            .boundingClientRect((data) => {  
                if (!Array.isArray(data)) {  
                    diskRect.top = data.top!  
                    diskRect.right = data.right!  
                    diskRect.bottom = data.bottom!  
                    diskRect.left = data.left!  
                    diskRect.width = data.width!  
                    diskRect.height = data.height!  
                    resolve()  
                }  
            })  
            .exec();  
    })  
}

在微信小程序运行报错
TypeError: Cannot read property 'top' of null
at Object.<anonymous> (picker-color.js? [sm]:71)
at Function.<anonymous> (WAServiceMainContext.js?t=wechat&s=1711423957293&v=3.3.3:1)
at :38968/appservice/<SelectorQuery callback function>
at WAServiceMainContext.js?t=wechat&s=1711423957293&v=3.3.3:1
at WAServiceMainContext.js?t=wechat&s=1711423957293&v=3.3.3:1
at Array.forEach (<anonymous>)
at WAServiceMainContext.js?t=wechat&s=1711423957293&v=3.3.3:1
at WAServiceMainContext.js?t=wechat&s=1711423957293&v=3.3.3:1
at WASubContext.js?t=wechat&s=1711423957293&v=3.3.3:1
at he (WASubContext.js?t=wechat&s=1711423957293&v=3.3.3:1)(env: Windows,mp,1.06.2311292; lib: 3.3.3)

打印出来的 data 为 null 在 h5 和真机调试的情况下没问题

2024-03-26 11:51 负责人:无分享

2 个回复

1***@qq.com (作者) - MwM-Mai

// 色盘Id
const diskId : string = 'canvas' + Math.random().toString(36).substring(2, 9);
// 控件id
const thumkId : string = 'canvas' + Math.random().toString(36).substring(2, 9);
// 色盘节点信息
const diskRect : IDiskRect = reactive({
width: 0,
height: 0,
top: 0,
right: 0,
bottom: 0,
left: 0
})
const thumkPos : IThumkPos = reactive({ x: 0, y: 0 })
let diskCtx = uni.createCanvasContext(${diskId})
let thumkCtx = uni.createCanvasContext(${thumkId})
const thumkRgb : Ref = ref('')

onMounted(async () => {  
    await handleGetDiskRect()  
    handleDrawColor()  
    const { x, y } = handleGetpos()  
    const rgb = await handleGetImgData(diskId, x, y)  
    thumkRgb.value = rgb  
    // handleDrawThumk(rgb)  
})

是否有人出来解答一下,为什么在微信小程序运行获取节点信息的api返回的是null,给延迟啥都不想行

1***@qq.com (作者) - MwM-Mai

好像是this指向的问题,vue3中setup语法糖不存在this,但是微信小程序在自定义组件中调用 wx.createSelectorQuery()必须的 wx.createSelectorQuery().in(this)才能获取节点信息,是否能来个官方的人来解答一下 vue3 是如何处理这个问题的

1***@qq.com

我也是在h5 上能获取，但在小程序vue3 中获取不到，vue3 有个函数getCurrentInstance。你用它生成一个currentInstance，in(currentInstance) 就可以了

2024-07-03 09:25

要回复问题请先登录或注册

uni.createSelectorQuery()..select(`#${diskId}`).boundingClientRect 在微信小程序运行返回的是 null

2 个回复

公告

相关问题

uni.createSelectorQuery()..select(`#${diskId}`).boundingClientRect 在微信小程序运行返回的是 null

与内容相关的链接

2 个回复

公告

相关问题