微信小程序-自定义NavBar组件（1）

转载请注明出处：王亟亟的大牛之路

最近公司项目忙得不可开交，各种不可描述的事情，然后学习基本停机。这个周末没出去浪，就在家把之前王夫人给我设计的小程序做了做，然后一步步分享做的过程中遇到的问题和积累，希望大家爬坑过程中能帮到一些吧

---

组件化

组件化本身是一个可以讲的很大，也可以浓缩为

封装可复用的，模版组件

基于mvvm的微信小程序当然也支持这一特性，我们做项目的时候也可以把注入公用的header footer之类的封一封（其实工具类的组装也可以作为组件化的一种形式）

小程序的组件化挺有意思的基于Component，自行实现了一套比较深的实现（这篇不讲实现），第一次看感觉跟Page好，或者说是换汤不换药。但内部组件（页面）的生命周期，事件处理等有自己的特点，这个之后再写的时候再提吧

然后微信，本身的sample已经写清楚了一些要素，那我这边也就在这个基础上做发散，官方传送门如下：https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/

---

目录结构

这边贴一下代码结构

蓝色是自定义的组件(啊呀，好像没取components/nav这类名字)
红色是引用他的首页

设计图长这样

做的长这样（UI还没调，效果先实现吧，反正大家也就看个思路，长啥样无所谓了）

---

实现

功能来源是https://github.com/Tencent/weui-wxss组件库中提取出来的，我做的工作就是把本来Page页面改成Component，然后给大家理一理过程。

首先是提取功能代码在
dist/example/navbar目录下，有3个文件

我们先完全copy过来，然后添加一个navbar.json文件

navbar.json

{
  "component": true,
  "usingComponents": {}
}

如果有用到其他组件，那就定义一下，没有的话可以不管。
component要为true。（证明我是谁嘛，这个好理解）

---

因为设计图只需要2个tab页，所以把navbar.wxml文件进行了微调（没有重要步骤的我就不多做解释了）

<view class="page">
    <view class="page__bd">
        <view class="weui-tab">
            <view class="weui-navbar">
                <block wx:for="{
   {
   tabs}}" wx:key="*this">
                    <