uni-app 全面屏、刘海屏适配（iphoneX 适配）及安全区设置

iOS 方案一：使用原生占位（仅 App 端支持）

manifest.json 文件 app-plus 节点下配下 safearea

"safearea": {
  "background": "#CCCCCC",
  "bottom": {
    "offset": "auto"
  }
}

iOS 方案二：不使用原生占位（非 App 端可以不配置 manifest）

manifest.json 文件 app-plus 节点下配下 safearea

"safearea": {
  "bottom": {
    "offset": "none"
  }
}

然后在需要适配的页面内使用 css 常量 constant(safe-area-inset-bottom)、env(safe-area-inset-bottom) 来适配，参考：为 iPhoneX 设计网站。微信小程序模拟器不支持，以真机为准。

比如为列表底部添加内边距避开安全区，在 iPhoneX 上列表底部会有内边距，在其他设备上没有内边距：

<style>
.list {
  padding-bottom: 0;
  padding-bottom: constant(safe-area-inset-bottom);
  padding-bottom: env(safe-area-inset-bottom);
}
</style>

注意：使用了 pages.json 里的原生 tabbar，不管 manifest 里安全区设置如何，在 tabbar 下方都会留出空隙。

判断是否为刘海屏的方法

使用 5+ API （plus.navigator.hasNotchInScreen）可查询当前设备是否为刘海屏。

详情参考：https://www.html5plus.org/doc/zh_cn/navigator.html#plus.navigator.hasNotchInScreen

安卓底部虚拟按键背景色修改方式

使用 Native.js 修改：

var Color = plus.android.importClass("android.graphics.Color");
plus.android.importClass("android.view.Window");
var mainActivity = plus.android.runtimeMainActivity();
var window_android = mainActivity.getWindow();
window_android.setNavigationBarColor(Color.GREEN);