关于微信小程序自定义导航栏时，如何获取手机状态栏和导航栏高度

微信小程序导航栏状态栏可修改项

image.png

在微信小程序中，能修改状态栏和导航栏的样式，只能修改背景色、文字颜色（只支持白色/黑色）、和标题文字。

image.png
navigationStyle 可以控制是否显示导航栏。如果设置为custom，则没有状态栏，且导航栏也为可操作空间，即这时候前端可以控制的区域为整个手机屏幕
image.png
获取微信小程序状态栏高度
获取系统信息方法使用wx.getSystemInfoSync()，该方法的状态栏高度属性statusBarHeight

let res = wx.getSystemInfoSync();
let statusHeight = res.statusBarHeight; // 注意：此时获取到的值的单位为 'px'

image.png

获取微信小程序导航栏高度

wx.getMenuButtonBoundingClientRect()，根据高度及上下位置，结合状态栏高度即可算出导航栏高度

image.png
在大多数情况下得出的导航栏高度都是 40px，个人观察和测试，微信小程序的导航栏在大部分机型上都是 44px

自定义导航栏时

因为不同型号的手机的状态栏高度是不一样的，但是导航栏高度是一样的，状态栏高度使用 wx.getSystemInfoSync().statusBarHeight 获取，注意单位是 px ，导航栏高度设置为 44px 。
因为在微信小程序中，经常使用 rpx 作为单位。
rpx 单位本质上就是一个百分比单位：100%为 750rpx，若想将 px 转为 rpx

let res = wx.getSystemInfoSync();
let buttonInfo = wx.getMenuButtonBoundingClientRect();
let navBarHeight = (buttonInfo.top - res.statusBarHeight) * 2 + buttonInfo.height;
let _navBarHeight = navBarHeight * 750 / wx.getSystemInfoSync().windowWidth;//导航栏高度
this.globalData.navBarHeight = _navBarHeight;
this.globalData.statusBarHeight = res.statusBarHeight * 750 / wx.getSystemInfoSync().windowWidth;//状态栏高度