Uniapp 和Vue3 小程序 获取页面dom 方法

最近在写公司的小程序项目 技术框架 主要是Uniapp 和 Vue3

恰好有个需求是要 获取小程序页面dom 结构 用常见的vue3获取dom 结构不起效

记录一下

先给出正确答案

javascript 复制代码
<template>
  <view>
    <view>
      <view>Html</view>
      <view id="target">Css</view>
      <view>Javascrip</view>
    </view>
  </view>
</template>


<script setup>
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();
</script>

同时记录下错误答案

javascript 复制代码
const query = uni.createSelectorQuery().in(this);
query.select('#target').boundingClientRect(data => {
  console.log(data)
}).exec();

缺少 getCurrentInstance 导入 会报错 vendor.js? [sm]:2306 TypeError: Cannot read property 'route' of undefined

javascript 复制代码
  <view>
    <view>
      <view>Html</view>
      <view id="target" ref="cssRef">Css</view>
      <view>Javascrip</view>
    </view>
  </view>

import { ref,onMounted,nextTick } from "vue";

const cssRef = ref(null);

onMounted(() =>{
  console.log(cssRef.value)
})

nextTick(() =>{
  console.log(cssRef.value)
})

常用的vue3 获取dom 元素方法 只会打印null 不会获取到dom结构

由于小程序环境的限制,不能直接在setup函数内部使用ref来获取DOM元素,因为小程序的视图层是由小程序框架管理的,而不是浏览器的DOM。

还有一种获取dom结构的方法 自定义组件上绑定ref

使用ref获取自定义组件实例: 如果你需要获取的是自定义组件的实例,你可以在自定义组件上使用ref属性,然后在父组件的setup函数中通过ref来获取。

javascript 复制代码
// 自定义组件
export default {
  setup() {
    const myComponentRef = ref(null);

    return {
      myComponentRef
    };
  }
};

// 使用自定义组件的父组件
<template>
  <my-custom-component ref="myComponentRef" />
</template>

<script>
import MyCustomComponent from './MyCustomComponent.vue';

export default {
  components: {
    MyCustomComponent
  },
  setup() {
    const myComponentRef = ref(null);

    onMounted(() => {
      if (myComponentRef.value) {
        // 这里可以访问到自定义组件的实例
        console.log(myComponentRef.value);
      }
    });

    return {
      myComponentRef
    };
  }
};
</script>
相关推荐
拼图20910 小时前
element-plus——图标推荐
javascript·vue.js·elementui
浩星10 小时前
uniapp运行鸿蒙报错整理
uni-app
游戏开发爱好者811 小时前
iOS App 电池消耗管理与优化 提升用户体验的完整指南
android·ios·小程序·https·uni-app·iphone·webview
_pengliang12 小时前
小程序按住说话
开发语言·javascript·小程序
midsummer_woo13 小时前
基于springboot+vue+mysql工程教育认证的计算机课程管理平台(源码+论文)
vue.js·spring boot·mysql
喝拿铁写前端14 小时前
技术是决策与代价的平衡 —— 超大系统从 Vue 2 向 Vue 3 演进的思考
前端·vue.js·架构
万岳科技程序员小金14 小时前
多端协同的招聘系统源码开发指南:小程序+APP一体化设计
小程序·软件开发·app开发·招聘小程序·同城招聘系统源码·招聘app开发·招聘软件开发
豆豆(设计前端)14 小时前
如何成为高级前端开发者:系统化成长路径。
前端·javascript·vue.js·面试·electron
xkxnq14 小时前
微信小程序地理定位功能
微信小程序·小程序
難釋懷14 小时前
微信小程序全局数据共享
微信小程序·小程序