PunchSettle-MiniProgram/utils/system.js

const SYSTEM_INFO = uni.getSystemInfoSync();

/**
 * 状态栏高度
 * @returns {number}
 */
export const getStatusBarHeight = () => {
	return SYSTEM_INFO.safeAreaInsets.top || 0;
}

/**
 * 获取胶囊按钮高度（即微信小程序上边的按钮）
 * @returns {number}
 */
export const getCapsuleBarHeight = () => {
	if (uni.getMenuButtonBoundingClientRect) {
		let {
			top,
			height
		} = uni.getMenuButtonBoundingClientRect();
		return height + (top - getStatusBarHeight()) * 2;
	}

	return 40;
}

/**
 * 获取胶囊按钮信息（即微信小程序上边的按钮）
 * capsuleBarHeight 胶囊按钮栏高度
 * capsuleBarLeft 胶囊按钮栏左边距离
 * capsuleBarMargin 胶囊按钮栏边距
 * capsuleBarMarginTop 胶囊按钮栏上边距
 * capsuleBarMarginBottom 胶囊按钮栏下边距
 * capsuleBarContentHeight 胶囊按钮内容高度
 * @returns {{capsuleBarHeight: number, capsuleBarLeft: number, capsuleBarMarginTop: number, capsuleBarMarginBottom: number, capsuleBarContentHeight: number}}
 */
export const getCapsuleBarInfo = () => {
	if (uni.getMenuButtonBoundingClientRect) {
		let { top, height, left} = uni.getMenuButtonBoundingClientRect();
		let barMargin = top - getStatusBarHeight()
		return {
			"capsuleBarHeight": height + barMargin * 2,
			"capsuleBarLeft": left,
			"capsuleBarMargin": barMargin,
			"capsuleBarMarginTop": barMargin,
			"capsuleBarMarginBottom": barMargin,
			"capsuleBarContentHeight": height
		}
	}

	return {
		"capsuleBarHeight": 40,
		"capsuleBarLeft": SYSTEM_INFO.screenWidth,
		"capsuleBarMargin": 4,
		"capsuleBarMarginTop": 4,
		"capsuleBarMarginBottom": 4,
		"capsuleBarContentHeight": 32
	};
}

/**
 * 获取安全区数据
 * statusBarHeight: 状态栏高度
 * capsuleBarHeight: 胶囊按钮高度
 * topHeight: 状态栏+胶囊按钮高度
 * bottomHeight: 底部安全区高度
 * capsuleBarHeight 胶囊按钮栏高度
 * capsuleBarLeft 胶囊按钮栏左边距离
 * capsuleBarMargin 胶囊按钮栏边距
 * capsuleBarMarginTop 胶囊按钮栏上边距
 * capsuleBarMarginBottom 胶囊按钮栏下边距
 * capsuleBarContentHeight 胶囊按钮内容高度
 * @returns {{topHeight: number, bottomHeight: number, statusBarHeight: number, capsuleBarHeight: number, capsuleBarLeft: number, capsuleBarMarginTop: number, capsuleBarMarginBottom: number, capsuleBarContentHeight: number}}
 */
export const getSafeArea = () => {
	let tempSafeArea = getCapsuleBarInfo();
	tempSafeArea.statusBarHeight = getStatusBarHeight();
	tempSafeArea.bottomHeight = SYSTEM_INFO.safeAreaInsets.bottom || 0;
	tempSafeArea.topHeight = getStatusBarHeight() + tempSafeArea.capsuleBarHeight;
	return tempSafeArea;
}