1.app.js:计算：导航栏高=状态栏高+标题栏高；标题栏高=胶囊高+胶囊距离状态栏的高*2；

App({
globalData: {
// 屏幕高度 默认状态下screenHeight = windowHeight + statusBarHeight
screenHeight: 667,
// 可使用窗口高度 使用自定义状态栏时候 windowHeight == screenHeight
windowHeight: 667,
//状态栏的高度
statusBarHeight: 20,
//胶囊高度
customBarHeight: 32,
// 导航栏高度
navHeight: 60,
// 胶囊距离顶部的高
navTop: 24,
//标题栏的高
titleHeight: 40,
//胶囊距离状态栏的高
customBarHeightmin:4
},
onLaunch() {
const _this = this
let menuButtonObject = wx.getMenuButtonBoundingClientRect();
// console.log(menuButtonObject);
wx.getSystemInfo({
success: (res) => {
console.log(res, 'res');
var statusBarHeight = res.statusBarHeight; //胶囊的位置信息
_this.globalData.navHeight = statusBarHeight + menuButtonObject.height + (menuButtonObject.top - statusBarHeight) * 2; //导航栏高
_this.globalData.navTop = menuButtonObject.top; //胶囊距离顶部的高
_this.globalData.windowHeight = res.windowHeight //可使用的窗口高度
_this.globalData.screenHeight = res.screenHeight //可视区
_this.globalData.statusBarHeight = res.statusBarHeight //状态栏的高
_this.globalData.titleHeight = menuButtonObject.height + (menuButtonObject.top - statusBarHeight) * 2; //标题栏的高
_this.globalData.customBarHeight = menuButtonObject.height //胶囊高度
_this.globalData.customBarHeightmin = menuButtonObject.top - statusBarHeight //胶囊距离状态栏的高
}
})
}
})

2.在页面引入const app = getApp();使用全局变量globalData，

data: {
// 屏幕高度 默认状态下screenHeight = windowHeight + statusBarHeight
screenHeight: app.globalData.screenHeight,
// 可使用窗口高度 使用自定义状态栏时候 windowHeight == screenHeight
windowHeight: app.globalData.windowHeight,
//状态栏的高度
statusBarHeight: app.globalData.statusBarHeight,
//胶囊高度
customBarHeight: app.globalData.customBarHeight,
// 导航栏高度
navHeight: app.globalData.navHeight,
// 胶囊距离顶部的高
navTop: app.globalData.navTop,
//标题栏的高
titleHeight: app.globalData.titleHeight,
//胶囊距离状态栏的高
customBarHeightmin: app.globalData.customBarHeightmin
},

3.给导航栏和标题栏加样式。