背景
公司要求开发一个小程序，要求三种不同权限的人群都可以使用，使用时根据不同的权限，获取不同的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>
这一套是在小程序里有可以用的哦，亲测还不错！！
转载：https://blog.csdn.net/ysq0317/article/details/117031506
查看评论