最近又开始写微信小程序了。前段时间的微信小程序是用美团的框架mpvue写的。原因也很简单，同事们对vue的语法更熟悉一点，不需要重新了解小程序的语法。并且mpvue可以使用store管理全局状态，这正好是小程序所没有的。不过这次使用了微信小程序的原生语言，所以要用小程序的方式去解决一些问题
写了几天小程序后，小程序已经有了一个基本的雏形。现在遇到了一个问题，就是，我需要一个自定义的顶部导航。之前用mpvue的时候也使用过自定义导航栏，但是基本上都是同事弄得，我直接捡了现成的，没有看怎么用。其次，自定义顶部导航应该也会涉及到组件复用，这刚好又是我的一个知识盲区。真的太兴奋了，一下子白捡两个知识点。 下面先来说一些自定义顶部导航栏吧：
使用自定义导航栏需要在 app.json 中做相关配置，配置也很简单： app.json 是对小程序的整体规范做配置的文件。window字段则是对全局的默认窗口表现的一些设置。 将 navigationStyle 属性设置为 custom。navigationStyle 设置导航栏样式，仅支持两个值，default 和custom。
{ "window":{ "navigationStyle": "custom" }, }设置navigationStyle为custom后，页面将去掉导航栏的位置。
到这里为止，自定义导航的设置已经做完了。下面我们开始自定义组件。 说到这里，小伙伴们可能已经蒙圈了，文章标题是要做组件复用，怎么现在扯到了自定义导航和自定义组件了呢。原因很简单，我们想要自定义导航，导航几乎在每个页面都会使用，所以肯定不能每个页面都写一遍，就需要将导航单独提出来当做一个组件，根据具体情况再不同的页面引用。所以这里面就包括了三个知识点：自定义组件、自定义导航、组件复用。
废话不多说，下面是自定义组件的方法：
pages目录同级，新建 components文件夹。因为后期可能会有很多个公共组件，所以我将导航组件的内容放到了nav文件夹下，下面是我的目录结构： 与page相同，.wxml是组件布局， .wxss是组件样式， .js是组件逻辑， .json用来声明当前文件是组件。
{ "component": true }
这里和vue定义组件的方式很像。 js文件最外层是 Component构造器，内部包含三部分内容： properties， 接受组件外部传入的参数 ；data， 组件内部自己使用的数据； methods ，定义组件内部的方法。
Component({ // 接受外部传入的参数 properties: { pageTitle: { type: String }, navH: { type: Number, default: 0 }, pageLength: { type: Number, default: 0 } }, // 组件内部的数据 data: {}, // 组件的方法 methods: { navBack () { wx.navigateBack() } } })到这里自定义组件就完成了。
上面介绍了怎么实现一个自定义组件，现在我们来看一下怎么使用自定义组件。
在需要引入自定义组件的页面json文件中注册要使用的自定义组件
// index.json { "usingComponents": { "custom-nav": "/components/nav/nav" }, }在布局文件中使用组件：
<view class="container"> <custom-nav pageTitle="{{pageTitle}}" navH="{{navH}}" pageLength="{{pageLength}}"></custom-nav> </view>js文件中定义需要的参数即可
//index.js //获取应用实例 const app = getApp() import request from '../../request/request' Page({ data: { navH: 0, pageTitle: '首页', pageLength: 0 }, onLoad: function () { this.setData({ navH: app.globalData.navHeight }) }, })本次分享到此结束，如有错误还请各位大佬不吝赐教！谢谢大家
感谢提供支持的大佬。 [1]: https://www.cnblogs.com/jiangbeixiaoqiao/p/10826291.html [2]:https://developers.weixin.qq.com/community/develop/doc/0006e8c236cd10d499b6217a351c09
