微信小程序开发——自定义tabBar结合app.json配置做出不用自己调机型适配的底部导航菜单

前言——微信小程序菜单栏的一些思考：

对于底部菜单，常用的有两种方法：

1. 默认菜单：优势是不用自己调机型适配，尤其是ios系统底部保留安全区域，缺点是无法更大布局样式，不太灵活；

2. 自定义组件：优势是可以自由的发挥，想要什么样的展示自己去写样式，缺点是需要自己适配机型；

当然，如果只是适配机型的话，菜单栏毕竟只是少数几个页面展示，也不算太麻烦。

但是，如果遇到复杂的页面，自定义菜单的话可能就要带来额外的计算了，而且还不一定完美适配每个机型。

所以，最好的就是使用小程序框架的菜单栏外壳自定义tabBar，这样就兼具机型适配+个性展示了。

自定义tabBar的详细步骤:

1. app.json配置如下：

    "tabBar": {
        "color": "#000000",
        "selectedColor": "#E35046",
        "custom": true,
        "list": [{
                "iconPath": "imgs/nav_logo.png",
                "selectedIconPath": "imgs/nav_logo_on.png",
                "pagePath": "pages/index/index",
                "text": "首页"
            },
            {
                "iconPath": "imgs/nav_cate.png",
                "selectedIconPath": "imgs/nav_cate_on.png",
                "pagePath": "pages/category/index",
                "text": "分类"
            },
            {
                "iconPath": "imgs/nav_cart.png",
                "selectedIconPath": "imgs/nav_cart_on.png",
                "pagePath": "pages/shopping_cart/index",
                "text": "购物车"
            },
            {
                "iconPath": "imgs/nav_my.png",
                "selectedIconPath": "imgs/nav_my_on.png",
                "pagePath": "pages/my/index",
                "text": "我的"
            }
        ]
    }

需要注意的是：

1）必须配置  "custom": true 才能使用自定义tabBar的样式渲染；

2）list项必须完整配置，尽管后边自定义tabBar中还是要以自定义组件的形式去写一遍；

2. 编写tabBar代码文件：

1）创建tabBar组件：

在代码根目录下创建 custom-tab-bar 目录，然后新建component，明明为index即可。

2）编写tabBar代码：

用自定义组件方式编写即可，如果有现成的直接复制过来改下图标及页面路径即可，毕竟跟components里边的自定义组件层级又不一样了。

示例代码如下：

<view class="tab_bar">
    <view class="tab_bar_item">
        <view wx:for="{{navList}}" wx:key="index" class="tab_item" hover-class="none" bindtap="changeNav" data-index="{{index}}">
            <image class="tab_icon {{index==0?'home':''}}" src="../imgs/nav_{{item.ico}}{{active==index?'_on':''}}.png" />
            <view wx:if="{{item.name}}" class="view {{active==index?'c_red':''}}">{{item.name}}</view>
        </view>
    </view>
</view>

Component({/**
     * 组件的初始数据
     */
    data: {
        active: 0,
        navList: [{
            ico: "logo",
            name: '',
            url: "index"
        }, {
            ico: "cate",
            name: '分类',
            url: "category"
        }, {
            ico: "cart",
            name: "购物车",
            url: "shopping_cart"
        }, {
            ico: "my",
            name: "我的",
            url: "my"
        }]
    },
    /**
     * 组件的方法列表
     */
    methods: {
        changeNav(e) {
            let index = wx.params(e).index
            if (this.data.active == index) return;
            if (index >= 0) {
                this.setData({
                    active: index
                })
                let url = this.data.navList[index].url
                wx.switchTab({
                    url: '../' + url + '/index',
                })
            }
        }
    }
})

也可以看下官方示例代码在开发者工具中预览效果。

3. 实现tab页选中态：

需要在当前页面的onShow生命周期中，通过getTabBar接口获取组件实例，并调用setData更新选中态，这样直接访问tab页面的时候就会有选中态了。示例代码如下：

    onShow() {
        const tabBar = this.getTabBar()
        tabBar.setData({
            active: 0
        })
    },

其中 active 为自定义组件中tab页的索引，每个tab页面都需要有这段代码，active的值也是不同的。

注意事项：

1. 经验证，以上三个步骤缺一不可，步骤1中的 list 不配会报错（最少2项），而且所有tab页面都要配置。如app.json中没配置某个页面，即使自定义tabBar中写了也无法切换到这个页面的；

2. 步骤三页一定要配，不然页面切换了，tab选中状态是不会更新的。