uniapp根据登录用户的角色动态的改变tabBar的数量和内容

此文章借鉴于https://blog.csdn.net/fuyuumiai/article/details/109746357，在此基础上修改小部分内容，适用于我这种uniapp小白

介绍：

现在我们要满足的项目需求是根据登录用户角色的不同，tabBar的数量和内容显示不同，如下图

用户角色为管理员时：

用户角色为普通用户时：

登录用户的角色不同，因为权限不同所以tabBar的内容和数量也不同，而uniapp中tabBar本身的配置   uni.setTabBarItem(OBJECT)   只能够满足动态设置 tabBar 某一项的内容，没办法实现上图中的需求

这个时候我们就可以使用UI框架Uview来实现需求

一、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属性文件，用来覆盖原来的配置

　　根据uniapp官网中tabBar的属性配置即可，每个数组代表一种角色要显示的tabBar列表，比如我有管理员和普通用户两种角色，就配置两个数组，每个数组里面配置各自tabBar的页面属性，就算两个角色有相同的页面，也要在各自的数组中配置，

　　数组中的顺序就是tabBar显示的顺序，对顺序有要求的请注意此项

三、配置vuex

　　uniapp中已经集成了vuex，我们直接用就可以，

　　我个人对vuex并不太了解，在项目中只是能单纯的运用，getters.js 和index.js完全是套我个人理解的模板来做

1、根目录下创建store文件夹及其他文件

2、配置tabber.js文件

　　在tabBer.js文件中对登录用户进行角色判断

　　midBtn是为了判断uview中tabBar组件的加号按钮是否显示，当你的项目需求为确认显示或确认不显示时，直接在uview/components/u-tabbar中找到该项修改属性为true或者false即可，不用再在tabBer.js文件中判断，我的项目不需要，所以我会把这一项直接删掉

3、getters

当tabBer.js文件中的midBtn去掉不写时，本文件中的对应项也直接去掉

4、index.js

5、mian.js引入store

在main.js中引入store文件

四、引入组件

　　在每个tabBar的页面引入uView中的tabBar组件，父传子传值，一些固定的值可以不传值直接在组件中修改

这是tabbar组件，uview-ui/components/u-tabbar.vue，props中的值如果不需要动态变化可以直接设定初始值，父组件不再传值，

如下图，直接设置组件中间的加号按钮为false，前面一系列关于midBtn的代码都可以删除

结束！！！

撒花！！！