介紹：
現在我們要滿足的項目需求是根據登錄用戶角色的不同，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屬性文件，用來覆蓋原來的配置
根據uniapp官網中tabBar的屬性配置即可，每個數組代表一種角色要顯示的tabBar列表，比如我有管理員和普通用戶兩種角色，就配置兩個數組，每個數組里面配置各自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的代碼都可以刪除
有意見或者問題可以提，請不要批評我，因為我不接受！！！
結束！！！
撒花！！！