微信小程序 全面屏适配

最近在做小程序，说实话小程序的坑我才刚踩。今天做了一个关于小程序自定义navigator的功能，不废话，先上图

通过配置app.json的window属性的navigationStyle（导航栏样式，仅支持以下值：
default 默认样式custom 自定义导航栏，只保留右上角胶囊按钮），改为custom模式，来自定义navigator。

---

注释：
注：navigationStyle 只在 app.json 中生效。开启 custom 后，低版本客户端需要做好兼容。开发者工具基础库版本切到 1.7.0（不代表最低版本，只供调试用）可方便切到旧视觉

注：客户端 6.7.2 版本开始，navigationStyle: custom 对 组件无效

然后小程序的页面就会顶到手机屏幕顶部，这样子，好嘞。刚改好，兴致冲冲的拿去给老大测，老大用他的粪叉一扫，哎呦我去，navigator顶部样式乱掉了。刘海屏，真是醉了！

没办法，只能做适配。然后我就用wx.getSystemInfoSync()，获取手机设备的各个参数，在网上有人说可以用model == 'iPhone X'手机型号来适配iphoneX，可是我不光要适配粪叉啊，我要适配所有全面屏!所以我只能翻找其他参数，于是，我找到了

statusBarHeight(状态栏高度)

什么是状态栏高度呢，请看下图：

对啊，我可以给页面头部搞一个与状态栏同等高度的 距离啊。原理都讲完了，上代码。

//app.js
App({
  onShow: function (options) {
    var that = this
    var res = wx.getSystemInfoSync()
    console.log(res)
    that.globalData.statusBarHeight = res.statusBarHeight*2
  }
}

<!--logs.wxml-->
<view class='topBar' style='height:{{statusBarHeight+100}}rpx;padding-top:{{statusBarHeight}}rpx;'>
中秋活动
</view>
<view class="container_page" style='margin-top:{{statusBarHeight+100}}rpx;'>

<!--css-->
.topBar{
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 100rpx;
  border-bottom:1rpx solid #dbdbdb;
  color: #000000;
  font-size: 38rpx;
  line-height: 100rpx;
  z-index: 100;
  text-align: center;
  font-weight: bold;
  background: #FFFFFF;
  box-sizing: border-box;
}