微信小程序 全面屏的適配

通過配置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;
}