微信小程序根据不同的权限展示不同的自定义tabbar

项目场景：

小程序中我们可能需要根据不同的权限展示不同的tabbar，比如你是会员的话，那么你的底部就展示一个VIP的tabbar，如果是普通用户的话就把这个VIP的tabbar隐藏掉。

---

解决方案：

tabar自定义官方链接

首先我们先实现一个自定义的tabbar：

1. 在 app.json 中的 tabBar 项指定 custom 字段，同时其余 tabBar 相关配置也补充完整
2. 创建custom-tab-bar，在根目录创建，如图(我用的是vant的组件，vant样式的使用vant官方链接 就不用去写样式了，也可以去那官方文档中的片段链接)：
   
   3.在app.json中把你所有项都加上（最多只能加5个，多了有就不行了），因为我们要通过getCurrentPages去获取当前的路径
   
   4.在custom-tab-bar文件中.定义两套不同的tabar列表，在data中写了三个vipList、noVipList和list，默认展示的是list，如果app.globalData.userRank == 0 的时候是noVipList，如果app.globalData.userRank == 1 的时候是vipList，注意的是：list个和noVipList是一样的，那我们在下面判断进行setData的时候不能使用this.setData({list:this.data.list})，这样是不会改变的，你必须重写一个noVipList

// custom-tab-bar中的js
const app = getApp();
Component({
  data: {
    active:'0',
    list: [{
      url:'/pages/index/index',
      text: "首页",
      name:0,
      icon:'home-o'
    }, {
      url:'/pages/logs/logs',
      text: "日志",
      name:1,
      icon:'search'
    }],
    vipList: [{
      url:'/pages/index/index',
      text: "首页",
      name:0,
      icon:'home-o'
    }, {
      url:'/pages/logs/logs',
      text: "日志",
      name:1,
      icon:'search'
    },{
      url:'/pages/vip/vip',
      text: "VIP",
      name:2,
      icon:'friends-o'
    }],
    noVipList: [{
      url:'/pages/index/index',
      text: "首页",
      name:0,
      icon:'home-o'
    }, {
      url:'/pages/logs/logs',
      text: "日志",
      name:1,
      icon:'search'
    }]
  },
  attached() {
  },
  methods: {
    init() {
      const page = getCurrentPages().pop();
			this.setData({
				active: this.data.list.findIndex(item => item.url === `/${page.route}`)
			});
    },
    // 这是用了切换不同的权限的，做个判断切换不同的权限
    checkPermission() {
      if (app.globalData.userRank == 0) {
        console.log(app.globalData.userRank)
        this.setData({
					list: this.data.noVipList,
        })
      }
      if (app.globalData.userRank == 1) {
        console.log(app.globalData.userRank)
        this.setData({
					list: this.data.vipList,
        })
			}
    },
    onChange(event) {
      console.log(event)
      this.setData({ active: event.detail });
      wx.switchTab({
				url: this.data.list[event.detail].url
			});
    },
  }
})

5.在每个页面的文件夹中去调用init， this.getTabBar().init() 每个页面都要调用，切换权限就是下面的那个onChange了

// 页面中的js
const app = getApp();
Page({
  data: {
    radio: 109,
    chepaihao:'',
   
  checked:false
  },
  onClick(event) {
    const { name } = event.currentTarget.dataset;
    console.log(name)
    this.setData({
      chepaihao: name,
    });
  }, 
  onChange({ detail }) {
  let _this = this
    if(detail) {
       app.globalData.userRank = 1
       console.log( app.globalData.userRank)
      _this.getTabBar().checkPermission()
    }else {
      app.globalData.userRank = 0
      _this.getTabBar().checkPermission()
    }

    this.setData({ checked: detail });
  },
  onShow() {
    console.log( this.getTabBar())
    this.getTabBar().init()
  }
});

总结：

1. 先设置自定义导航
2. 自定义几套你需要的List
3. 在全局定义一个标识来判断不同的权限展示
4. 在每个页面调用init方法，tabbar选择当前页面的active
5. 写个按钮切换权限，去切换全局的标识来切换不同的权限

项目git地址