uni-app 微信小程序根据角色动态的更改底部tabbar

文章目录

1. 需求背景
- 1.1 源码下载
2. 问题前提及思路
3. 开始撸
- 3.1 设置 `tabbar.js` 配置不同角色不同的菜单
- 3.2 设置 `page.json`
- 3.3 vue 配置
- 3.4 tabBar组件代码
- 3.5 setRole方法

1. 需求背景

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

登录页面分为 用户登录 及 管理员登录

1.2 用户登录和管理员登录的 tabbar 根据账号角色进行对应展示

1.1 源码下载

【源码】uni-app 微信小程序根据角色动态的更改底部tabbar

2. 问题前提及思路

uniapp 本身的动态设置tabbar方法 uni.setTabBarItem(OBJECT)，但是使用这个方法刷新切换时会短暂白屏以及uni.setTabBarItem只能满足动态设置tabbar一项的内容，无法实现多项的需求。所有综合考虑决定还是使用uview-ui的Tabbar底部导航栏组件。

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

3. 开始撸

3.1 设置 `tabbar.js` 配置不同角色不同的菜单

在utils文件夹下新建一个tabbar.js，来存储不同权限下的底部导航数据。我这里有两种不同的权限，第二种权限比第一种权限多了两项菜单。

// 普通用户tabbar
let tab1 = [{"pagePath": "/pages/loginLogRecord/index","text": "登录记录","iconPath": "/static/icon_bx.png","selectedIconPath": "/static/icon_bx_hover.png"},{"pagePath": "/pages/accessRecord/index","text": "存取记录","iconPath": "/static/icon_adress.png","selectedIconPath": "/static/icon_adress_hover.png"},{"pagePath": "/pages/person/index","text": "我的","iconPath": "/static/icon_user.png","selectedIconPath": "/static/icon_user_hover.png"}
]
// 管理员用户tabbar
let tab2 = [{"pagePath": "/pages/loginLogRecord/index","text": "登录记录","iconPath": "/static/icon_bx.png","selectedIconPath": "/static/icon_bx_hover.png"},{"pagePath": "/pages/accessRecord/index","text": "存取记录","iconPath": "/static/icon_adress.png","selectedIconPath": "/static/icon_adress_hover.png"},{"pagePath": "/pages/authorizationList/index","text": "授权名单","iconPath": "/static/authorization.png","selectedIconPath": "/static/authorization_hover.png"},{"pagePath": "/pages/inventory/index","text": "盘点","iconPath": "/static/inventory.png","selectedIconPath": "/static/inventory_hover.png"},{"pagePath": "/pages/person/index","text": "我的","iconPath": "/static/icon_user.png","selectedIconPath": "/static/icon_user_hover.png"}
]
export default [tab1,tab2
]

3.2 设置 `page.json`

在page.json文件里，把tabbar里的几个页面去重放进去。只是单纯的写个路径，什么都不要添加。test，iconPath，selectedIconPath 字段全部删掉这里不需要配置。

"tabBar": {"color": "#333333","selectedColor": "#328CFA","backgroundColor": "#FFFFFF","list": [{"pagePath": "pages/loginLogRecord/index"},{"pagePath": "pages/accessRecord/index"},{"pagePath": "pages/authorizationList/index"},{"pagePath": "pages/inventory/index"},{"pagePath": "pages/person/index"}]
}

3.3 vue 配置

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

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
import tabBar from '@/utils/tabbar.js'
const store = new Vuex.Store({state: {wx_token: '',tabBarList: [],roleId: 0, //0 普通员工，1管理员},mutations: {// 设置wx_tokensetWxtoken(state, data) {state.wx_token = data;uni.setStorageSync('wx_token',data)},// 设置用户角色IDsetRoleId(state, data) {state.roleId = data;uni.setStorageSync('roleId',data)state.tabBarList = tabBar[data];uni.setStorageSync('tabBarList',tabBar[data])},},
})
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()

3.4 tabBar组件代码

<template><view><u-tabbar :list="tabBarList" :active-color="activeColor" :inactive-color="inactiveColor"  :height="84":border-top="borderTop"></u-tabbar></view>
</template>
<script>import store from '@/store'export default {props:{tabBarList:{type:Array,default:uni.getStorageSync('tabBarList')}},data() {return {borderTop: true,inactiveColor: '#909399',activeColor: '#328CFA',}},}
</script>

3.5 setRole方法

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

<script>import { mapMutations } from 'vuex';export default {data() {return {roleId:0,};},methods: {methods: {...mapMutations(['setRoleId']),},//登录login() {this.setRoleId(this.roleId)// 0或者1uni.switchTab({url: '../index/index' //然后跳转到登录后的首页})}}}
</script>

uni-app 微信小程序根据角色动态的更改底部tabbar相关推荐

微信小程序修改数组中的元素_微信小程序——this.setData()动态修改数组中的某一值...
微信小程序--this.setData()动态修改数组中的某一值S8v编程技术_踩坑日志_进阶指南_无知人生大家是不是都觉得微信小程序的开发方式和 vue react 这种框架的开发方式很像?S8v ...
uni开发微信小程序解决全局分享分销问题
uni开发微信小程序解决全局分享分销问题 1. 需求 1.小程序内每个页面都要打开胶囊分享按钮并实现分销 2.分享功能应该是在用户登录之后才予以打开 3.不想做在每个页面都写分享钩子的傻逼操作 2.实 ...
微信小程序中使用动态echarts
微信小程序中使用动态echarts,套值可用 1.先在微信开发者工具中创建一个项目 2. 在echarts-for-weixin中下载项目解压后打开,把ec-canvas文件夹复制到项目pages同 ...
微信小程序：wx-charts动态绘制折线图
微信小程序:wx-charts动态绘制折线图 wx-charts是基于 Canvas的微信小程序主流图表工具,体积小易操作,支持多种图表的绘制,这里主要就动态绘制折线图做出详解,所谓动态,指的是表格的 ...
【微信小程序】创建动态组件和引用的方法
实战内容:创建微信小程序动态组件并在其他页面中引用该组件欢迎关注收藏订阅专栏!!! 文章目录一.今日实战目标二.实战步骤 1.创建动态组件 2. 局部引用组件 3. 全局引用组件三.注意事项 ...
uniapp之APP/微信小程序/公众号支付
涉及到微信支付的都需要从后端接口获取支付配置信息: await this.$http({apiName:"wxPayConfig",type:"POST",da ...
小程序如何跳转至同服务器app,微信小程序如何跳转到APP?
随着经济的快速发展和技术的不断创新,智能手机.iPad和平板电脑的普及促进了移动互联网应用和服务(APP)的快速发展.自2008年7月App Store 应用商店推出以来,大约有55万应用程序在货架 ...
微信小程序——不同角色的导航栏显示不同
文章目录问题描述解决方法代码实现底部导航栏排查员存在的问题问题描述微信小程序的原生底部导航栏限制了数量(3-5个)且不能根据你的不用用户进行动态的底部导航栏变化,无法适应多种用户从 ...
uni开发微信小程序openDocument:fail filetype not supported
官方文档上显示:微信小程序非必填,于是我没填,然后就一直报错... 一直没找到原因,直到看了wx的是需要加上一个fileType. 加上就可以了,一步步的排错: uni.downloadFile({u ...

uni-app 微信小程序根据角色动态的更改底部tabbar

文章目录

1. 需求背景

1.1 源码下载

2. 问题前提及思路

3. 开始撸

3.1 设置 `tabbar.js` 配置不同角色不同的菜单

3.2 设置 `page.json`

3.3 vue 配置

3.4 tabBar组件代码

3.5 setRole方法

uni-app 微信小程序根据角色动态的更改底部tabbar相关推荐

最新文章

热门文章

uni-app 微信小程序根据角色动态的更改底部tabbar

文章目录

1. 需求背景

1.1 源码下载

2. 问题前提及思路

3. 开始撸

3.1 设置 tabbar.js 配置不同角色不同的菜单

3.2 设置 page.json

3.3 vue 配置

3.4 tabBar组件代码

3.5 setRole方法

uni-app 微信小程序根据角色动态的更改底部tabbar相关推荐

最新文章

热门文章

3.1 设置 `tabbar.js` 配置不同角色不同的菜单

3.2 设置 `page.json`