使用 webview 时，如何才能不覆盖状态栏，并且需要设置状态栏的背景颜色为red

参考下
https://uniapp.dcloud.net.cn/tutorial/syntax-css.html#css-%E5%8F%98%E9%87%8F

1. 在pages.json里配置navigationbar的背景色
2. 使用uni.setnavigationbarcolor api https://uniapp.dcloud.net.cn/api/ui/navigationbar.html#setnavigationbarcolor

因为只想做一个app壳子，想通过webview来访问h5
page.js

{  
    "pages": [  
        {  
            "path": "pages/index/index",  
            "style": {  
                "navigationBarTitleText" : "",  
                "navigationStyle": "custom",  
                "app-plus": {  
                    "background": "#feb92e"  
                }  
            }  
        }  
    ],  
    "globalStyle": {  
        "navigationBarTextStyle": "black",  
        "navigationBarTitleText": "My Application",  
        "navigationBarBackgroundColor": "#feb92e",  
        "backgroundColor": "#feb92e"  
    },  
    "uniIdRouter": {}  
}  

页面代码如下

<template>  
    <view class="xxx">  
        <web-view src="https://www.baidu.com/" :update-title="false"></web-view>  
    </view>  

</template>  
<script>  
    export default {  
            data() {  
                return {  

                }  
            },  

            onReady() {  
                uni.setNavigationBarColor({  
                    frontColor: '#feb92e',  
                    backgroundColor: '#feb92e',  
                    animation: {  
                        duration: 400,  
                        timingFunc: 'easeIn'  
                    }  
                })  

            },  
        }  
</script>

结果如下

webview页面直接与状态栏重叠了
于是我想让状态栏与webview部分分开

async onReady() {  
    uni.setNavigationBarColor({  
        frontColor: '#feb92e',  
        backgroundColor: '#feb92e',  
        animation: {  
            duration: 400,  
            timingFunc: 'easeIn'  
        }  
    })  

    let height = 0;  
    let statusbar = 0;  
    // 使用 async/await 来获取系统信息  
    const sysinfo = await uni.getSystemInfo();  
    statusbar = sysinfo.statusBarHeight;  
    height = sysinfo.windowHeight;  
    // 获取 webview  
    let pages = getCurrentPages();  
    let page = pages[pages.length - 1];  
    let currentWebview = page.$getAppWebview();  

    setTimeout(function() {  
        var wv = currentWebview.children()[0];  
        wv.setStyle({ // 设置web-view距离顶部的距离以及自己的高度，单位为px  
            // top: statusbar,  
            height: height - statusbar,  
            statusbar: {  
                background: '#feb92e'  
            }  
        })  

    }, 200); // 如页面初始化调用需要写延迟  

},

结果如下：

这里设置webview的Style时，还有一个情况。
如若我设置 top: statusbar
则页面状态栏就彻底无法控制了

1. 设置页面的 "navigationStyle": "custom",
2. 页面如下编写代码

<template>  
    <view class="xxx" style="padding-bottom: 150rpx;">  
        <view style="height: 200rpx;background-color: aquamarine;">&nbsp;</view>  
        <web-view :fullscreen="false" :webview-styles="webviewStyles" src="https://www.baidu.com/" :update-title="false"></web-view>  
    </view>  

</template>  
<script>  
    export default {  
        data() {  
            return {  
                webviewStyles: {  
                    top: 150,  
                }  
            }  
        },  
        mounted() {  
            setTimeout(() => {  
                uni.setNavigationBarColor({  
                    frontColor: '#feb92e',  
                    backgroundColor: '#feb92e',  
                    animation: {  
                        duration: 400,  
                        timingFunc: 'easeIn'  
                    }  
                })  
            }, 1000)  
        },  
        onReady() {  

        },  
    }  
</script>