介绍：
现在我们要满足的项目需求是根据登录用户角色的不同，tabBar的数量和内容显示不同，如下图
用户角色为管理员时：
用户角色为普通用户时：
登录用户的角色不同，因为权限不同所以tabBar的内容和数量也不同，而uniapp中tabBar本身的配置 uni.setTabBarItem(OBJECT) 只能够满足动态设置 tabBar 某一项的内容，没办法实现上图中的需求
这个时候我们就可以使用UI框架Uview来实现需求
一、下载配置uView组件库
二、配置自定义tabbar属性
三、配置vuex
四、页面引入组件使用
一、uVIew的下载及配置
大家可以直接去官网根据官方指导下载配置 uView
官方推荐两种安装方式，一种是下载安装，一种是npm安装，我个人选择了第一种，现在讲下我个人的配置过程（可以直接看官网的讲的很详细）
下载
打开uView的下载地址 https://ext.dcloud.net.cn/plugin?id=1593 选择右侧的用HbuilderX导入插件
导入时会新建一个文件夹用来存放uView文件确认好路径后直接点击创建就可以
下载成功后，找到新建的文件夹，下载好的uView文件就在里面，把该文件夹内的uview-ui文件复制到uniapp项目的根目录下
配置
配置项官方写的很详细， 配置
1、确认项目中已经安装好scss插件，在配置uview的css时需要用到
2、在main.js中引入uview的js库
import uView from 'uview-ui'
Vue.use(uView)
3、在项目根目录的uni.scss文件中引入 uView的全局SCSS主题文件，在uni.scss文件的最开始引入就可以，方便查找
4、在app.vue文件的style样式中引入uView基础样式，style中需要写明 lang = scss ，我之前就已经配置好了scss插件，所以直接用就可以，没有安装scss插件的自行安装
5、配置easycom组件模式
在根目录的page.json文件中配置，意思是 // 匹配uview-ui文件下components目录内的vue文件，具体解释可以查看官网 easycom
"easycom": {
"^u-(.*)": "@/uview-ui/components/u-$1/u-$1.vue"
}
至此，uview的安装配置结束
二、配置tabBar
1、创建tabBar页面
2、在page.json配置tabBar页面路径
在page.json中配置tabBar页面路径，只需要配置各个页面的路径就可以，不用配置其他项
3、创建自定义tabBar文件
在项目根目录下创建untils文件夹，文件夹内创建tabBer.js文件
这个js文件是我们自定义的tabBar属性文件，用来覆盖原来的配置
两个角色有相同的页面，也要在各自的数组中配置，
数组中的顺序就是tabBar显示的顺序，对顺序有要求的请注意此项
三、配置vuex
uniapp中已经集成了vuex，我们直接用就可以，
我个人对vuex并不太了解，在项目中只是能单纯的运用，getters.js 和index.js完全是套我个人理解的模板来做
1、根目录下创建store文件夹及其他文件
2、配置tabber.js文件
在tabBer.js文件中对登录用户进行角色判断
页面中调用mutations的方法
页面中：登录成功后把需要判断的用户信息保存并调取mutations中的方法并传值
3、getters
4、index.js
5、mian.js引入store
在main.js中引入store文件
6、APP.vue文件中解决vuex刷新数据失效问题
四、引入组件
在每个tabBar的页面引入uView中的tabBar组件，父传子传值，一些固定的值可以不传值直接在组件中修改
这是tabbar组件，uview-ui/components/u-tabbar.vue，props中的值如果不需要动态变化可以直接设定初始值，父组件不再传值，
如下图，直接设置组件中间的加号按钮为false，前面一系列关于midBtn的代码都可以删除
结束！！！
撒花！！！
我其实也有努力呀
