微信小程序-屏幕高度

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 => {