uniapp获取底部安全距离以及状态栏高度等

Uniapp 是一种开源跨平台应用程序框架，可以使用 Vue.js 开发多个平台（如 H5、APP、小程序等）的应用。在开发 Uniapp 应用时，需要获取底部安全距离以及状态栏高度等信息，以适配不同终端的显示效果。

在 Uniapp 中，获取底部安全距离可以使用以下代码：

// 获取底部安全距离
let safeArea = uni.getSystemInfoSync().safeArea;
let screenHeight = uni.getSystemInfoSync().screenHeight;
let safeAreaBottom = screenHeight - safeArea.bottom;

其中，uni.getSystemInfoSync() 方法可以获取当前设备的系统信息，包括安全区域的信息。通过获取设备的屏幕高度和安全区域的底部位置，可以计算出底部安全距离。

在 Uniapp 中，获取状态栏高度可以使用以下代码：

// 获取状态栏高度
let statusBarHeight = uni.getSystemInfoSync().statusBarHeight;

其中，statusBarHeight 属性可以获取设备状态栏的高度。状态栏高度可以用于适配顶部导航栏的位置和大小。

以下是两条示例说明：

1. 获取底部安全距离

假设有一个底部导航栏，需要在底部导航栏底部留出一定的安全距离以适配不同设备。可以使用以下代码获取底部安全距离：

<template>
  <view class="tabbar" :style="{height:tabbarHeight + 'px'}">
    <view class="tabbar-item" v-for="(item,index) in tabbarList" :key="index">
      <image class="tabbar-icon" :src="item.icon"></image>
      <text class="tabbar-text">{{item.text}}</text>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      tabbarList: [
        {icon: 'tabbar_home.png',text: '首页'},
        {icon: 'tabbar_user.png',text: '我的'}
      ],
      tabbarHeight: 50 // 初始化底部导航栏高度
    }
  },
  onReady() {
    // 计算底部安全距离
    let safeArea = uni.getSystemInfoSync().safeArea;
    let screenHeight = uni.getSystemInfoSync().screenHeight;
    let safeAreaBottom = screenHeight - safeArea.bottom;
    // 修改底部导航栏高度
    this.tabbarHeight += safeAreaBottom;
  }
}
</script>

在 onReady() 生命周期中，使用 uni.getSystemInfoSync() 方法获取设备信息，并计算出底部安全距离后，修改底部导航栏的高度即可。

1. 获取状态栏高度

在开发使用了顶部导航栏的页面时，可能需要根据不同设备的状态栏高度调整导航栏的位置和大小。可以使用以下代码获取状态栏高度并进行适配：

<template>
  <view class="navbar" :style="{height:navbarHeight + 'px',paddingTop:statusBarHeight + 'px'}">
    <image class="navbar-back" :src="backIcon" @click="goBack"></image>
    <text class="navbar-title">{{title}}</text>
  </view>
</template>

<script>
export default {
  data() {
    return {
      title: '我的订单',
      backIcon: '',
      navbarHeight: 80, // 初始化导航栏高度
      statusBarHeight: 20 // 初始化状态栏高度
    }
  },
  onReady() {
    // 计算状态栏高度
    let statusBarHeight = uni.getSystemInfoSync().statusBarHeight;
    // 修改导航栏样式
    this.backIcon = '../../static/img/back.png'; // 设置返回按钮图标
    this.navbarHeight += statusBarHeight; // 将状态栏高度加入到导航栏高度中
  },
  methods: {
    goBack() {
      uni.navigateBack({
        delta: 1
      })
    }
  }
}
</script>

在 onReady() 生命周期中，使用 uni.getSystemInfoSync() 方法获取设备信息，并计算出状态栏高度后，根据需要修改导航栏的样式即可。在本示例中，将状态栏高度加入到导航栏高度中，从而使导航栏下移到正确的位置。