uni-app如何获取系统状态栏高度代码-uni-app-PHP中文网

直接用 uni.getsysteminfosync().statusbarheight 即可获取状态栏高度（px），ios/android 真机稳定，需真机调试；h5 返回 0，微信小程序需结合 getmenubuttonboundingclientrect 计算导航栏高度，rpx 转换用 uni.upx2px()，safeareainsets.bottom 跨端兼容性差需降级处理。

uni-app如何获取系统状态栏高度代码

直接用 `uni.getSystemInfoSync().statusBarHeight` 就够了

绝大多数场景下，uni.getSystemInfoSync() 返回的对象里就有 statusBarHeight，单位是 px，iOS 和 Android 真机都稳定可用。它同步执行、不依赖回调，不会出现“取到 undefined”的问题。

常见错误现象：有人在 onLoad 里调用异步版 uni.getSystemInfo()，却在 success 回调外直接读 res.statusBarHeight，结果是 undefined；还有人误以为要先调 uni.getDeviceInfo()，其实它根本不返回 statusBarHeight。

注意点：

statusBarHeight 在模拟器中可能不准（比如微信开发者工具常返回 20），必须真机调试验证
不要在 data 里写死默认值（如 statusBarHeight: 20），应初始化为 0 或 null，等生命周期钩子就绪后再赋值
H5 端该值始终为 0（因为浏览器无状态栏概念），需单独处理

微信小程序里想对齐胶囊按钮？得配合 `uni.getMenuButtonBoundingClientRect()`

仅靠 statusBarHeight 不足以还原原生导航栏高度——微信右上角那个胶囊按钮的位置和尺寸才是关键。它的顶部距离屏幕顶端（top）减去状态栏高度，再乘以 2，加上自身高度（height），就是完整标题栏高度。

公式是：navigationBarHeight = (menuButton.top - statusBarHeight) * 2 + menuButton.height

使用要点：

uni-app

uni-app 是基于 Vue 的跨端开发框架，适合开发 H5、App、小程序、鸿蒙和多端业务应用。

下载

必须在 onShow 或 onMounted 后调用，不能在 created 阶段 —— 小程序环境未就绪时会返回空对象或报错
要用 try/catch 包裹，部分低端机型或旧基础库版本可能不支持该 API
该 API 仅在微信/支付宝/百度等小程序平台有效，App 和 H5 端调用会失败

rpx 单位下怎么用？别手动除算，用 `uni.upx2px()`

拿到的 statusBarHeight 是 px，但你在样式里用的是 rpx，硬套 (height / screenWidth) * 750 容易因四舍五入出偏差，尤其在小数值（如 20px → 40rpx）时更明显。

正确做法是交给 uni-app 自带转换函数：

const systemInfo = uni.getSystemInfoSync()
const statusBarPx = systemInfo.statusBarHeight
const statusBarRpx = uni.upx2px(statusBarPx) // 注意：这个函数输入是 px，输出是 rpx 数值

注意：uni.upx2px() 的参数是「px 值」，不是字符串；它在 App 和小程序端可靠，H5 端需降级为固定值（如 44）。