https://developers.weixin.qq.com/miniprogram/dev/api/base/system/system-info/wx.getSystemInfo.html
iphone se最新版
statusBarHeight = 20
capsule.height = 24
为何screenTop高度为64，通过胶囊区域计算出来的导航栏和状态栏高度之和却为60，应该以哪个为准呢?
以下计算状态栏和导航栏的高度之和的方式对吗？
const capsule = wx.getMenuButtonBoundingClientRect();
const systemInfo = wx.getSystemInfoSync();
const { statusBarHeight,safeArea, } = systemInfo || {};
// 胶囊（系统默认退出按钮）距离状态栏顶部的距离
const { top:capsuleTop, height:capsuleHeight } = capsule;
// 胶囊（垂直居中）的上下间距
const capsuleVerticalSpace = (capsuleTop - statusBarHeight) * 2;
// 导航栏高度 = 胶囊高度和垂直居中间距相机
const navBarHeight = capsuleHeight + capsuleVerticalSpace;
// 状态栏和导航栏总高度
const statusNavBarHeight = statusBarHeight + navBarHeight;
// 内容区域高度: 不包含状态栏和导航栏
const { height:contentHeight } = safeArea || {};
console.log(systemInfo,'systemInfo');
console.log(capsule,'胶囊信息');
const extendSystemInfo = { ...systemInfo,statusNavBarHeight,navBarHeight,capsule,contentHeight }
胶囊top 减去 状态栏高度 等于胶囊与状态栏之间的距离
此时胶囊bottom 加上 胶囊与状态栏之间的距离 此时整个高度为nav高度
此时保留状态栏高度，剩余高度为nav文字显示内容区域高度，这样保证的胶囊在nav文字显示内容区域处于正中间
可以给你看下我们的计算方式，入参 componentHeight是组件到状态栏的距离，最好缓存下wx.getSystemInfoSync 和 wx.getMenuButtonBoundingClientRect 两个api的结果，防止频繁调用
export const getNavigationBarTop = (componentHeight = 0) => { const systemInfo = wx.getSystemInfoSync() const screenFixRatio = 750 / systemInfo.windowWidth const { height, top } = wx.getMenuButtonBoundingClientRect() return (top + height / 2) - (componentHeight / 2 / screenFixRatio) }