微信小程序开发中出现安全区域获取失败?

Question

<view
    class="z-50 relative bg-[var(--background)]"
    :style="{ paddingTop: safeAreaInsets!.top + 'px' }"
  >
</view>
<script>
const { safeAreaInsets } = uni.getWindowInfo()
</script>

这是自定义导航栏中的一段代码,其中 safeAreaInsets 可以获取到安全区域。在用手机测试时发现一些奇怪的问题,如果手机打开微信后,待机比较长的时间(大概半个小时后),之后进入小程序,会发现 safeAreaInsets.top 变为 0,这就导致了导航栏和状态栏重叠。要排除这个问题需要退出微信后重新打开微信再进入小程序,这应该怎么解决?

Answer 1

印象里真机是支持 env() 特性的，你可以用 padding-top: env(safe-area-inset-top) 实现试试。有刘海屏的设备最老的也得是 iPhoneX，肯定是支持这个特性的，不用担心兼容性问题。