uniapp ios safearea背景色

前提

我们目前开发的应用是基于uniapp+vue3，在之前的运行过程中，发现了一个影响不大的问题，ios端配置了padding-bottom: env(safe-area-inset-bottom)时候，安全区域始终为白色。

解决方案

安全区域的显示可以在manifest.json里配置，文档

"app-plus":{
      "safearea": {                              //可选，JSON对象，安全区域配置
            "background": "#RRGGBB",                                //可选，字符串类型，#RRGGBB格式，安全区域背景颜色
            "backgroundDark": "#RRGGBB",                            //可选，字符串类型，#RRGGBB格式，暗黑模式安全区域背景颜色
            "bottom": {                                             //可选，JSON对象，底部安全区域配置
                "offset": "none"                                            //可选，字符串类型，安全区域偏移值，可取值auto、none
            },
            "left": {                                               //可选，JSON对象，左侧安全区域配置
                "offset": "none"                                            //可选，字符串类型，安全区域偏移值，可取值auto、none
            },
            "right": {                                              //可选，JSON对象，左侧安全区域配置
                "offset": "none"                                            //可选，字符串类型，安全区域偏移值，可取值auto、none
            }
        }
}

在做了不同类型测试之后，我总结了一下安全区域出现的可能的情况

1、仅使用的页面配置safe-area-inset-bottom

配置页面安全区域为白色，未配置页面正常显示

2、配置offset: none，使用的页面配置safe-area-inset-bottom

安全区域背景色继承，而此时配置的safearea => background被覆盖

3、配置offset:auto

应用会自动计算安全区域，所有页面都会显示安全区域，配置的safe-area-inset-bottom无效