【小程序】uview-ui(uni-app)+微信小程序根据权限动态的更改底部tabbar

背景

公司要求开发一个小程序，要求三种不同权限的人群都可以使用，使用时根据不同的权限，获取不同的tabbar，以及展示不同的内容。

思路

一开始考虑的是小程序本身的动态设置tabbar方法wx.setTabBarItem，之后百度发现，使用这个方法刷新切换时会短暂白屏，再之后才考虑了使用uview-ui的Tabbar底部导航栏组件。当然，主要功能是百度上寻找的其他人的代码，自己再润色了一番。

最终选择了uni-app的uview-ui（UI框架）+vuex来完成这个功能。其中，vuex主要是用来存储当前的tabbar内容的。

---

第一步

在utils文件夹下新建一个tabbar.js，来存储不同权限下的底部导航数据。

let tab1 = [{
		text: "首页",
		pagePath: '/pages/index/index',
		iconPath: "/static/tabbar/index.png",
		selectedIconPath: "/static/tabbar/index_selected.png",

	},
	{
		text: "订单",
		pagePath: '/pages/order/order',
		iconPath: "/static/tabbar/order.png",
		selectedIconPath: "/static/tabbar/order_selected.png",
	},
	{
		text: "我的",
		pagePath: '/pages/mine/mine',
		iconPath: "/static/tabbar/mine.png",
		selectedIconPath: "/static/tabbar/mine_selected.png",
	}
]

let tab2 = [{
		text: "首页",
		pagePath: '/pages/index/index',
		iconPath: "/static/tabbar/index.png",
		selectedIconPath: "/static/tabbar/index_selected.png",
	},
	{
		text: "培训",
		pagePath: '/pages/train/train',
		iconPath: "/static/tabbar/train.png",
		selectedIconPath: "/static/tabbar/train_selected.png",
	},
	{
		text: "订单",
		pagePath: '/pages/order/order',
		iconPath: "/static/tabbar/order.png",
		selectedIconPath: "/static/tabbar/order_selected.png",
	},
	{
		text: "个人中心",
		pagePath: '/pages/mine/mine',
		iconPath: "/static/tabbar/mine.png",
		selectedIconPath: "/static/tabbar/mine_selected.png",
	}
]


export default {
	tab1,
	tab2
}

我这里有两种不同的权限，第二种权限比第一种权限多了一条。

第二步

在page.json文件里，把tabbar里的几个页面去重放进去。

"tabBar": {
		"list": [{
				"pagePath": "pages/index/index"
			},
			{
				"pagePath": "pages/mine/mine"
			},
			{
				"pagePath": "pages/order/order"
			},
			{
				"pagePath": "pages/train/train"
			}
		]
	}

只是单纯的写个路径，什么都不要添加。

第三步

uniapp是可以直接使用vuex的，所以，直接在项目的根目录下新建一个store文件夹，存储相关数据。

tabBer.js

import tabBar from '../../utils/tabbar.js'  //引入tabbar文件。

let role = uni.getStorageSync('role')//把登录后的

const tabBer = {
	state: {
		role:'',
		tabBarList: [],
	},
	mutations: {
		setRole(state,role){
			state.role = role;
			//先得到权限，再根据权限设置tabbarList
			state.tabBarList = tabBar[role];
		}
	},
}

export default tabBer

getters.js

const getters = {
	tabBarList: state => state.tabBer.tabBarList,
	role:state=>state.tabBer.role
}
export default getters

index.js

import Vue from 'vue';
import Vuex from 'vuex';
import tabBer from './modules/tabBer.js'
import getters from './getters.js'

Vue.use(Vuex);

const store = new Vuex.Store({
	modules:{
		tabBer
	},
	getters
})
export default store;

在入口文件main.js中使用

import Vue from 'vue'
import App from './App'
import uView from "uview-ui";
import store from './store/index'

Vue.use(uView);

Vue.config.productionTip = false
Vue.prototype.$store = store
App.mpType = 'app'

const app = new Vue({
    ...App,
	store
})
app.$mount()

存储至vuex大概就是这些了，然后就是登录获取权限，渲染在页面上。

渲染

在需要的页面上，使用tabBar组件。

<template>
	<view>
		<u-tabbar :list="tabBarList" :active-color="activeColor" :inactive-color="inactiveColor"
			:border-top="borderTop"></u-tabbar>
	</view>
</template>

<script>
	import {
		mapGetters
	} from 'vuex'
	export default {
		data() {
			return {
				borderTop: false,
				inactiveColor: '#909399',
				activeColor: '#FF5370'
			}
		},
		computed: {
			...mapGetters([
				'tabBarList',
				'role'
			])
		},
	}
</script>
<style lang="scss">
</style>

登录时，获取返回的权限，然后再调用setRole方法

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex';
	export default {
		data() {
			return {
				form:{},
				show: false,
			};
		},
		methods: {
			//登录
			login() {
				let form = this.form;
				uni.setStorageSync('role', form.type);//存入权限
				this.setRole(form.type);//设置tabbar
				uni.switchTab({
					url: '../index/index' //然后跳转到登录后的首页
				})
			}
		}

	}
</script>

这里要注意一下，vuex刷新后可能就没有数据了，所以需要在app.vue中在取出来一下。

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex';
	export default {
		onLaunch: function() {
			let role = uni.getStorageSync('role');
			if (role) {
				this.setRole(role);
				uni.showLoading({
					title:"自动登录中",
				})
				setTimeout(()=>{
					uni.hideLoading();
					wx.switchTab({
						url:"/pages/index/index"
					})
				},2000)
				
			}
		},
		onShow: function() {
		},
		onHide: function() {
		},
		methods: {
			...mapMutations(['setRole'])
		}
	}
</script>

这一套是在小程序里有可以用的哦，亲测还不错！！