微信小程序之组件复用

最近又开始写微信小程序了。前段时间的微信小程序是用美团的框架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用来声明当前文件是组件。

nav.json 声明这是一个组件：

{ "component": true }

nav.js 组件的逻辑部分

这里和vue定义组件的方式很像。
js文件最外层是 Component构造器，内部包含三部分内容： properties， 接受组件外部传入的参数 ；data， 组件内部自己使用的数据； methods ，定义组件内部的方法。

Component({
   
   
  // 接受外部传入的参数
  properties: {
   
   
    pageTitle: {
   
   
      type: String
    },
    navH: {
   
   
      type: Number,
      default: