根据项目的需求，我们不再需要小程序提供导航栏，需要自定义第一个。经过查阅资料，终于搞明白了，完美兼容iPhone X系列。
下面我们下在模拟器里的运行效果：
小程序官方只是提供了，如何自定义导航栏，却没有告诉我们，如何完美的兼容不同的机型....泪奔
一、设置自定义导航栏
首先在app.json里修改window对象，添加："navigationStyle": "custom"
在运行项目 你会发现导航栏不见了，右上角的胶囊 覆盖了内容，返回按钮也不见了！！！！！
现在明白了，添加上"navigationStyle": "custom"，导航栏消失了，只能自定义返回按钮，还要写一个组件，听着就头疼，放心，我教你........
首先你不能被右上角胶囊覆盖页面呀，况且在iPhone X上展示的还不一样，如下图：
怎么办呢！其实小程序提供给我们的导航栏 是两块的，一块是用来展示状态信息栏（状态栏），另一块就是展示title和返回按钮的标题栏，细心的同学会发现在iPhone 8 和iPhone X唯一的不同就是状态栏的高度不同而已。既然我们知道问题的所在，那我们来解决吧！
微信小程序，提供了一个获取设备信息的方法：wx.getSystemInfo()。这个方法可以获取到设备的基本信息，包括我们要的状态栏的高度。
我们在index.js的onload方法里添加如下方法：
在模拟器里选择iPhone X和iPhone 7 看一下打印结果：
下面写一个完成的方法 来保存这个变化状态栏高度：
记得在onload里调用this.onGetSystemInfo()方法，在index.wxml里添加:style='padding-top:{{navBarHeight}}px'
到现在，首页完全兼容了，但是子页面还没有导航栏，也没有返回按钮呀，我们来写一个导航栏的组件吧！
在miniponents文件下新建components文件用来存放组件，在components下新建components组件名称：Navigation,如下图：
代码我就不贴了，在我的项目里有，按照目录就能找到，我介绍小如何使用吧！
1、比如你在test2页面里用到了该组件，现在text2.json中添加：
"usingComponents": {
"navigation": "../../components/Navigation/Navigation"
}
2、test2.wxml里添加：
<navigation id='Navigation' show-icon='{{showIcon}}' title="关于我们" ></navigation>
3、test2.js里data里添加 showIcon：true
运行页面即可看到效果：
基本的介绍就到这里吧！
下图是我用小程序云开发的个人项目—我与三人行：：
项目地址：GitHub：小程序云开发-我与三人行如果您觉得还可以的话，那就statr下吧！！！！！
