微信小程序-屏幕高度分析详解

点击跳转

screenheight代表手机屏幕的高度(包括最上方状态栏和webview渲染区域和tabbar与导航栏)
windowHeight代表webview区域,不包含状态栏和导航栏和tabbar,
如果设置了pages.json里navigationStyle的值custom,那么windowHeight代表webview加上状态栏加上导航栏,不包括tabbar

SelectorQuery.select (选择节点 | 页面中匹配到的第一个)

wx.createSelectorQuery().in(that).select(el).boundingClientRect().exec(res => {

page({
	onLoad () {
		this.queryFixedElementInfo();
	},
	
  	// 查询吸顶元素高度
	queryFixedElementInfo () {
	  // 获取一个 'SelectorQuery' 实例
	  const query = wx.createSelectorQuery();
	
	  // 选择 id 为 'fixed-content' 的页面元素，查询其布局位置
	  query.select('#fixed-content').boundingClientRect();
	
	  // empty-element 选择的是一个页面并不存在的节点，同样发起一个查询，写在这里只是想提醒下看代码片段的各位，对于不能确定的数据，在取值的时候尽量给个默认值，或者判断数据类型后再进行对应的操作，以免操作不当报错，影响后续的逻辑
	  // 实际应用场景可能为，使用 wx:if 控制的元素，在查询时未渲染
	  query.select('#empty-element').boundingClientRect();
	
	  // 官方注解: '执行所有的请求 ***请求结果按请求次序构成数组*** 在callback的第一个参数中返回。'
	  query.exec(res => {
	    const [ fixedElement, emptyElement ] = res;
	    
	    // 第一项为查询页面节点 '#fixed-content' 的返回值，
	    const { bottom, dataset, height, left, right, top, width } = fixedElement || {};
	    // 查询对象中元素自身的宽高
	    console.log(`%c 查询元素的宽高：${width} * ${height}`, 'color: #282C34');
	    /**
	     * top 为距顶部距离， bottom为元素底部距顶部的距离
	     * 这块可以自己调整元素在界面中的位置
	     * bottom - top === height;
	     * console.log(bottom - top === height); // true
	     */
	    console.log(`%c 查询元素相对视图的边界坐标\n上：${top}\n下：${bottom}\n左：${left}\n右：${right}`, 'color: #a52222');
	    // 查询元素中携带的自定义属性
	    console.dir(dataset);
	
	    // 因为第二条并不存在于页面中，所以也没有返回值，从里边取值的时候记得给个默认值
	    const { id } = emptyElement || {};
	    console.log(`%c 以解构方式取到的值为：${id}, 但是不会报错，需要的话可以在解构的时候赋个默认值`, 'color: red');
	    /** 以下写法会报错，影响后续的业务逻辑  */
	    // console.log(res[1].id || emptyElement.id);
	
	    // do sth...
	    // 记录 '#fixed-content' 距离顶部的距离
	    this.setData({ fixedTop: top });
	  });
	},

	// 页面滑动事件
	onPageScroll (e) {
	  const { scrollTop } = e;
	  const { fixedTop, isFixed } = this.data;
	  if (scrollTop >= fixedTop && !isFixed) {
	    this.setData({ isFixed: true });
	    return;
	  }
	  if (scrollTop < fixedTop && isFixed) {
	    this.setData({ isFixed: false });
	    return;
	  }
	},
}

1.作用域不同：screenHeight是整合手机屏幕的高度，windowHeight是webview（不包括手机通知栏、小程序标题栏和tabBar）的高度；

上图展示我们从systemInfo获取到的数据的实际表现，以苹果X的刘海屏为例（所有安卓刘海屏原理类似）：最外层的红色框即屏幕大小，蓝色框即安全区域字面意思也就是开发者所能操纵的页面区域，上面的黄色框即手机的状态栏，绿色区域即我们要自定义的navigationBar。

可见，导航栏紧贴safeArea的上部，如果使用原生导航栏，导航栏下方即是真正意义的可操控范围。
实际上我们自定义的导航栏也是在这个safeArea内与胶囊对齐最为和谐。很关键的原因就是微信将右上角的胶囊按钮作为了内置组件，只有黑白两种颜色，即我们无法改变它的大小位置透明度等等，所以为了配合胶囊按钮，一般自定义的导航栏位置也与上图位置一致。

高度

以下图为例，上面的红色框是statusBar，高度已知；下面的红色框是正文内容，夹在中间的就是求解之一navigationBarHeight；而黄色的是原生胶囊按钮也是在垂直居中位置，高度为胶囊按钮基于左上角的坐标信息已知，不难得出，navigationBarHeight = 蓝色框高度 × 2 + 胶囊按钮.height。（蓝色框高度 = 胶囊按钮.top - statusBarHeight）

函数直接return Promise，await后得到是Object

wx.createSelectorQuery().in(this)
query
.select(‘.ec-canvas’)
.fields({ node: true, size: true })
.exec(res => {

测试屏幕参数iphone6/7/8，在默认模式下，获取screenHeight为667px，windowHeight为603px，statusBarHeight为20px，计算顶部导航栏高度为44px，（44-32(胶囊高度)）/2 = 6px （即胶囊距离状态栏底部的距离），

但是wx.getMenuButtonBoundingClientRect()获取的top值t为24px，24-20(状态栏高度) = 4px （即胶囊距离状态栏底部的距离）

真机和编辑器都出现问题 安卓 ios 都有 计算差值对应不起来

// 获取手机信息 --- 设置自定义头部
	getPhoneInfo: function(){
		const { statusBarHeight, platform } = wx.getSystemInfoSync()
    const { top, height } = wx.getMenuButtonBoundingClientRect()
   
    // 状态栏高度
    wx.setStorageSync('statusBarHeight', statusBarHeight)
    // 胶囊按钮高度 一般是32 如果获取不到就使用32
    wx.setStorageSync('menuButtonHeight', height ? height : 32)
    
    // 判断胶囊按钮信息是否成功获取
    if (top && top !== 0 && height && height !== 0) {
        const navigationBarHeight = (top - statusBarHeight) * 2 + height
        // 导航栏高度
        wx.setStorageSync('navigationBarHeight', navigationBarHeight)
    } else {
        wx.setStorageSync(
          'navigationBarHeight',
          platform === 'android' ? 48 : 40
        )
		}
	},

获取屏幕的高度

let that = this;
// 获取系统信息
wx.getSystemInfo({
  success: function (res) {
    // 获取可使用窗口宽度
    let clientHeight = res.windowHeight;
    // 获取可使用窗口高度
    let clientWidth = res.windowWidth;
    // 算出比例
    let ratio = 750 / clientWidth;
    // 算出高度(单位rpx)
    let height = clientHeight * ratio;
    // 设置高度
    that.setData({
      height: height
    });
  }
});

获取位置的视图的高度

wx.createSelectorQuery().select('#the-id').boundingClientRect(function(rect){
      rect.id      // 节点的ID
      rect.dataset // 节点的dataset
      rect.left    // 节点的左边界坐标
      rect.right   // 节点的右边界坐标
      rect.top     // 节点的上边界坐标
      rect.bottom  // 节点的下边界坐标
      rect.width   // 节点的宽度
      rect.height  // 节点的高度
    }).exec()