微信小程序开发 中 “安全区域“

在微信小程序开发中，"安全区域"是指在小程序页面中，不会被系统组件（如状态栏、标题栏、iPhone X 系列的刘海屏等）遮挡的可视区域。
随着手机屏幕的多样化，尤其是iPhone X等带有刘海屏或底部操作区域的手机，开发者需要确保小程序的内容不会被这些系统组件遮挡。因此，微信小程序提供了一些API和CSS样式规则来帮助开发者适配这些特殊屏幕。
以下是一些与安全区域相关的概念：

1. 状态栏：显示手机信号、时间等信息的顶部栏。
2. 导航栏：页面顶部的标题栏。
3. TabBar：页面底部的标签栏。
4. iPhone X 系列的刘海区域和底部操作区域：这些区域在小程序页面布局时需要特别注意。
   微信小程序提供了以下方法来获取安全区域的信息：

• wx.getSystemInfo：获取系统信息，其中包括safeArea对象，该对象包含了安全区域的上下左右边界。
• wx.getMenuButtonBoundingClientRect：获取菜单按钮（右上角胶囊按钮）的布局位置信息，可用于适配带有胶囊按钮的导航栏。
  以下是一个示例代码，展示如何获取安全区域：

wx.getSystemInfo({
  success: function(res) {
    console.log(res.safeArea);
    // {
    //   left: 0,
    //   right: 414,
    //   top: 44,
    //   bottom: 736,
    //   width: 414,
    //   height: 692
    // }
  }
});

开发者应该根据获取到的安全区域信息来调整小程序页面的布局，确保内容不会被遮挡。例如，可以通过设置页面的padding-top来避免内容被状态栏遮挡。
在CSS中，可以使用如下样式来适配安全区域：

page {
  padding-top: env(safe-area-inset-top);
  padding-bottom: env(safe-area-inset-bottom);
}

使用上述CSS，可以确保页面内容不会被状态栏和底部操作区域遮挡。