uniapp app顶部刘海

在uniapp中，要解决App顶部刘海的问题，可以按照以下步骤进行操作：
1. 在main.js文件中，封装一个全局函数`getPhoneInfo`，用于获取手机系统信息，并设置状态栏高度。代码如下：

Vue.prototype.getPhoneInfo = function(){
  const phoneInfo = uni.getSystemInfoSync();// 获取手机系统信息
  let statusBarObj = {
    statusBarHeight: 20/* 状态栏默认高度 */
    //如果自己有需要其他属性的话，可以往这里添加
  }
  // 设置状态栏高度（H5顶部无状态栏小程序有状态栏需要撑起高度）
  statusBarObj.statusBarHeight = phoneInfo.statusBarHeight;
  return statusBarObj;
}

2. 在需要使用顶部刘海的页面中，使用`this.getPhoneInfo`函数获取状态栏高度，并设置顶部元素的高度来撑起刘海区域。代码如下：

<template>
  <!-- 顶部设置一个元素高度，撑开特定高度 -->
  <view :style="{height:statusBarHeight + 'px'}"></view>
</template>

<script>
export default {
  data() {
    return {
      /* 设定状态栏默认高度 */
      statusBarHeight:20
    }
  },
  created(){
    let statusBarObj = this.getPhoneInfo()
    this.statusBarHeight = statusBarObj.statusBarHeight
  },
  //计算属性：更新statusBarHeight
  computed:{
    style() {
      var statusBarHeight = this.statusBarHeight;
      return statusBarHeight;
    },
  },
}
</script>

总结：通过以上步骤，你可以在uniapp中解决App顶部刘海的问题。使用全局函数`getPhoneInfo`获取状态栏高度，并在需要的页面中设置顶部元素的高度来适应刘海区域。