uniapp微信小程序实现不同账号权限显示不同tabbar-Toy模板网

这篇具有很好参考价值的文章主要介绍了uniapp微信小程序实现不同账号权限显示不同tabbar。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

一套小程序可能会有多个用户角色，比如在线课堂类小程序，会有老师和学生，但是两者能看到的内容应该是不一样的。

实现原理

舍弃uniapp原生的tabbar，使用uView插件下的u-tabbar导航插件来实现。

uView

uView的官网如下，里面有详细的教程，而且在uniapp插件市场也能找到，使用起来也是非常的方便。

uView 2.0 - 全面兼容nvue的uni-app生态框架

过程

1.首先在文件目录下的components文件下创建一个自定义组件UserTab

uniapp微信小程序实现不同账号权限显示不同tabbar,微信小程序,uni-app,小程序

2.在UserTab文件里面，根据uView的教程，搭建好自己需要的导航模块

	<view>
		<!-- 学生端 -->
		<u-tabbar v-if="showWho=='student'" :value="student" @change="studentChange" :fixed="true" :placeholder="true"
			:safeAreaInsetBottom="true" activeColor="#31aef1">
			<u-tabbar-item v-for="i in studentList" :key='i.id' :text="i.name" :name="i.name">
				<image class="u-page__item__slot-icon" slot="active-icon" :src="i.active" mode="widthFix"></image>
				<image class="u-page__item__slot-icon" slot="inactive-icon" :src="i.inactive" mode="widthFix"></image>
			</u-tabbar-item>

		</u-tabbar>
		<!-- 教师端 -->
		<u-tabbar v-if="showWho=='teacher'" :value="teacher" @change="teacherChange" :fixed="true" :placeholder="true"
			:safeAreaInsetBottom="true" activeColor="#31aef1">
			<u-tabbar-item v-for="i in teacherList" :key='i.id' :text="i.name" :name="i.name">
				<image class="u-page__item__slot-icon" slot="active-icon" :src="i.active" mode="widthFix"></image>
				<image class="u-page__item__slot-icon" slot="inactive-icon" :src="i.inactive" mode="widthFix"></image>
			</u-tabbar-item>
		</u-tabbar>
	</view>

3.为了方便循环和切换，要在JS里面配置好两端的名字和图片。并且要用showWho或其他变量来控制隐藏和显示哪个。

	teacherList: [{
						id: 1,
						name: '课堂',
						active: '../../static/classroom-active.png',
						inactive: '../../static/classroom.png'
					},
					{
						id: 2,
						name: '兴趣小组',
						active: '../../static/interestGroup-actiev.png',
						inactive: '../../static/interestGroup.png'
					},
					{
						id: 3,
						name: '我的',
						active: '../../static/mine-active.png',
						inactive: '../../static/mine.png'
					}
				]

4.来到要做成tabbar的各个页面里，引入UserTab这个自定义组件，并且传值过去（直接传页面的名称就好）

<UserTab tabNumber='课堂'></UserTab>

5.在登录的时候，就在本地存一个值，表明是老师还是学生。在UserTab的mounted生命周期里做一个简单的判断并且把tabbar传过来的值赋值给事先准备好的变

		mounted() {
			if (uni.getStorageSync('status') == 'teacher') {
				this.showWho = 'teacher'
			}
			if (uni.getStorageSync('status') == 'student') {
				this.showWho = 'student'
			}
			this.student = this.tabNumber
			this.teacher = this.tabNumber
		},

6.最后，配置好tabbar切换的方法函数

	teacherChange(e) {
				this.teacher = e
				if (e == '课堂') {
					uni.reLaunch({
						url: "/pages/index/CourseTeacherIndex"
					})
					uni.hideHomeButton() //为了防止跳转页面后，小程序右上角会出现一个回到主页的小房子
				} else if (e == "兴趣小组") {
					uni.reLaunch({
						url: "/pages/interestGroup/interestGroup"
					})
					uni.hideHomeButton()
				} else if (e == "我的") {
					uni.reLaunch({
						url: "/pages/mine/mine"
					})
					uni.hideHomeButton()
				}
			},

总结：主要还是要摸索一下uView的tabbar的切换逻辑。uniapp原生的tabbar必须要注释了。退出账号的时候，得把本地存的信息要删除掉。这是一个比较笨的方法，如果大家有其他好的方法的话，欢迎交流学习噢！

文章来源地址https://www.toymoban.com/news/detail-599613.html

到了这里，关于uniapp微信小程序实现不同账号权限显示不同tabbar的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！