使用uView根据权限动态配置uni-app中的tabBar


前言

在构建uni-app项目的时候,发现本身自带的tabBar属性无法很好的做到根据权限动态进行配置,好巧不巧,我发现了我使用的UI框架uView可以使用vuex配置tabBar参数,于是心生一计,最终实验过后可行,于是便将其记录下来,供大家参考。


一、uView是什么?

uView是uni-app生态专用的UI框架,是一个开源、免费的优秀框架。

二、安装与配置

官方文档讲的很详细,所以这里就直接引用:安装与配置

三、使用步骤

在完成第二步,并成功引入后,进行如下步骤:

1、创建tabBar对应的页面文件

创建页面

2、配置page.json中的tabBar属性

需要注意的是,这里仅需配置tabBar中list属性中各页面的路径,如下图所示:
page.json中tabBer配置

有些看过官方文档的朋友肯定就会问了,马老师发生了甚莫事?为甚么和官方文档的有出入?
如图
因为我在实测过后发现加/是无效的,在去掉/后反而正常了,如果有知道的朋友希望能指导一下~

3、创建自定义tabBar文件

由于我们要使用自定义的tabBar覆盖原生的tabBar,所以需要创建一个自定义文件,一个对象对应tabBar按钮的配置,这里列出单个对象的所有字段属性:

let list = [
	{
		// 非凸起按钮未激活的图标,可以是uView内置图标名或自定义扩展图标库的图标
		// 或者png图标的【绝对路径】,建议尺寸为80px * 80px
		// 如果是中间凸起的按钮,只能使用图片,且建议为120px * 120px的png图片
		iconPath: "home",
		// 激活(选中)的图标,同上
		selectedIconPath: "home-fill",
		// 显示的提示文字
		text: '首页',
		// 红色角标显示的数字,如果需要移除角标,配置此参数为0即可
		count: 2,
		// 如果配置此值为true,那么角标将会以红点的形式显示
		isDot: true,
		// 如果使用自定义扩展的图标库字体,需配置此值为true
		// 自定义字体图标库教程:https://www.uviewui.com/guide/customIcon.html
		customIcon: false,
		// 如果是凸起按钮项,需配置此值为true
		midButton: false,
		// 点击某一个item时,跳转的路径,此路径必须是pagees.json中tabBar字段中定义的路径
		pagePath: '', // 1.5.6新增,路径需要以"/"开头
	}
]

示例:

const stuList = [
	// 首页
	{
		// 未点击图标
		iconPath: "home",
		// 点击后图标
		selectedIconPath: "home-fill",
		// 显示文字
		text: '首页',
		// 是否显示红点
		isDot: true,
		// 是否使用自定义图标
		customIcon: false,
		// 页面路径
		pagePath: "/pages/home/index"
	}
	// 省略
]

这里可以创建两个甚至多个角色对应的tabBar对象数组,需要注意的是文件的顺序就是tabBar显示的顺序,这里我创建了两个tabBar对象数组,如下:
tabBar对象数组
如果还有疑问,可以参考官网文档:Tabbar

4、配置Vuex

在创建了上面的不同角色对应的tabBar对象数组后,我们要在Vuex中使用,因为uni-app自动集成了Vuex,所以直接引用就好了,由于我将其分模块处理了,这里列出结构:
目录结构
我是在tabBar.js内做的逻辑判断:

import tabBer from '../../util/tabBer'

// tabBar文件为我们创建的tabBer对象数组

// 判断用户tabBer类别
// 0 冻结
// 1 普通用户
// 2 教师
// 3 管理员

// 逻辑判断处理
let type = uni.getStorageSync('user_type')  >= 2 ? 'tchList' : 'stuList'

// midBtn 为设置tabBer中间的凸起,false为不凸起
const state = {
	list: tabBer[type],
	midBtn: type === 'stuList' ? false : true
}


export default {
	namespaced: true,
	state
}

getters.js

const getters = {
	tabBerList: state => state.tabBer.list,
	midBtn: state => state.tabBer.midBtn
}

export default getters

index.js

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

Vue.use(Vuex)

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

export default store

还需要在mian.js中引入并挂载:
main.js

5、使用

在创建上面的所有文件之后,我们就可以通过vueX得到两份不同的tabBar对象数组了,接下来我们在每个tabBar对应页面引入,如下:

<template>
	<view class="content">
		<view class="main-box">
			cart
		</view>
		<u-tabbar 
			:list="tabBerList"
			:mid-button="midBtn"
			: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: '#5098FF'
			}
		},
		computed: {
			...mapGetters([
				'tabBerList',
				'midBtn'
			])
		}
	}
</script>

<style scoped lang="scss">

</style>

在每个tabBar都如上引入了tabBar对象数组后,我们就可以根据不同的角色展示不同的tabBar了,如下:
普通用户界面
普通用户界面
管理员界面
管理员界面

总结

感谢你能阅读我的这篇文章,其实实现这个从技术角度上不是很复杂,但是很少看见一个系统且完整的根据不同角色配置不同tabBar的文章,遂将自己的一些步骤和代码记录下来,希望能帮到大家,如果该篇文章中有错误或不足之处,忘指出,谢谢~~

<think>好的,我现在需要帮助用户解决在uni-app的page.json中配置tabBar使用uview-plus的图标up-home的问题。首先,我得回忆一下uni-apptabBar配置方法。通常,在page.json的tabBar项里,每个tab项需要指定iconPath和selectedIconPath,这两个路径通常是图片文件的相对路径。 但用户想直接使用uview-plus的图标,也就是UPHome组件,而不是本地图片。这里可能存在一个误区,因为uview-plus的图标是组件,不能在page.json里直接作为图片路径引用。因为page.json是静态配置文件,不支持动态组件或类名。 接下来,我需要确认uview-plus的图标使用方式。通常,像uView这样的UI库,图标可能需要通过组件或者字体类名来使用。例如,uview-plus可能使用字体图标,或者SVG组件。如果使用字体图标,可能需要通过类名来指定,但tabBar的iconPath只接受图片路径,所以这种方法可能行不通。 那有没有其他方法呢?比如,用户可能需要将uview-plus的图标转换为图片文件,然后引用这些图片的路径。或者,uview-plus可能提供了一种方式,将图标导出为base64或本地文件,这样可以在iconPath中使用。 但用户的问题是如何“直接”配置,可能他们希望不经过转换步骤。这时候可能需要检查uview-plus的文档,看看是否有相关的配置方法。例如,可能uview-plus有特定的图标名称可以直接在配置使用,或者需要引入某种字体文件,然后在tabBar使用unicode字符。 假设检查文档后发现,uview-plus的图标需要以组件形式使用,那么在page.json中直接引用是不可能的,因为page.json不支持组件。这时候正确的做法应该是将需要的图标下载为图片,放在项目的静态资源目录中,然后在page.json中引用这些图片的路径。 或者,可能用户误解了uview-plus的图标使用方法,实际上他们应该在页面模板中使用<up-home>组件,而不是在tabBar配置里。tabBar的图标必须使用图片文件,因此需要将图标转换为图片格式,如PNG或SVG,并正确引用路径。 总结步骤应该是:首先确认uview-plus图标的使用方式,然后根据结果决定是否需要将图标转换为图片文件,最后在page.json中配置这些图片的路径。同时提醒用户,直接使用组件在tabBar中不可行,必须使用图片路径。</think>在uni-app配置`uview-plus`的`up-home`图标到`tabBar`需通过以下步骤实现: ### 一、确认图标类型 `uview-plus`的图标属于字体图标或组件,但`page.json`的`tabBar`仅支持本地图片路径。因此需将图标转换为本地图片文件。 ### 二、操作步骤 1. **获取图标文件** - 从`uview-plus`官方资源中找到`up-home`图标的SVG/PNG文件 - 或通过开发者工具检查元素导出图标为图片 2. **放置图标到项目** ```markdown 将图标文件(如`home.png`和`home-active.png`)放入项目静态目录: - `/static/tabbar/home.png` - `/static/tabbar/home-active.png`(选中状态) ``` 3. **配置page.json** ```json { "tabBar": { "list": [ { "pagePath": "pages/index/index", "text": "首页", "iconPath": "/static/tabbar/home.png", "selectedIconPath": "/static/tabbar/home-active.png" } ] } } ``` ### 三、注意事项 1. **图标尺寸要求**:建议使用`81px*81px`正方形图片,避免缩放模糊 2. **状态管理**:选中与非选中状态需使用不同图片文件 3. **路径正确性**:确保路径以`/static`开头且无拼写错误 ### 四、替代方案(动态场景) 如需动态切换图标,可在页面模板中使用`uview-plus`组件: ```html <template> <up-home v-if="isSelected"></up-home> <up-home-filled v-else></up-home-filled> </template> ``` > 直接引用组件在`page.json`中不可行,必须通过图片文件路径实现tabBar图标配置
评论 122
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值