uniapp 设置状态栏背景色

Question

uniapp开发项目 如何设置顶部的状态栏的背景色 注意：不是narvigationBar导航栏哦，如下图

Answer 1

可以通过以下两种方式实现：

①
在App.vue中设置全局样式
可以在App.vue的style标签中设置全局样式，以达到设置状态栏背景颜色的目的。具体代码如下：

<style>
  /* 设置状态栏背景颜色 */
  .uni-status-bar {
    background: #FF0000;
  }
</style>

其中，.uni-status-bar是UniApp提供的用于设置状态栏样式的类名，通过为该类添加背景颜色即可实现状态栏背景的修改。

②
使用uni.setNavigationBarColor() API接口
使用uni.setNavigationBarColor() API接口可以直接设置状态栏和导航栏的背景颜色。具体代码如下：

uni.setNavigationBarColor({
  frontColor: '#ffffff', // 前景颜色
  backgroundColor: '#FF0000', // 背景颜色
})

其中，backgroundColor属性用于设置状态栏和导航栏的背景颜色，值为颜色代码；frontColor属性用于设置前景颜色（例如状态栏文字的颜色），默认为黑色。

需要注意的是，第二种方式需要在每个页面上单独设置，适用于需要为不同页面设置不同背景颜色的场景。一般情况下，建议使用全局样式的方式进行设置，能够更加便捷和高效。