uni-app 小程序开发者工具安卓设备 uni.getSystemInfoSync safeAreaInsets 返回值异常

发布于 1周前 作者 zlyuanteng 来自 uni-app

uni-app 小程序开发者工具安卓设备 uni.getSystemInfoSync safeAreaInsets 返回值异常

产品分类

uniapp/小程序/阿里

开发环境、版本号及项目创建方式

项⽬目信息 版本/详情
PC开发环境操作系统 Windows
操作系统版本号 22631.3737
HBuilderX类型 正式
HBuilderX版本号 4.15
第三方开发者工具版本号 3.8.21
基础库版本号 2.9.12
项目创建方式 HBuilderX

示例代码

const {  
    safeAreaInsets  
} = uni.getSystemInfoSync()  
// iphone 品牌机型 正常返回  
{  
    "top": 47,  
    "left": 0,  
    "right": 0,  
    "bottom": 34  
}  
// 安卓机型 结果返回异常  
{  
    "top": 0,  
    "left": 0,  
    "right": 0,  
    "bottom": 2340  
}

操作步骤

const {  
    safeAreaInsets  
} = uni.getSystemInfoSync()  
// iphone 品牌机型 正常返回  
{  
    "top": 47,  
    "left": 0,  
    "right": 0,  
    "bottom": 34  
}  
// 安卓机型 结果返回异常  
{  
    "top": 0,  
    "left": 0,  
    "right": 0,  
    "bottom": 2340  
}

预期结果

{  
    "top": 47,  
    "left": 0,  
    "right": 0,  
    "bottom": 34  
}

实际结果

{  
    "top": 0,  
    "left": 0,  
    "right": 0,  
    "bottom": 2340  
}

bug描述

1、问题描述

运行支付宝小程序开发者工具,除iphone品牌以外的安卓机型返回异常,详情看下方代码

const {  
        safeAreaInsets  
    } = uni.getSystemInfoSync()  
// iphone 品牌机型 正常返回  
{  
    "top": 47,  
    "left": 0,  
    "right": 0,  
    "bottom": 34  
}  
// 安卓机型 结果返回异常  
{  
    "top": 0,  
    "left": 0,  
    "right": 0,  
    "bottom": 2340  
}

4 回复

感谢反馈,你提到安卓获取uni. getSystemInfoSync 里的 safeArea 异常。经过我测试,这个 api 在支付宝小程序相当于调用 my.getSystemInfoSync ,根据对应文档 提示 https://opendocs.alipay.com/mini/api/gawhvz?pathHash=270f3253 返回值 safeArea 在竖屏正方向下的安全区域。安卓暂不支持。供你参考


看支付宝的文档,安卓不支持,没有具体返回值

在处理 uni-app 小程序开发者工具中安卓设备 uni.getSystemInfoSync('safeAreaInsets') 返回值异常的问题时,首先需要确认该返回值在不同设备和不同安卓版本上的表现是否一致。safeAreaInsets 主要用于获取屏幕的安全区域信息,这在处理刘海屏、水滴屏等异形屏时尤为重要。

以下是一个基本的代码示例,展示如何获取并打印 safeAreaInsets 的值:

// 在页面的 onLoad 或其他适当生命周期函数中调用
onLoad() {
    try {
        const systemInfo = uni.getSystemInfoSync();
        const safeAreaInsets = systemInfo.safeAreaInsets;
        console.log('System Info:', systemInfo);
        console.log('Safe Area Insets:', safeAreaInsets);

        // 示例:根据 safeAreaInsets 调整页面布局
        if (safeAreaInsets) {
            const { top, right, bottom, left } = safeAreaInsets;
            // 例如,设置一个顶部padding,以适应刘海屏或状态栏
            this.setData({
                paddingTop: top
            });
        }
    } catch (error) {
        console.error('Failed to get system info:', error);
    }
}

分析与排查

  1. 确认返回值格式safeAreaInsets 应返回一个对象,包含 top, right, bottom, left 属性,每个属性的值为数字,表示对应方向上的安全区域偏移量。

  2. 设备兼容性: 不同安卓版本和设备对安全区域的计算可能有所不同。建议在多种设备和版本上进行测试。

  3. 开发者工具问题: 如果问题仅在开发者工具中出现,而在真机上表现正常,则可能是开发者工具的bug。尝试更新开发者工具到最新版本,或查看官方是否有相关问题的公告。

  4. 代码逻辑检查: 确保调用 uni.getSystemInfoSync 的代码逻辑正确,没有被其他异步操作干扰。

  5. 模拟器与真机差异: 开发者工具中的模拟器可能无法完全模拟真机的表现,建议在真机上测试以获得准确结果。

注意事项

  • 确保在调用 uni.getSystemInfoSync 时没有触发其他可能影响其返回值的操作。
  • 对于复杂布局,可能需要结合其他API(如 uni.getMenuButtonBoundingClientRect)来获取更精确的安全区域信息。
  • 在实际项目中,考虑到性能影响,尽量避免频繁调用此类同步API。

如果以上步骤无法解决问题,建议查阅 uni-app 的官方文档或社区论坛,看看是否有其他开发者遇到并解决了类似的问题。

回到顶部