如何在UniApp中获取底部安全区域高度？

Question

在UniApp开发中，适配不同设备的屏幕安全区域是提升用户体验的重要环节。其中，获取底部安全区域高度是实现底部按钮、导航栏或自定义底部操作区对齐的关键。然而，许多开发者在实际开发中常遇到无法准确获取底部安全区域高度的问题，导致界面元素被系统操作栏或异形屏切割遮挡。本文将围绕“如何在UniApp中获取底部安全区域高度”这一主题，深入探讨通过uni.getSystemInfoSync()、uni.getSystemInfo()以及uni.getSystemWindowInfo()等API获取安全区域信息的方法，分析各方法在不同平台（如iOS、Android、微信小程序等）下的兼容性差异，并提供一套通用的解决方案。

Answer 1

一、引言：屏幕安全区域适配的必要性

在UniApp开发中，适配不同设备的屏幕安全区域是提升用户体验的重要环节。随着全面屏、刘海屏、异形屏等新型手机设计的普及，底部安全区域的高度变化显著，尤其是在iOS设备上，存在Home Indicator（操作条），而在Android设备上则可能有虚拟导航栏。

获取底部安全区域高度是实现底部按钮、导航栏或自定义底部操作区对齐的关键。然而，许多开发者在实际开发中常遇到无法准确获取底部安全区域高度的问题，导致界面元素被系统操作栏或异形屏切割遮挡。

二、UniApp中常用系统信息获取API

在UniApp中，开发者通常使用以下API来获取系统信息：

• uni.getSystemInfoSync()：同步获取系统信息，推荐使用。
• uni.getSystemInfo()：异步获取系统信息，适用于异步处理。
• uni.getSystemWindowInfo()：获取窗口信息，部分平台支持。

这些API返回的信息中，包含屏幕高度、状态栏高度、导航栏高度以及安全区域信息。

三、各API获取安全区域的兼容性分析

不同平台对安全区域的支持存在差异，以下为各API在不同平台下的兼容性分析：

API	iOS	Android	微信小程序	H5
uni.getSystemInfoSync()	支持	支持	支持	支持
uni.getSystemInfo()	支持	支持	支持	支持
uni.getSystemWindowInfo()	部分支持	部分支持	不支持	不支持

建议优先使用uni.getSystemInfoSync()来获取安全区域信息。

四、获取底部安全区域高度的代码示例

以下是一个获取底部安全区域高度的示例代码：

        
            const systemInfo = uni.getSystemInfoSync();
            const bottomSafeArea = systemInfo.screenHeight - systemInfo.safeArea.bottom;
            console.log('底部安全区域高度:', bottomSafeArea);
        
    

其中，systemInfo.safeArea.bottom表示安全区域底部的Y坐标，通过屏幕高度减去该值即可得到底部安全区域的高度。

五、不同平台的兼容性处理策略

由于各平台对安全区域的支持不一致，开发者需采取不同的处理策略：

1. iOS：Home Indicator高度通常为34px，可通过API精确获取。
2. Android：虚拟导航栏高度通常为48px或56px，但部分设备可能无导航栏。
3. 微信小程序：部分旧版本不支持safeArea字段，需做兼容处理。

为确保兼容性，建议在代码中加入平台判断逻辑：

        
            if (systemInfo.platform === 'ios') {
                // iOS处理逻辑
            } else if (systemInfo.platform === 'android') {
                // Android处理逻辑
            }
        
    

六、通用解决方案设计

结合上述分析，以下是一个通用的底部安全区域高度获取方案：

        
            function getBottomSafeAreaHeight() {
                const systemInfo = uni.getSystemInfoSync();
                if (systemInfo.safeArea) {
                    return systemInfo.screenHeight - systemInfo.safeArea.bottom;
                } else {
                    // 降级处理
                    return systemInfo.platform === 'android' ? 48 : 34;
                }
            }
        
    

该方案优先使用安全区域API，若不支持则根据平台进行默认值设定，确保在所有设备上都能正确适配。

七、流程图：获取底部安全区域高度的逻辑流程

            
                graph TD
                    A[开始] --> B{是否支持safeArea字段}
                    B -->|是| C[使用screenHeight - safeArea.bottom]
                    B -->|否| D[根据平台设置默认值]
                    C --> E[返回底部安全区域高度]
                    D --> E