Uniapp 和Vue3 小程序 获取页面dom 方法，Uniapp与Vue3小程序中的页面DOM获取方法探索

温馨提示：这篇文章已超过468天没有更新，请注意相关的内容是否还可用！

摘要：Uniapp和Vue3小程序开发中，获取页面DOM元素的方法不同于传统Web开发。在这两个框架中，小程序并不直接操作DOM，而是通过数据驱动视图的方式实现页面渲染。若需获取页面元素状态或进行某些操作，通常通过绑定事件或使用组件的引用（ref）来实现。在Uniapp和Vue3小程序中，并不直接获取页面DOM，而是通过间接方式操作页面元素。

在小程序环境中，直接获取DOM元素并不像传统的Web开发那样简单，由于小程序的视图层是由小程序框架管理的，而不是浏览器的DOM，因此常用的vue3获取DOM元素的方法在小程序环境中可能无法生效。

Uniapp 和Vue3 小程序获取页面dom 方法，Uniapp与Vue3小程序中的页面DOM获取方法探索第1张

经过研究和尝试，我发现了一种在Uniapp和Vue3小程序中获取页面DOM结构的方法，需要导入getCurrentInstance函数，然后通过这个函数获取当前实例，再使用uni.createSelectorQuery().in(instance)来查询页面元素。

以下是正确的代码示例：

import { getCurrentInstance } from 'vue';
const instance = getCurrentInstance();
const query = uni.createSelectorQuery().in(instance);
query.select('#target').boundingClientRect(data => {
  if (data) {
    console.log("获取到布局信息", data);
    // 这里返回的data就是我们需要的DOM结构
  }
}).exec();

我也要记录下错误的方法，以便大家避免踩坑：

Uniapp 和Vue3 小程序获取页面dom 方法，Uniapp与Vue3小程序中的页面DOM获取方法探索第2张

const query = uni.createSelectorQuery().in(this); // 错误的方法，因为this在小程序的环境中并不能正确指向当前实例
query.select('#target').boundingClientRect(data => {
  console.log(data)
}).exec();

由于小程序环境的限制，不能直接在setup函数内部使用ref来获取DOM元素，如果你想获取自定义组件的实例，你可以在自定义组件上使用ref属性，然后在父组件的setup函数中获取。