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

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 如果获取不到就使用32wx.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      // 节点的IDrect.dataset // 节点的datasetrect.left    // 节点的左边界坐标rect.right   // 节点的右边界坐标rect.top     // 节点的上边界坐标rect.bottom  // 节点的下边界坐标rect.width   // 节点的宽度rect.height  // 节点的高度}).exec()

微信小程序-屏幕高度分析详解相关推荐

php小程序onload,微信小程序 loading 组件实例详解
这篇文章主要介绍了微信小程序 loading 组件实例详解的相关资料,需要的朋友可以参考下 loading通常使用在请求网络数据时的一种方式,通过hidden属性设置显示与否主要属性: wxml 显 ...
微信小程序框架(二)-全面详解（学习总结---从入门到深化）
目录组件_基础视图容器 view 文本 text 图片 image 组件_滑块视图容器基本实现 Swiper常用属性说明组件_滚动视图区域水平滚动垂直滚动常用属性组件_icon 图标使 ...
微信小程序02【配置详解、生命周期-app对象使用、页面跳转详解】
学习地址:https://www.bilibili.com/video/BV1sx411z77P 笔记01:https://blog.csdn.net/weixin_44949135/article/ ...
微信小程序框架(四)-全面详解（学习总结---从入门到深化）
目录路由_navigateTo 页面跳转携带参数返回上一级页面路由_redirectTo 页面跳转路由_reLaunch 页面跳转路由_switchTab 实现 tabbar 页面跳转交 ...
微信小程序--基础内容（详解）（一）
一.常用标签 1.view 标签 view 标签是一个块级元素,类似于 div(小程序里面没有div标签),里面可以放任何内容或者插值表达式,如下所示: <view>这是view标签< ...
新手微信小程序制作教程步骤详解！
制作微信小程序方法: 1.在微信公众平台上申请一个小程序账号,申请完成之后需要进行微信认证,并且需要缴纳300元的认证费用.如果不缴纳300元的费用,微信小程序商城没有开通支付功能. 2.新建一个空白 ...
微信小程序框架(一)-全面详解（学习总结---从入门到深化）
目录小程序与普通网页开发的区别体验小程序微信小程序账号申请微信小程序开发者工具下载安装创建项目开发者工具说明小程序目录结构描述整体的 app 描述各自页面的 page 全局配置_Pa ...
微信小程序：setData函数详解及注意事项
在微信小程序中经常会使用到setData函数把变量渲染到视图层,那么什么是setData呢?如何使用?注意事项有些什么?下面我们就来详细了解一下! 正文 setData是小程序开发中使用最频繁的接口, ...
微信小程序按钮Button使用详解
最近在出微信小程序系列教程顺手写了点博客欢迎大家关注 button 用来实现按钮点击效果,本文章效果如下: 1 wxml 文件中在这里我就放了三个普通的按钮 <view class=&qu ...

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

微信小程序-屏幕高度分析详解相关推荐

最新文章

热门文章