小程序屏幕各区域高度

const windowInfo = wx.getWindowInfo()
console.log(windowInfo)
const menu = wx.getMenuButtonBoundingClientRect();
console.log(menu)

// 第一种页面：默认页面有官方底部菜单
var bodyHeight = windowInfo.windowHeight;

// 第二种页面：默认页面无官方底部菜单
var bodyHeight = windowInfo.windowHeight;

// 第三种页面：自定义页面无官方底部菜单
// 屏幕高度
var screenHeight = windowInfo.screenHeight;
console.log("屏幕高度", screenHeight)
// 状态栏高度
var statusBarHeight = windowInfo.statusBarHeight;
console.log("状态栏高度：", statusBarHeight)
// 导航栏高度
var navBarHeight = menu.height + (menu.top - statusBarHeight) * 2;
console.log("导航栏高度：", navBarHeight)
// 胶囊高度
var capsuleHeight = menu.height;
console.log("导航栏中胶囊高度：", capsuleHeight)
// 自定义高度
var customHeight = menu.top;
console.log("导航栏中自定义高度：",customHeight)
// 苹果底部小黑条高度//34px
var bottomHeight = windowInfo.screenHeight - windowInfo.safeArea.height - windowInfo.statusBarHeight;
console.log("苹果底部小黑条高度：", bottomHeight);
// 可视区域高度
var bodyHeight = screenHeight - statusBarHeight - navBarHeight - bottomHeight;
console.log("可视区域高度：", bodyHeight)

// 第四种页面：自定义页面有官方底部菜单
// 屏幕高度
var screenHeight = windowInfo.screenHeight;
console.log("屏幕高度", screenHeight)
// 可视屏幕高度
var windowHeight = windowInfo.windowHeight;
console.log("可视屏幕高度", windowHeight)
// 状态栏高度
var statusBarHeight = windowInfo.statusBarHeight;
console.log("状态栏高度：", statusBarHeight)
// 导航栏高度
var navBarHeight = menu.height + (menu.top - statusBarHeight) * 2;
console.log("导航栏高度：", navBarHeight)
// 胶囊高度
var capsuleHeight = menu.height;
console.log("导航栏中胶囊高度：", capsuleHeight)
// 自定义高度
var customHeight = menu.top;
console.log("导航栏中自定义高度：",customHeight)
// 可视区域高度
var bodyHeight = windowInfo.windowHeight - statusBarHeight - navBarHeight;
console.log("可视区域高度：", bodyHeight)