uniapp APP里Andriod和iOS隐藏上下安全距离（去白边）导航栏解决方案

uniapp APP里Andriod和iOS隐藏上下安全距离（去白边）导航栏解决方案，隐藏或设置透明

最近的需求需要沉浸式页面，有几点需要注意，目前测试ios不能单页面设置隐藏，只能全局。

环境：uniapp v2版本、hbuilderX

第一种方案：隐藏底部安全距离：

安卓端怎么改回来我这看不懂，大家有需求可以问问AI，代码也更好。 在第一个界面或随便一个界面script中设置。

<script>
// #ifdef APP-PLUS
    // 判断当前环境是否为Android
    if (plus.os.name.toLowerCase() === 'android') {
        var Color = plus.android.importClass("android.graphics.Color");
        const Window = plus.android.importClass("android.view.Window");
        var mainActivity = plus.android.runtimeMainActivity();
        var window_android = mainActivity.getWindow();
        var WindowManager = plus.android.importClass("android.view.WindowManager");
        var View = plus.android.importClass("android.view.View");
        //直接隐藏  
        window_android.setFlags(Window.FLAG_FULLSCREEN, Window.FLAG_FULLSCREEN);
        window_android.getDecorView().setSystemUiVisibility(View.SYSTEM_UI_FLAG_FULLSCREEN | View
            .SYSTEM_UI_FLAG_HIDE_NAVIGATION | View.SYSTEM_UI_FLAG_IMMERSIVE_STICKY);
        //设置为全透明  
        window_android.addFlags(WindowManager.LayoutParams.FLAG_DRAWS_SYSTEM_BAR_BACKGROUNDS);
        window_android.setNavigationBarColor(Color.TRANSPARENT);
    }
    // #endif
    export default {
    }
</script>

IOS端

修改manifest.json源码视图的代码,在·app-plus结构下复制safearea

{
    "name": "xxx",
    "appid": "__UNI__xxxxxxx",
    "description": "",
    "versionName": "1.0.0",
    "versionCode": "100",
    "transformPx": false,
    "app-plus": {
        /*...隐藏...*/
        /* 5+App特有相关 */
        "safearea": {
            //安全区域配置，仅iOS平台生效  
            "bottom": {
                // 底部安全区域配置  
                "offset": "none" // 底部安全区域偏移，"none"表示不空出安全区域，"auto"自动计算空出安全区域，默认值为"none"  
            },
            "left": { //可选，JSON对象，左侧安全区域配置
                "offset": "none" //可选，字符串类型，安全区域偏移值，可取值auto、none
            },
            "right": { //可选，JSON对象，左侧安全区域配置
                "offset": "none" //可选，字符串类型，安全区域偏移值，可取值auto、none
            }
        }
        /*...隐藏...*/
    }
    /*...隐藏...*/
}

第二种方案：沉浸式导航栏

安卓端pages.json的页面配置下修改pages/app-plus，将titleNView设置为false,即可隐藏导航条。 如果设置全局的，请在manifest.json文件里统一改，在"app-plus"节点上添加

    "pages": [

         {
            "path": "pages/index/index",
            "style": {
                /*主要配置*/
                "app-plus": {
                    "titleNView": false,/*隐藏导航条安卓生效,如果全部页面的话可以在manifest加。*/
                    "bottom": "0",
                    "contentAdjust": "false",
                    "bounce": "none",
                    "safearea": {
                        "bottom": "none"
                    },
                    /*这个据说配合index.html的meta使用的，没测试过，暂时放着。*/
                    "ios": {
                        "viewport-fit": "cover"
                    }

                }
            }
        }
    ]

IOS端主要是修改manifest.json源码视图的代码,在app-plus中的statusbar属性·。

{
    "name": "xxx",
    "appid": "__UNI__xxxxxxx",
    "description": "",
    "versionName": "1.0.0",
    "versionCode": "100",
    "transformPx": false,
    "app-plus": {
        /*...隐藏...*/
        "statusbar": { //可选，JSON对象，应用启动后的系统状态栏相关配置
            "immersed": true //可选，字符串类型，沉浸式状态栏样式，可取值none、suggestedDevice、supportedDevice
        },
    }
    /*...隐藏...*/
}

附上uniapp manifest全部配置链接，有些配置比较新，属性值可能不一样。