uni-app 设置状态栏背景色

在开发中遇到需求是：关闭H5和APP端原生导航栏，但APP端要设置状态栏 背景色。参考了官方文档，为此写下这篇笔记记录下。
首先我们要在page.json文件中关闭原生导航栏，设置状态类字体颜色。代码如下：

"pages": [ 
		{
			"path": "pages/index/index",
			"style": {
				"navigationBarTitleText": "首页",
				"navigationBarTextStyle": "black",//设置状态类字体颜色，只支持white、black这两个颜色
				"app-plus":{"titleNView":false }//关闭H5和APP原生导航栏
			}
		},
	]	

然后我们在页面中创建view标签，设置动态高度及获取状态栏高度。代码如下：

<!-- 状态栏 -->
<view :style="{ height: iStatusBarHeight + 'px'}" class="stat"></view>
js:
 export default {
        data() {
            return {
                iStatusBarHeight:0
            }
        },
        onLoad() {
            this.iStatusBarHeight = uni.getSystemInfoSync().statusBarHeight
        }
    }
css:
.stat{
		background-color: #ff4e54;
		position: fixed;
		z-index: 1;
		height: var(--status-bar-height);// --status-bar-height系统状态栏高度
		width: 100%;
		top: 0;
		left: 0;
	}

取消原生导航栏后，由于窗体为沉浸式，占据了状态栏位置。此时可以使用一个高度为 var(–status-bar-height) 的 view 放在页面顶部，避免页面内容出现在状态栏。

最终效果如下：

也可以参考官方提供的文档：官方文档