uni-app 嵌套的html页面怎么知道设备的状态栏

UniApp 提供了一种统一的开发框架，支持跨平台开发，并且在处理嵌套路由和页面状态感知方面有所考虑。如果你想要在嵌套的 HTML 页面中获取设备状态栏的信息，可以使用 UniApp 的全局 API 和自定义事件。

1. **获取状态栏高度**：在 Vue 组件中，你可以使用 `uni.getSystemInfoSync()` 函数来获取系统的相关信息，包括状态栏高度。这个函数会在首次调用时返回最新的系统信息，后续不需要再次请求。

export default {
  data() {
    return {
      statusBarHeight: 0,
    };
  },
  created() {
    this.getStatusBarHeight();
  },
  methods: {
    getStatusBarHeight() {
      try {
        const info = uni.getSystemInfoSync();
        this.statusBarHeight = info.windowHeight - info.screenHeight;
      } catch (error) {
        console.error('Failed to get status bar height:', error);
      }
    },
  },
};

2. **监听状态改变**：对于状态栏颜色等动态变化，可以通过 `uni.addEventListener` 监听 'resize' 或者 'orientationchange' 等事件，然后更新你的组件状态。

methods: {
  handleStatusChange(e) {
    if (e.detail.type === 'orientationchange') {
      this.getStatusBarHeight();
    }
  },
},
mounted() {
  uni.addEventListener('orientationchange', this.handleStatusChange);
},
beforeDestroy() {
  uni.removeEventListener('orientationchange', this.handleStatusChange);
}