微信小程序——自定义顶部菜单navigationBar方式（可详细了！）

前言：
开发中，设计师也是奇思妙想，把小程序顶部的默认菜单改成了自己觉得好看的样式，改了返回icon的样式，加了各种返回首页、收藏、什么鬼的按钮，甚至把胶囊按钮都给改了~~~，好吧，遵从设计师的审美，盘他（除了胶囊按钮）（本文字数较多，因为我把每一步都分的很细，都写出来了，望客官细品，仔细品）

要点概述：（助于童鞋们更好的理解）

1. 小程序默认的navigationBar是占据手机顶部区域的，小程序的页面内容page的显示区域是从navigationBar之下开始，如下图，红框圈出来的就是小程序默认的navigationBar区域，下边的灰色就是page的区域
   

2. 小程序默认的navigationBar样式是没有办法进行修改的，比如返回按键，标题样式，虽然无法修改但是是可以将默认的navigationBar进行隐藏，通过在app.json中的window属性中设置navigationStyle:“custom”，就可以将默认的navigationBar隐藏（解决方案中再详细解释）

3. 编写一个公用的顶部导航的组件，这个组件里就完全由咱们自己控制了，然后按照设计小姐姐的图进行布局和样式编写即可

4. 在页面中进行导航组件的引用，自定义的顶部导航就完成了

5. 刘海屏兼容调试，咱们自定义的顶部导航在有刘海屏的手机中是需要做一些特殊处理的，不然刘海区域就会遮挡住导航区域（解决方案中有有图有证据）

6. 没了~~~，完成了！

老套路，重要的解决方案来了↓

解决方案：

1. 通过上方的概述，咱们已经了解了小程序默认的navigationBar与page的区域，因为默认的navigationBar是无法修改的，需要咱们先要做的就是将小程序默认的navigationBar隐藏掉，通过在app.json中的window属性中设置navigationStyle:“custom”，window属性中只需要保留以下两个属性即可，navigationBarTextStyle是为了控制右侧胶囊按钮的颜色的，只能设置black/white两个可选值，如果不需要修改也可以不要navigationBarTextStyle（注意：navigationStyle只能在app.json中设置，并且是全局所有小程序页面都会生效，不能在单独页面中设置）

{
   
  "pages": [
    "pages/index/index",
    "pages/test/index"
  ],
  "window": {
   
    "navigationBarTextStyle": "black",
	"navigationStyle":"custom"
  },
  "sitemapLocation": "sitemap.json"