微信小程序顶部安全区域计算和适配：全局配置与页面示例

在微信小程序中，顶部安全区域是指在刘海屏或者水滴屏的手机上，屏幕顶部因为有凸起的部分而导致显示内容被遮挡的区域。为了避免这种情况，开发者需要对顶部安全区域进行计算和适配。

具体例子如下：

在全局配置中设置顶部安全区域的高度：

'window': {
  'navigationBarTitleText': 'Demo',
  'navigationBarBackgroundColor': '#ffffff',
  'navigationBarTextStyle': 'black',
  'enablePullDownRefresh': true,
  'backgroundTextStyle': 'dark',
  'backgroundColor': '#f8f8f8',
  'safeArea': {
    'top': 20,
    'bottom': 0
  }
}

其中，safeArea中的top表示顶部安全区域的高度，bottom表示底部安全区域的高度。这里设置了顶部安全区域的高度为20px。

在页面中使用顶部安全区域的高度：

Page({
  onReady: function () {
    const { statusBarHeight, safeArea } = wx.getSystemInfoSync()
    const { top: safeAreaTop } = safeArea
    const titleBarHeight = (statusBarHeight + safeAreaTop) * 2
    console.log('title bar height:', titleBarHeight)
  }
})

首先通过wx.getSystemInfoSync()获取系统信息，包括状态栏高度和安全区域的信息。然后计算出顶部标题栏的高度，其中包括状态栏高度和顶部安全区域的高度。最后使用console.log()打印出顶部标题栏的高度。

通过以上例子，我们可以看到在微信小程序中计算和适配顶部安全区域是非常简单的。只需要在全局配置中设置安全区域的高度，然后在页面中获取系统信息并计算出顶部标题栏的高度即可。