微信小程序：自定义导航栏

看到有的微信小程序的页面左上角有了个“小房子”，可以返回首页，这是怎么做到的？其实这是微信开放的自定义的自定义导航栏来完成，但是最开始，对于一个页面很多的小程序，其实有点一言难尽，因为你自定义，你可能要所有页面都要添加一遍。

现在小程序可以自定义页面的json,你可以修改自定义某一个页面的导航栏（之前是只能在app.json里定义，而且导致的所有界面都没有导航栏，你要所有界面都要加一遍，即使采用组件的形式，也是一个体力劳动。）。

一下是大概步骤和截图，代码我在github上放着有什么问题可以提出来，可能光靠代码和截图不一定完全行得通，可能你要注意你的设置，或者一些基础的概念不清除导致的问题。

效果图：

注意点：
适配问题，注意一下刘海屏
标题，中间的title是要可以在页面自定义的，要不然你写一个组件，所有的页面title都是一个，要能在页面传值过去可以自定义

操作步骤
（1）组件
组件好处就是省事，尤其是这种公共部分很多地方都能用到，组件除了可以获取日期等公共函数操作，还可以像这个一样做一个部分，在页面展示出来。

a.定义组件，组件4个部分都要注意
js：可以看一下他的结构和page貌似很像，但是差距还是有的，他的函数没有page那些事件函数。

json：和page对比，第一个属性很重要的，他是一个组件的生效与否的标志。

wxml：这个可是你展示给页面上的部分，相当于在页面上把这个贴上去

wxss：有wxml自然会有wxss的

（2）引入组件展示
a 页面json配置
引入组件首先在引入组件的页面进行定义，要不然引入不了。还有就是，添加自定义导航栏模式定义。图一引入组件，图二是自定义导航栏（默认得知是default，也就是官方样式）

b 页面引入

参考文章：（我这个是进阶版代码去我的github上看吧）
https://www.jianshu.com/p/7393c800ba09
github：
https://github.com/stubborn123/wxStudy/tree/master/navigate
我的公众号：我是坑货