技术标签: # uni-app&微信小程序专栏 微信小程序 tabbar uni-app
公司要求开发一个小程序,要求二种不同权限的人群都可以使用,使用时根据不同的权限,获取不同的tabbar,以及展示对应不同的内容。
登录页面分为 用户登录
及 管理员登录
1.2 用户登录和管理员登录的 tabbar
根据账号角色进行对应展示
uniapp 本身的动态设置tabbar方法 uni.setTabBarItem(OBJECT),但是使用这个方法刷新切换时会短暂白屏以及uni.setTabBarItem
只能满足动态设置tabbar一项的内容,无法实现多项的需求。所有综合考虑决定还是使用uview-ui的Tabbar底部导航栏组件。
最终选择了uni-app的uview-ui(UI框架)+ vuex来完成这个功能。其中,vuex主要是用来存储当前的tabbar内容的。
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
]
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"
}
]
}
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_token
setWxtoken(state, data) {
state.wx_token = data;
uni.setStorageSync('wx_token',data)
},
// 设置用户角色ID
setRoleId(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()
<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>
登录时,获取返回的权限,然后再调用setRole方法
<script>
import {
mapMutations } from 'vuex';
export default {
data() {
return {
roleId:0,
};
},
methods: {
methods: {
...mapMutations(['setRoleId']),
},
//登录
login() {
this.setRoleId(this.roleId)// 0或者1
uni.switchTab({
url: '../index/index' //然后跳转到登录后的首页
})
}
}
}
</script>
文章浏览阅读878次。目录一、项目背景二、项目介绍三、需求分析四、新建项目五、项目文件1.配置文件settings2.爬虫文件huawei中间件middlewares其他pycharm TODO功能一、项目背景最近学习了爬虫的一些基础知识,尝试自己去爬取招聘网站的招聘岗位信息,因此就做了这个项目。过程中参考了很多百度回来的知识,怕自己忘了,通过此项目总结记录下学习笔记,也方便后续索引。二、项目介绍此项目是通过scrapy做了两个爬虫,一个爬取社招,一个爬取校招,爬取了huawei招聘网站的校招跟社招的招聘岗位(JD)信息_scrapy项目需求分析
文章浏览阅读215次。Git学习笔记1.Git是什么Git是一个开源的分布式版本控制系统,可以有效、高速地处理从很小到非常大的项目版本管理。2. 相关概念仓库:存放代码,文档等文件的目录本地仓库远程仓库可以通过 git remote add 建立关联工作区 (Working Directory): 编辑代码修改内容的地方暂存区 (Stage or Index): 数据暂时存放的区域,可以在工作...
文章浏览阅读2.8w次,点赞346次,收藏2.7k次。先呈上高清下载地址链接:https://pan.baidu.com/s/14x2Cno96vp67qPz0Ee4weA提取码:7j7g1、标准库概览标准库包含:数据库处理,输入输出存储..._python库的思维导图
文章浏览阅读1k次。《在window中安装cygwin和swoole》要点:本文介绍了在window中安装cygwin和swoole,希望对您有用。如果有疑问,可以联系我们。swoole是一个使用C语言编写的PHP扩展,由于swoole框架是只能在LIUNX等系统上运行,在WINDOW上要安装,需要借助cygwin模拟unix环境。那怎么样才能够在windows系统来开发使用swoole扩展呢?当然我们可以使用vm做..._php cygwin swoole
文章浏览阅读3.2w次,点赞52次,收藏492次。安全帽佩戴检测和识别系统(含数据集+训练代码),安全帽检测,安全帽识别,佩戴安全帽检测和识别_安全帽数据集
文章浏览阅读198次。守护进程的工作就是打开一个端口,并且等待并监听进入的链接,如果客户提了一个连接,守护进程就创建(fork)子进程来响应此连接,而父进程继续监听更多的服务请求,因此,每个守护进程都可以处理多个客户的请求。进程是程序执行的过程,是一个程序在其自身的虚拟地址空间中的一次执行活动,相对于程序,进程是动态的,在linux中,他与用户权限相关,程序和进程并不是一一对应,一个程序可能应对多个进程。top命令,可以查看系统进程运行的情况,哪些是进程的CPU,内存占用比较高,可以参看物理CPU,内存的大小。
文章浏览阅读333次,点赞3次,收藏5次。学习技术是一条慢长而艰苦的道路,不能靠一时激情,也不是熬几天几夜就能学好的,必须养成平时努力学习的习惯。所以:贵在坚持!最后再分享的一些BATJ等大厂20、21年的面试题,把这些技术点整理成了视频和PDF(实际上比预期多花了不少精力),包含知识脉络 + 诸多细节,由于篇幅有限,上面只是以图片的形式给大家展示一部分。Mybatis面试专题MySQL面试专题并发编程面试专题555)]MySQL面试专题[外链图片转存中…(img-CyvRe7uF-1711543166556)]并发编程面试专题。_charles修改数据
文章浏览阅读4.4k次。1.在https://github.com/fex-team/webuploader 下载webuploader并解压, 解压后放到public里面。其中我把解压缩后的文件夹改名为webuploader,放到了public/static/文件夹下。 2. 将你放到public下的webuploader文件夹中的examples/imageupload/index.html复制到在对应..._tp5 怎么支持webp上传
文章浏览阅读2k次,点赞3次,收藏14次。静态方法可以创建动态方法和变量对象属于动态的动态的可以调用动态的。综上:1)在main()方法中,我们可以直接调用main()方法所在类的静态变量或方法。2)但是,在main()方法中,不能直接调用main()方法所在类的非静态变量或方法。必须先创建一个对象实例后,通过对象名.方法 对象名.变量,通过这个对象才能调用类中的非静态变量或方法。_为什么只有在main方法中才能调用变量
文章浏览阅读476次。前言从去年底到前几天,不断被各路跳槽的朋友刺激着,他们都跟我说着同一件事:跳槽了,薪资翻倍了,去一家叫做字节跳动的公司了。让我更加讶异的是一个在微博做移动开发的朋友跟我说他舍弃了年终奖,在春节之前就投入到这家公司的怀抱,这让我一度以为这个朋友是被传销了。说实话,我内心早就被这些个朋友成功跳槽的消息撩拨的春心荡漾了,在这春色融融的夜晚我的代码也开始字节跳动了,今晚就跟大家分享下这些朋友们跳槽的故事。背景介绍Android 项目一般使用 gradle 作为构建打包工具,而其执行速度慢也一直为人所诟病_android开发面试
文章浏览阅读119次。我小学、初中、高中的时候,从来都很快乐。似乎只要把学习搞好,其余什么都不用管了。而那些被学习所掩盖的欠缺的技能、心机、远见卓识、综合素质、综合能力、表达能力,似乎都根本不重要。可又怎会真正不重要。我上大学时,总是发现北京的同学就是综合素质比外省的学生强,无论是学术素养、知识面的广博度,都与我们这些靠着刷卷子刷分刷上去的呆子判若两人。而一旦踏入社会,我更是发现,母校真真是培养出了一个高分低能的书呆子,人家在规划自己人生目标的时候,我在timi里死去活来;人家参加各种大学生创业创新奖项,我在游山玩水;人家保研_人生如梦博客
文章浏览阅读3.8k次。问题最近在做毕业设计时有个自定义的PopWindow,布局用代码构建,其中就有用到GradientDrawable设置不同圆角的背景,在这里做下笔记。效果角度大小只是为了举例实现这里用的是Kotlinval gd = GradientDrawable()gd.cornerRadii = getCornerRadii(30F,8F,20F,5F)private ..._gradientdrawable cornerradii