微信小程序 wx.createSelectorQuery 和 this.createSelectorQuery 的差异

概述

通过 SelectorQuery 可以获取页面上节点的一些信息（节点的属性、样式、位置等）
在页面和自定义组件中，wx.createSelectorQuery 和 this.createSelectorQuery 都可以创建一个 SelectorQuery 对象，本文主要讲述两种方式的差异

SelectorQuery 的相关文档

• 获取界面上的节点信息
• wx.createSelectorQuery()
• SelectorQuery

差异

在页面中使用时的差异

首先介绍一下代码细节

• 有两个页面 index 和 another
• 两个页面中，都有一个 id 为 page-view 的组件
• 两个组件 data-source 属性的值不同
• 点击 index 中的按钮时，延时打印 page-view 节点的一些信息（id 和自定义属性），并启动 another

index WXML

<button bind:tap="onTap">打开 another</button>
<view id="page-view" data-source="index">index → view</view>
1
2

index JS

Page({
  showFields(root, selector, tag) {
    root.createSelectorQuery().select(selector)
      .fields(
        { id: true, dataset: true },
        res => console.log(tag, JSON.stringify(res))
      )
      .exec()
  },

  onTap() {
    this.showFields(wx, '#page-view', 'sync wx')
    this.showFields(this, '#page-view', 'sync this')

    setTimeout(() => {
      this.showFields(wx, '#page-view', 'async wx')
      this.showFields(this, '#page-view', 'async this')
    }, 1000)

    wx.navigateTo({ url: '/pages/api/node/another/another' })
  }
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

another WXML

<view id="page-view" data-source="another">another → view</view>
1

点击按钮后在控制台打印的日志

sync wx {"id":"page-view","dataset":{"source":"index"}}
sync this {"id":"page-view","dataset":{"source":"index"}}
async wx {"id":"page-view","dataset":{"source":"another"}}
async this {"id":"page-view","dataset":{"source":"index"}}
1
2
3
4

可以发现，在 index 中，通过 wx.createSelectorQuery 这种方式，获取到了 another 中的节点

在自定义组件中使用时的差异

首先介绍一下代码细节

• 在 index 页面中，有一个自定义组件 my-component
• index 和 my-component 中都有一个 id 为 my-component-view 的组件
• 两个组件 data-source 属性的值不同
• 点击 my-component 中的按钮时，打印 my-component-view 节点的一些信息（id 和自定义属性）

index WXML

<my-component></my-component>
<view id="my-component-view" data-source="index">index → view</view>
1
2

my-component WXML

<button bind:tap="onTap">showMyCmptView</button>
<view id="my-component-view" data-source="my-component">my-component → view</view>
1
2

my-component JS

Component({
  methods: {
    showFields(root, selector, tag) {
      root.createSelectorQuery().select(selector)
        .fields(
          { id: true, dataset: true },
          res => console.log(tag, JSON.stringify(res))
        )
        .exec()
    },

    onTap() {
      this.showFields(wx, '#my-component-view', 'wx')
      this.showFields(this, '#my-component-view', 'this')
    }
  }
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

点击按钮后在控制台打印的日志

wx {"id":"my-component-view","dataset":{"source":"index"}}
this {"id":"my-component-view","dataset":{"source":"my-component"}}
1
2

可以发现，在 my-component 中，通过 wx.createSelectorQuery 这种方式，获取到了 index 中的节点

说明

在页面或自定义组件中使用 this.createSelectorQuery() 时，相当于使用 wx.createSelectorQuery().in(this), 把范围限定在了页面或自定义组件内。下面是 SelectorQuery.in() 的相关文档
SelectorQuery.in(Component component)

代码仓库

代码仓库