最近在做小程序，说实话小程序的坑我才刚踩。今天做了一个关于小程序自定义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.jsApp({ 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;'中秋活动/viewview 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;}
