微信小程序 获取页面上节点的信息

概述

我们可以简单的认为，页面上的每个组件就是一个节点。所以“获取页面上节点的信息”，就是获取组件的一些信息，比如部分属性、宽高、位置等

相关文档

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

获取步骤

1. 创建 SelectorQuery 对象
2. 选择节点，得到 NodesRef 对象
3. 添加查询节点信息的请求，重新得到 SelectorQuery 对象
4. 选择其他节点，添加其他查询节点信息的请求
5. 执行

示例代码

// 1. 创建 SelectorQuery 对象
let selectorQuery = wx.createSelectorQuery()
// 2. 选择节点，得到 NodesRef 对象
const nodesRef = selectorQuery.selectViewport()
// 3. 添加查询节点信息的请求，重新得到 SelectorQuery 对象
selectorQuery = nodesRef.boundingClientRect()
// 4. 选择其他节点，添加其他查询节点信息的请求
// ……
// 5. 执行
selectorQuery.exec(res => {
  res = res[0]
  console.log('宽高：', res.width, res.height)
  // 视口相对于视口的位置 (´▽｀)ノ♪
  console.log('相对于视口的位置：', res.top, res.bottom, res.left, res.right)
})

创建 SelectorQuery 对象的方式

• wx.createSelectorQuery()
• 在页面或自定义组件内部，使用 this.createSelectorQuery()

两种方式的区别，参考微信小程序 wx.createSelectorQuery 和 this.createSelectorQuery 的差异

选择节点的方式

• SelectorQuery.select(string selector) 选择器匹配到的第一个节点
• SelectorQuery.selectAll(string selector) 选择器匹配到的所有节点
• SelectorQuery.selectViewport() 视口节点

可以获取哪些信息

• NodesRef.boundingClientRect() 获取节点的 ID, 自定义属性，宽高，相对于视口的位置
• NodesRef.scrollOffset() 获取节点的 ID, 自定义属性，滚动位置
• NodesRef.context() (基础库 2.4.2) 获取节点的 Context 对象
• NodesRef.node() (基础库 2.7.0) 获取节点
• NodesRef.fields() 上述方法可以获取的信息，这里都可以获取，还可以获取节点的 mark, 属性，样式，布局位置

获取结果的方式

• 分开获取：在步骤 3 添加回调函数，获取这次请求的结果
• 统一获取：在步骤 5 添加回调函数，获取所有请求的结果

示例代码

// 分开获取：在步骤 3 添加回调函数，获取这次请求的结果
const selectorQuery = wx.createSelectorQuery()
selectorQuery.select('#view').boundingClientRect(res => {
  console.log('分开获取 view:', JSON.stringify(res))
})
selectorQuery.select('#view2').boundingClientRect(res => {
  console.log('分开获取 view2:', JSON.stringify(res))
})
selectorQuery.exec()

// 统一获取：在步骤 5 添加回调函数，获取所有请求的结果
wx.createSelectorQuery()
  .select('#view').boundingClientRect()
  .select('#view2').boundingClientRect()
  .exec(res => {
    const viewRes = res[0]
    const view2Res = res[1]
    console.log('统一获取 view:', JSON.stringify(viewRes))
    console.log('统一获取 view2:', JSON.stringify(view2Res))
  })

代码仓库

代码仓库