uni-app 实现根据用户不同角色显示不同的tabBar【完整图文流程】

一、需求

  UI框架uView可以使用vuex配置tabBar参数，从而实现tabBar属性根据权限动态进行配置。

二、uView 安装与配置

  官方推荐两种安装方式，一种是下载安装，一种是npm安装，官网安装文档。

2.1 HbuilderX导入插件

   链接请戳这

  下载成功后，把文件夹内的uview-ui文件复制到uniapp项目的根目录下。

2.2 配置

1. 在main.js中引入uview的js库

import uView from "uview-ui"
// 引用uView
Vue.use(uView)

2. 在项目根目录的uni.scss文件中引入 uView的全局SCSS主题文件

@import 'uview-ui/theme.scss';

3. 在app.vue文件的style样式中引入uView基础样式，style中需要写明 lang = scss

4.在根目录的page.json文件中配置easycom组件模式，官方文档
  意思是匹配ni_modules/uview-ui文件下components目录内的vue文件。

  uview的安装配置，以上。

三、实现步骤

3.1 创建tabBar对应的页面文件

3.2 配置page.json中的tabBar属性

  只需要pagePath属性即可，配置其他属性到时会先闪这里的tabBar设置，再闪自定义的tabBar。

3.3 创建自定义tabBar文件

  在根目录下创建untils文件夹，里面存放自定义的tabBar配置，要用自定义的tabBar就要覆盖原生的tabBar，所以需要创建一个自定义文件，需要注意的是文件的顺序就是tabBar显示的顺序。

3.4 配置Vuex

  在创建了上面的不同角色对应的tabBar对象数组后，我们要在Vuex中使用。目录结构如下：

3.4.1 tabBer.js

3.4.2 getters.js

3.4.3 getters.js

3.4.4 在mian.js中引入并挂载

3.4.5 把tabBar对象数组配置成组件

  我把通过vueX得到两份不同的tabBar对象数组配置成组件形式，在页面上直接引用就可以了。

3.4.6 页面使用

四、总结

  现在是每个页面都挂了一个tabbar，所以要自己实现点击跳转页面。
  需要参考的文档：
   【tabBar跳转】https://uniapp.dcloud.io/api/router.html#switchtab

  对你有帮助的话，请点个赞，有问题也可在评论区讨论。