uni-app 无法在系统状态栏内渲染自定义文字或图标，因该区域受操作系统保护；只能控制状态栏下方区域的样式及图标颜色，并通过 statusbarheight 或 safeareainsets.top 实现视觉上“紧贴状态栏”的效果。
uni-app 无法在系统状态栏（显示时间、电量、信号的区域）里渲染自定义文字或图标——这是操作系统级的受保护区域，任何小程序或 WebView 都无权修改其内容。你真正能控制的，只有「状态栏下方那块区域」的样式和布局，以及状态栏图标的颜色。
为什么直接往状态栏写文字会失败
系统状态栏由 iOS/Android 系统或微信客户端原生渲染，uni-app 运行在 WebView 或小程序渲染层中，没有权限注入 DOM 或覆盖系统 UI。尝试用 position: fixed; top: 0 强顶上去，只会被截断、遮挡，或触发安全区域裁剪。
- 在 iOS 上，状态栏是独立进程绘制的，连微信自身都只能通过
navigationBarTextStyle控制图标颜色，不能塞文字 - 在 Android 上，部分厂商甚至禁止第三方 App 修改状态栏文字（仅允许改背景色或图标亮暗）
- 所有“状态栏显示自定义信息”的案例，实际都是把内容放在
statusBarHeight高度的占位区下方，视觉上“紧贴状态栏”，而非真正在状态栏内
如何让自定义内容「看起来」在状态栏位置
核心思路：用 statusBarHeight 留白 + 安全区适配 + 胶囊按钮对齐，把你的标题、Logo 或小图标放到状态栏正下方，并确保不被刘海/圆角遮挡。
- 先在
pages.json中启用自定义导航栏："navigationStyle": "custom" - 在页面
onLoad中调用uni.getSystemInfoSync()获取statusBarHeight，并存为 data 值 - 用一个
<view :style="{ height: statusBarHeight + 'px' }"></view>占位，保证后续内容从状态栏底边开始排布 - 如果还要兼容微信胶囊按钮（右上角返回按钮），需额外调用
uni.getMenuButtonBoundingClientRect()，计算出导航栏总高度：menuButtonInfo.bottom + menuButtonInfo.top - statusBarHeight - 给自定义导航栏容器设置
padding-top: statusBarHeight + 'px'或top: statusBarHeight + 'px'，再把文字/图标居中对齐
navigationBarTextStyle 是唯一影响状态栏图标的配置项
这个字段不是用来显示你自己的内容，而是告诉系统“请把时间、信号这些图标画成黑色还是白色”，以便和你的导航栏背景形成对比。它只接受两个值："black" 或 "white"，且必须写在 pages.json 的页面级 style 中（全局配置无效）。
- 如果你的自定义导航栏背景是深色（如
#1a1a1a），就设"navigationBarTextStyle": "white" - 如果是浅色（如
#ffffff），就设"navigationBarTextStyle": "black" - 注意：H5 和 App 平台不支持该字段，只在微信小程序等少数平台生效
安全区域适配容易被忽略的细节
单纯用 statusBarHeight 不足以应对 iPhone X 及以后的刘海屏。真正可靠的方案是结合 getSafeAreaInsets()（需 uni-app 3.0+ 或 HBuilderX 3.6.0+）：
- 调用
uni.getSafeAreaInsets({ success: res => { console.log(res) } })，拿到res.top—— 这才是「安全区域顶部距离屏幕顶端的距离」，比statusBarHeight更准确（尤其在刘海屏下） - 某些安卓机型（如华为 EMUI）的
statusBarHeight返回 0，但safeAreaInsets.top仍有效 - 不要同时依赖
statusBarHeight和safeAreaInsets.top做加法；优先用后者，降级时再 fallback 到前者
最常被跳过的一步是：没在自定义导航栏容器上设置 position: relative 或 z-index，导致胶囊按钮定位错乱或内容被截。只要状态栏区域没被遮住、图标颜色可读、自定义内容不进刘海，就算落地成功了。
