效果

代码

这里我定义的宽为500px,高为200排序,控制台输出的结果是502,202。原因是我设置了上下左右宽度各为1px的border边框导致

核心代码分析

// const query = uni.createSelectorQuery();表示创建了一个选择器查询实例。通过这个实例，你可以使用不同的方法来选择页面中的 DOM 元素，并执行一系列操作，比如获取节点信息、监听节点属性变化等。
const query = uni.createSelectorQuery();
//选择id为mybox的元素节点。
query.select('#mybox').fields({
    //指定要获取的属性，这里设置为size: true表示要获取尺寸信息。
    size: true,
    //在回调函数(res) => {...}中处理查询结果。回调函数会接收一个res参数，其中包含了查询的结果信息。
}, (res) => {
    // 在回调函数中，通过res.width和res.height获取到查询元素的宽度和高度。
    const width = res.width;
    const height = res.height;
    console.log(width)
    console.log(height)
}).exec();

<template><view><view id="mybox">求我的宽高</view></view>
</template><script>export default {data() {return {};},onReady() {const query = uni.createSelectorQuery();//获取宽度query.select('#mybox').fields({size: true}, (res) => {const width = res.width;const height = res.height;console.log(width)console.log(height)}).exec(); },methods: {},};
</script>
<style>#mybox {width: 500px;height: 200px;border: 1px solid black;}
</style>

注：如果获取到宽高之后还有别的操作，建议放在回调函数中进行，否则可能出现先执行别的操作，再成功获取宽高的问题

例如：下面的例子便是在回调函数中使用画布方法

//创建一个画布上下文对象，用于进行绘图操作。'firstCanvas'是一个指定的画布标识符，表示在页面上的哪个 <canvas> 元素上进行绘制。
var context = uni.createCanvasContext('firstCanvas')
var width = '';
const query = uni.createSelectorQuery();
//获取宽度
query.select('#firstCanvas').fields({size: true
}, (res) => {width = res.width;//获取到宽度进行绘制//绘制路径中的线条。context.setStrokeStyle("#aaaaff")// 设置线条的宽度为2个像素。context.setLineWidth(2)// 绘制横线context.beginPath(); // 开始路径绘制context.moveTo(width / 2, 0); // 将起点移动到 (0, 100)context.lineTo(width / 2, 50);context.stroke(); // 绘制线条var x1 = width / 4; // 第一个竖线的起点 x 坐标var y1 = 50; // 第一个竖线的起点 y 坐标var y2 = 30; // 短竖线的高度var horizontalLength = width / 2; // 横线的长度context.beginPath();context.moveTo(x1, y1 + y2); // 移动到第一个短竖线的起点context.lineTo(x1, y1); // 绘制第一个短竖线context.moveTo(x1 + horizontalLength, y1 + y2); // 移动到横线的右端下方context.lineTo(x1 + horizontalLength, y1); // 绘制第二个短竖线context.moveTo(x1, y1); // 移动到横线的左端下方context.lineTo(x1 + horizontalLength, y1); // 绘制横线/*  */context.stroke(); // 绘制线条// 将之前的绘图操作渲染到画布上。context.draw()
}).exec();