小程序获取窗口宽高和dom元素

微信小程序中获取DOM数据及操作

原创已于 2023-06-01 10:03:57 修改 · 3.3k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#小程序 #微信小程序

于 2023-04-21 09:03:09 首次发布

文章介绍了如何在微信小程序中通过wx.getSystemInfoSync获取窗口数据，以及使用wx.createSelectorQuery来操作和获取DOM元素信息，包括select方法选择元素，boundingClientRect获取元素属性，以及exec函数处理结果。由于小程序不能直接操作DOM，文中提到了解决矩形查询可能返回null的策略，即使用定时器异步获取。

一、获取手机窗口数据

wx.getSystemInfoSync().windowWidth // 获取当前窗口的宽度
wx.getSystemInfoSync().windowHeight // 获取当前窗口的高度
wx.getSystemInfoSync().model // 获取当前采用的设备
wx.getSystemInfoSync().pixelRatio
wx.getSystemInfoSync().language // 获取当前所采用的的语言
wx.getSystemInfoSync().version // 获取当前设备的版本

二、获取dom元素

var query = wx.createSelectorQuery();  // 创建节点选择器
query.select('.list').boundingClientRect(res=>{
    console.log(res)  // 获取class为list的节点
})；
query.selectViewport().scrollOffset()；
query.exec((res) => {
    var listHeight = res[0].height; // 获取list高度
})；

// 注意：res[0]为当前节点的详细数据；res[1]为显示区域的竖直滚动位置；query.exec((res) => {})中的回调函数是最后执行的，若要获取高度等信息进行操作的话，要在回调函数中进行。

================================= 华丽的分割线 =============================

由于最近开发小程序遇到了相关dom操作的问题，所以在此做下详细介绍：

下面内容引自【传送门】

由于微信官方禁止小程序操作dom元素，因而无法像前端一样操作小程序DOM，好在官方提供了API ，

这个api叫做 wx.createSelectorQuery(), 官方定义：返回一个 SelectorQuery 对象实例。

这个api的select()方法用于查找元素，类似jq的元素选择器

然后有 boundingClientRect(function(res){}) 则返回指定元素的DOM属性，res代表元素本身，(百度了 boundingClientRect ：边界中心)

再之后的exec(function(rect){})则是设置元素属性，rect在这里指的是所有匹配到结果的集合，通过调用that/this.setdata({})可以更改元素dom值，请注意！rect是一个数组集合，想要设置某一个元素，需要给该数组加指定元素的下标！

看下面代码：

onReady: function () {
    var that = this
    const query = wx.createSelectorQuery();
    query.select('.cont1').boundingClientRect(function (res) {
//这里返回元素自身的DOM属性
          console.log(res);

    }).exec(function(rect){
        that.setData({
          swiperHeight: rect[0].height + 0
        })
        // rect返回一个数组，需要使用下标0才能找到
        // console.log(s[0].height)
    });
  },

网上听大佬说偶尔会有rect返回为null的意外，昨晚翻遍百度，终于找到了一个解决方法，感谢那位大佬(传送门)

/*原理是使用定时器异步获取dom*/
　　setTimeout(function () {
     var query = wx.createSelectorQuery();
       query.select('.cont1').boundingClientRect();
      query.exec(function (rect) {
        if (rect  === null) return;
       that.setData({
          swiperHeight: rect .height + 10  
        })
        
      });
    }, 500)

以上，有问题欢迎指出！