微信小程序根据权限动态生成对应权限的tab-bar

关于配置自定义tab-bar的方法可以参考微信官方文档

如题：最近公司在做微信小程序，遇到了不同权限用户有不同权限的需求，简单的自定义tab-bar已无法满足需要了。自己在网上搜了很多关于动态渲染对应tab-bar的案例，有的可以实现显示对应权限tab-bar，但是切换点击就会有选中样式闪烁和不对应的问题。找了很久才找到，也非常感谢那位大佬教程，让自己也有思路和想法，非常感谢哇！

废话不说了，直接上代码吧

在登录成功的时候把权限标识存入app.js的全局数据（globalData）中，方便其他界面和组件读取，提前在app.js的globalData中定义好对应权限的tabbar数组。

在custom-tab-bar（自定义组件）组件中赋值给对应的list

  attached() {
    let that = this
    that.setData({
      list: app.globalData.tabList
    })
    getApp().watch(that.watchBack.bind(that)) // 监听并回调
  },
  methods: {
    watchBack(list) {
       this.setData({
        list: list
      })
    },
    switchTab(e) {
      const data = e.currentTarget.dataset;
      const url = data.path;
      console.log(data, this.data.list);
      console.log(e.currentTarget.dataset.index);
      wx.switchTab({
        url:url
      })
    }
  }

请注意：这里很容易出问题： 默认是a权限，而登录拥有b权限的后，tabbar还是原来默认权限a，而不是切换后的tabbar，所以app.global DATa.tabList还是默认值，因此要对全局的globalData的tabList数据进行监听才行。

注意：在监听的时候 getapp().watch(that.watchBack.bind(that))需要注意

// 如果是getApp().watch(that.watchBack)
// 那么在watchBack回调函数中执行this.setData 这个this指向的是undefined，因此需要改变this指向！
getApp().watch(that.watchBack.bind(that))
 // 这里试验用call和apply无法改变this，原因后面来讲

在app.js中定义好watch监听方法

// app.js中使用Object.defineProperty监听 自定义watch函数
watch:function (method) {
    var obj = this.globalData;
    var temp = obj.tabList;
    Object.defineProperty(obj,"tabList", {
      configurable: true,
      enumerable: true,
      set: (value) => {
        temp = value
        method(value); // 这里回调传值
      },
      get:function(){。
        return temp
      }
    })
  },

这里就可以正常获取到tabList的值并且赋值，这里夹杂着Object.defineProperty，我搞的也不太清晰，反正正大改搞懂。所以说写代码思路真的很重要~~~~

经过实际操作后测试发现这种方式有个很坑的问题，ios在加载tab-bar的时候，如果初始化时默认值为两个tab，动态生成三个，ios会采用初始化的值，应该是用的缓存中的初始值，后续赋值就无效。

改进：
将赋值放到页面上操作，不在组件或者app.js中操作tabList的值。

可以在index组件（首页）onSHow方法中去判断，只需要在首页中设置一次就可以了，不用每个tabbar界面去设置

onShow() {
	//app.globalData.tabList2 为新值 ，app.globalData.tabList为初始化的值，判断后根据实际情况赋值。
	 this.getTabBar().setData({
          list: app.globalData.tabList2,
        })
}

或者这样去设置

if(app.globalData.role==0){
        this.getTabBar().setData({
        list:app.globalData.tabList1,//这是权限1的tabbar
})
}else{
            this.getTabBar().setData({
        list:app.globalData.tabList2,//这是权限2的tabbar
})
}

到这里会发现可以在登录后去动态更新tabbar了，是不是很神奇。先别急着开心，你会发现切换的时候发现选中的icon和样式没有切换过来，解决问题可以这样来：

在对应的界面去设置选中，这里如index（首页）的onShow方法中

onShow(){
       this.getTabBar().setData({

            selectedindex:0  //注意 tabbar界面从 0 1 2 3 ... 在每个对应组件onShow中设置对应的选中数组
})
}

这样就搞定了权限动态调整tabbar的需求了。

参考连接：微信小程序动态设置tab-bar，解决自定义tabBar选中时的状态变换：通过 getTabBar 接口获取组件实例