微信小程序插件使用 createSelectorQuery获取不到元素

[daiyuanhao]

相关平台

微信小程序

小程序基础库: 2.18.0
使用框架: React

复现步骤

Taro.nextTick(() => {
const query = wx.createSelectorQuery()
query.select('.page-class').boundingClientRect().exec(res => {
console.log(res)
})
})

期望结果

微信小程序插件使用 createSelectorQuery获取到元素

实际结果

微信小程序插件使用 createSelectorQuery获取不到元素

环境信息

Taro CLI 3.2.8 environment info:
    System:
      OS: Windows 10
    Binaries:
      Node: 14.17.0 - C:\Program Files\nodejs\node.EXE
      Yarn: 1.22.10 - C:\Program Files\nodejs\yarn.CMD
      npm: 6.14.8 - C:\Program Files\nodejs\npm.CMD

[Chen-jj]

@daiyuanhao 麻烦提供一下完整的 Demo

[daiyuanhao]

就直接在插件里调用createSelectorQuery他只能拿小程序页面的相关节点，插件里面的节点没找到，不知道有什么解决方案

[hellozsh]

使用cssModules的怎么获取元素呢，

`Taro.createSelectorQuery().select('.scrollChoose').boundingClientRect(function(rect){

        console.log("======== rect",rect);
      }).exec()`

为null
或
`
Taro.createSelectorQuery().select(styles.scrollChoose).boundingClientRect(function(rect){

        console.log("======== rect",rect);
      }).exec()

`
也为null

[cjmafei]

@daiyuanhao 后来有什么解决方案吗？我这边也遇到了同样的问题

[cjmafei]

@daiyuanhao 加上这个可以了

[daiyuanhao]

@cjmafei 我加了这个会报错，不知道为什么我用Taro插件模板开发的，Taro.很多方法都找不到，就比如用不了Taro.createSelectorQuery() 只能用wx替代Taro，可以给个联系方式看看代码结构吗

[hellozsh]

Taro.createSelectorQuery().select(.${styles.rulerCanvas})可以这样用

[HarrisChang]

遇到同样的问题，在小程序插件中无法通过createSelectorQuery获取元素信息

[qianlanse]

export function requestAnimationFrame(cb: () => void) {
const systemInfo = getSystemInfoSync()
if (systemInfo.platform === 'devtools') {
return setTimeout(() => {
cb()
}, 1000 / 30)
}

return createSelectorQuery()
    .selectViewport()
    .boundingClientRect()
    .exec(() => {
        cb()
    })

}

onMounted(() => {
requestAnimationFrame(() => {
handleInitRect()
})
})

可以这样试试看

[Chen-jj]

插件使用小程序的 Component 构造器构造，因此使用 createSelectorQuery() 时需要配合 in(component)。

之前 Taro 没有暴露原生组件对象 component，因此开发者没有办法获取元素。

Taro 3.4.2 之后可以在插件页面或插件组件中通过 this.props.$scope 获取到 component，即可以这样获取元素：

const query = Taro.createSelectorQuery().in(this.props.$scope)
query.select('.page').boundingClientRect().exec(res => {
  console.log(res)
})