feat: 添加全局数据属性和初始化逻辑以支持导航栏和安全区域计算

This commit is contained in:
熊熊熊子路
2026-01-16 10:43:34 +08:00
parent d2bca8e36b
commit b0b0d7b998
2 changed files with 54 additions and 3 deletions
+43 -2
View File
@@ -1,5 +1,46 @@
// app.ts
App<IAppOption>({
globalData: {},
onLaunch() {},
globalData: {
navBarHeight: 0, // 导航栏总高度
navBarContentHeight: 0, // 胶囊那一栏的高度(不含状态栏)
statusBarHeight: 0, // 状态栏高度
menuRight: 0, // 胶囊右边距
menuTop: 0, // 胶囊顶部距离
menuHeight: 0, // 胶囊高度
tabbarHeight: 0, // 底部导航栏高度
safeAreaBottom: 0, // 底部安全区域坐标
safeAreaInsetBottom: 0, // 中间区域内容的底边坐标
system: '', // 系统信息
token: '',
},
onLaunch() {
// 1. 获取胶囊按钮位置信息
const menuButtonInfo = wx.getMenuButtonBoundingClientRect()
// 2. 获取系统窗口信息
const windowInfo = wx.getWindowInfo()
const deviceInfo = wx.getDeviceInfo()
// 赋值基础信息
this.globalData.system = deviceInfo.system
this.globalData.menuRight = windowInfo.screenWidth - menuButtonInfo.right
this.globalData.menuTop = menuButtonInfo.top
this.globalData.menuHeight = menuButtonInfo.height
this.globalData.statusBarHeight = windowInfo.statusBarHeight
this.globalData.safeAreaBottom = windowInfo.safeArea.bottom
// 计算导航栏内容区域高度(不含状态栏)
// 解释:(胶囊上边距 - 状态栏高度) 是胶囊距离状态栏的间隙,上下各有一个间隙,所以 * 2
const gap = menuButtonInfo.top - windowInfo.statusBarHeight
const navContentHeight = menuButtonInfo.height + gap * 2
this.globalData.navBarContentHeight = navContentHeight
// 计算导航栏+手机状态栏高度
// 计算公式:导航栏高度 = 状态栏高度 + (胶囊上边距 - 状态栏高度) * 2 + 胶囊高度
this.globalData.navBarHeight = windowInfo.statusBarHeight + navContentHeight
// 计算底部小黑条高度 (屏幕高度 - 安全区域底部坐标)
const safeAreaInsetBottom = windowInfo.screenHeight - windowInfo.safeArea.bottom
this.globalData.safeAreaInsetBottom = safeAreaInsetBottom
},
})
+11 -1
View File
@@ -3,8 +3,18 @@
interface IAppOption {
globalData: {
navBarHeight: number,
navBarContentHeight: number,
statusBarHeight: number,
menuRight: number,
menuTop: number,
menuHeight: number,
tabbarHeight: number,
safeAreaBottom: number,
safeAreaInsetBottom: number
system: string,
token: string
userInfo?: WechatMiniprogram.UserInfo
token?: string
}
userInfoReadyCallback?: WechatMiniprogram.GetUserInfoSuccessCallback
}