小程序动态tabBar菜单，根据条件渲染不同的tabBar

前言

这次的项目需求是用户存在两种身份，普通用户和师傅用户，那么要根据不同的身份展示不同的tabBar菜单，看了下官方文档，难度不大，但是由于我用的框架是Taro，所以实现起来很难，试了几次Api调不通就放弃了，转为JS大法写了，但是配置方面还是得按照小程序文档来。
做成效果：

师傅菜单

说明

此文是Taro版，非Taro框架，思路可供参考，毕竟JS是互通的。

1. 配置信息

• 在 app.json 中的 tabBar 项指定 custom 字段，同时其余 tabBar 相关配置也补充完整。

• 所有 tab 页的 json 里需声明 usingComponents 项，也可以在 app.json 全局开启。
  由于Taro没有单目录json，所以只配了第一条就生效了

  tabBar: {
      custom: true,
      list: [{
        'pagePath': 'pages/home/index',
        'text': '首页',
      }, ...]
    },

2. 添加 tabBar 代码文件

• 在代码根目录下添加入口文件:

  custom-tab-bar/index.js

此文件编写的组件会作为自定义的tabBar展示出来

主要步骤

1. custom-tab-bar/index.js里编写组件（此组件即是新的tabBar组件）
2. 比如用户端有4个菜单，师傅端有3个菜单，这里我做好了标识type区分身份

const nav = [{
      'url': '/pages/home/index',
      'type': 1,
      'text': '首页',
    }, {
      'url': '/pages/user1/index',
      'type': 1,
      'text': '用户菜单1'
    }, {
      'url': '/pages/user2/index',
      'type': 1,
      'text': '用户菜单2'
    }, {
      'url': '/pages/user3/index',
      'type': 1,
      'text': '用户菜单3'
    }, {
      'url': '/pages/masterhome/index',
      'type': 2,
      'text': '师傅首页'
    }, {
      'url': '/pages/master1/index',
      'type': 2,
      'text': '师傅菜单1'
    }, {
      'url': '/pages/master2/index',
      'type': 2,
      'text': '师傅菜单2'
    }]

3. 登录后拿到后端返回的身份信息，这里定义一个变量isMaster存储起来
4. 然后在 custom-tab-bar/index.js里拿到isMaster，根据isMaster处理得到navList来渲染需要对应的tabBar 列表

  const navList = isMaster ? nav.filter(item => item.type === 2) : data.filter(item => item.type === 1);

5. 当isMaster 为true 时，tabBar显示
   
6. 当isMaster 为false 时，tabBar显示