微信小程序wx.createSelectorQuery().select().node()方法调用异常问题

对应解决措施 #

• 确认目标节点为原生组件：node 方法仅支持获取 <canvas>、<video> 等官方原生组件的实例，普通 view、text 等非原生组件调用该方法会直接返回空结果。
• 调整调用时机：必须在节点完成渲染后调用该接口，推荐放在页面/自定义组件的 onReady 生命周期钩子中执行，不要在 onLoad、attached 等节点未完成挂载的阶段调用。
• 自定义组件内调用需绑定实例：如果是在自定义组件内部查询当前组件内的节点，需要调用组件实例下的查询方法，修改代码如下：

this.createSelectorQuery().select('.classname').node(function(res){
  console.log(res) 
}).exec()

• 验证选择器匹配有效性：可先调用同系列的 boundingClientRect 方法验证是否能正常匹配到目标节点：

// 页面内调用示例
wx.createSelectorQuery().select('.classname').boundingClientRect(rect => {
  console.log(rect)
}).exec()

如果该方法返回 null，说明选择器无法匹配到节点，需要检查class拼写、节点是否被 wx:if 动态销毁、是否存在样式隔离导致匹配范围不对。

• 跨端框架适配检查：若使用 uniapp、Taro 等跨端框架开发，需确认框架对原生 node 方法的适配情况，部分框架的二次封装会导致原生API异常，可替换为框架提供的专用节点查询API尝试。

内容的提问来源于stack exchange，提问作者Orlando