记录一下uni-app 打包小程序设置页面的安全距离

有很多种解决方式

• 第一种使用js方式解决

  • 这种方式一般用自定义顶部导航栏和底部tabbar方式

  案例代码
  <template>
          <view class="content" :style="{height: 'calc(100% - '+(safeAreaInsets.bottom + statusBarHeight)+'px)', paddingTop: statusBarHeight+'px'}">
                  <view :style="{height: 40 + 'px'}"> 状态栏下的文字 </view>
                  定义NavHeight 高度一般是固定的50px
                  <view class="content" style="height: calc(100% - 50px)">
  
                  </view>
          </view>
  </template>
  
  <script setup>
      const { statusBarHeight, safeAreaInsets } = uni.getSystemInfoSync();
      console.log('statusBarHeight', statusBarHeight)
      console.log('safeAreaInsets', safeAreaInsets)
  
  </script>
  
  

• 使用css 方式解决 (这种还是比较常用的 在一个列表页面或者 底部定位按钮的时候不设置安全区域就会影响系统底部操作)

  • 使用苹果官方推出适配方案css函数env()、constant()来适配
  • env()和constant()，是IOS11新增特性，Webkit的css函数，用于设定安全区域与边界的距离，有4个预定义变量：
    safe-area-inset-left：安全区域距离左边边界的距离
    safe-area-inset-right：安全区域距离右边边界的距离
    safe-area-inset-top：安全区域距离顶部边界的距离
    safe-area-inset-bottom ：安全距离底部边界的距离
  • env()和constant()函数有个必要的使用前提，当网页设置viewport-fit=cover的时候才生效，根据微信小程序的表现和我在实际真机测试时这两个函数生效，推测小程序里的viewport-fit默认是cover。
  • 我们需要将viewport设置为cover，env和constant才能生效。设置代码如下：

  <meta name="viewport" content="width=device-width...... viewport-fit=cover">
  

  • 同时设置env和constant代码，同样env()和constant()需要同时存在，而且顺序不能换。

  /* 可以通过增加padding-bottom来适配 */  
  padding-bottom: constant(safe-area-inset-bottom); /*兼容 IOS<11.2*/  
  padding-bottom: env(safe-area-inset-bottom); /*兼容 IOS>11.2*/
  

使用案例

 <template>
	<view class="home">	
              <button class="btn">按钮</button>
        </view>
</template>
<style>
    .btn {
        position: fixed;
        right: 0;
        left: 0;
        bottom: env(safe-area-inset-bottom);
    }
</style>