从零开发一个微信小程序（一）——自定义tabbar

前言

由于我的一位亲戚血糖偏高，为了方便他管理血糖，就做了这么一个管理血糖的小程序；
项目GitHub地址：传送门
小程序在微信小程序中搜索血糖监测即可。

圆规正传，今天我们讲一下如何在小程序中自定义tabbar；

第一步：在项目根目录下新建一个名为custom-tab-bar的文件夹

注意，文件夹的名称必须是custom-tab-bar，不要问我为什么，微信小程序官方的约定就是这样。

如果没有使用云函数的话，就是在根目录下新建这个文件夹；如果使用了云函数就是在miniprogram这个文件夹下新建。

项目的目录一定不能弄错，笔者一开始就没有注意，把这个文件夹放到了components文件夹下，导致自定义tabbar一直出不来。

第二步：在该文件夹下新建4个文件，补充对应内容；

因为我这里使用了Vant，所以以下内容都是基于使用了vant的场景。

• 在index.json中引入vant相关组件，代码如下：

{
  "component": true,
  "usingComponents": {
    "van-tabbar": "@vant/weapp/tabbar/index",
    "van-tabbar-item": "@vant/weapp/tabbar-item/index"
  }
}

• 在index.wxml中编写如下代码：

<van-tabbar active="{{ active }}" bind:change="onChange">
  <van-tabbar-item wx:for="{{ list }}" wx:key="index" icon="{{ item.icon }}">{{
    item.text
    }}</van-tabbar-item>
</van-tabbar>

• 在index.js中编写如下业务逻辑

Component({
  data: {
    active: 2,
    list: [{
        icon: 'records',
        text: '控糖小贴士',
        url: '/pages/knowledge/index'
      },
      {
        icon: 'coupon-o',
        text: '列表',
        url: '/pages/list/index'
      },
      {
        icon: 'add-o',
        text: '记录',
        url: '/pages/add/index'
      },
      {
        icon: 'chart-trending-o',
        text: '图表',
        url: '/pages/chart/index'
      },
      {
        icon: 'fire-o',
        text: '推荐食谱',
        url: '/pages/cookbook/index'
      }
    ]
  },

  methods: {
    onChange(event) {
      this.setData({
        active: event.detail
      });
      wx.switchTab({
        url: this.data.list[event.detail].url
      });
    },

    init() {
      const page = getCurrentPages().pop();
      this.setData({
        active: this.data.list.findIndex(item => item.url === `/${page.route}`)
      });
    }
  }
});

第三步：修改项目的app.json文件，增加自定义tabbar的配置；

配置如下：

"tabBar": {
    "custom": true,
    "list": [{
        "pagePath": "pages/knowledge/index",
        "text": "控糖小贴士"
      },
      {
        "pagePath": "pages/list/index",
        "text": "列表"
      },
      {
        "pagePath": "pages/add/index",
        "text": "记录"
      },
      {
        "pagePath": "pages/chart/index",
        "text": "图表"
      },
      {
        "pagePath": "pages/cookbook/index",
        "text": "推荐食谱"
      }
    ]
  },

最主要的是custome为true这个属性，否则不会展示自定义的tabbar；
list中将几个pagePath都得写好，不然将来wx.switchTab时会报错；有几个页面，及页面的pagePath需要根据实际的需求来写。

第四步：修改每个tab的页面index.js文件中的onShow方法

在onShow方法中增加如下代码：

this.getTabBar().init();

如果不加的话会导致切换tab的时候页面闪烁。

最后，大功告成

最终的效果如图：

一个微信小程序自定义tabbar就此完成。