uniapp修改系统状态栏

在UniApp中，可以使用uni.setStatusBarStyle()方法来修改系统状态栏的样式。

以下是一个示例代码：

uni.setStatusBarStyle({
  style: 'light', // 状态栏样式，可选值为：'light'（白底黑字）和 'dark'（黑底白字）
  backgroundColor: '#ff5500' // 状态栏背景色
});

注意：

- 此方法只能在App端使用，小程序和H5端无效。
- 在Android系统上，只有在Android 6.0及以上版本才能修改状态栏样式和背景色。在Android 5.0及以下版本上，只能修改状态栏颜色。
- 在iOS系统上，只能修改状态栏样式，无法修改背景色。

相关问题

uniapp app 隐藏状态栏

uniapp 是一种基于 Vue.js 的跨平台应用框架，它能够帮助开发者快速构建原生体验的移动应用，并且支持多种主流操作系统。隐藏状态栏是优化应用视觉效果的一种常见做法，在使用 uniapp 开发 App 时，你可以通过配置文件或组件属性轻松实现这一功能。

### 实现步骤：

#### 通过配置文件 `config.json` 进行全局设置：

1. 打开项目根目录下的 `config.json` 文件。
2. 添加或修改以下属性：

   "window": {
       "backgroundTextStyle": "light",
       "navigationBarBackgroundColor": "#fff",
       "navigationBarTitleText": "uni-app",
       "navigationBarTextStyle": "black",
       "statusBarStyle": "dark",
       "backgroundColor": "#F4F5F7"
   }

其中，`statusBarStyle`: "hidden" 可以用于隐藏状态栏背景色。

#### 使用组件属性局部控制：

除了全局设置外，你还可以在页面的 `<page>` 标签或特定的 `<view>`、`<navigator>` 等组件上直接指定 `style` 属性来局部控制是否显示状态栏。

<!-- 页面级别的全局隐藏 -->
<page style="status-bar-hidden">
    <!-- 应用内容 -->
</page>

<!-- 组件级别的局部控制 -->
<view class="container" style="position: absolute; top: env(safe-area-inset-top); left: env(safe-area-inset-left);">
    <!-- 应用内容 -->
</view>

### 为什么隐藏状态栏？

隐藏状态栏可以提升应用的整体视觉沉浸感，减少顶部空白区域的存在感，使得内容更加集中于屏幕中央，提供更好的用户体验。

###

获取uniapp的顶部栏高度

你可以使用uniapp的内置API `uni.getSystemInfoSync()`来获取顶部栏的高度。具体实现代码如下：

// 获取系统信息
let systemInfo = uni.getSystemInfoSync()
// 获取状态栏高度
let statusBarHeight = systemInfo.statusBarHeight
// 获取顶部栏高度
let topBarHeight = 44 // 默认值为44，可自行根据需求修改
if (systemInfo.platform === 'android') {
  topBarHeight += 48 // 安卓设备需要再加上48px的高度
}

这样，你就可以得到顶部栏的高度了。