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

mount(). 1; 2; 3; 4; 5; 6; 7; 8; 9; 10; 11; 12; 13 ... axure rp9 3658 注册码授权码激活码license key，亲测可用！ Axure RP 9 最新版授权码（亲 ... uni-app微信小程序根据角色动态的更改底部tabbar 置顶 范特西是只猫 已于 2022-04-2210:10:15 修改 87762 收藏 155 分类专栏： 微信小程序 uni-app 文章标签： 微信小程序 tabbar uni-app 于 2020-10-1415:44:48 首次发布 原文链接：https://blog.csdn.net/qq_36410795/article/details/122037843?spm=1001.2014.3001.5501 版权 微信小程序 同时被2个专栏收录 7篇文章 0订阅 订阅专栏 uni-app 7篇文章 0订阅 订阅专栏 文章目录 1.需求背景1.1源码下载 2.问题前提及思路3.开始撸3.1设置`tabbar.js`配置不同角色不同的菜单3.2设置`page.json`3.3vue配置3.4tabBar组件代码3.5setRole方法 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 lettab1=[ { "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 lettab2=[ { "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" } ] exportdefault[ 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.3vue配置 uniapp是可以直接使用vuex的，所以，直接在项目的根目录下新建一个store文件夹，存储相关数据。

importVuefrom'vue' importVuexfrom'vuex' Vue.use(Vuex) importtabBarfrom'@/utils/tabbar.js' conststore=newVuex.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]) }, }, }) exportdefaultstore 在入口文件main.js中使用 importVuefrom'vue' importAppfrom'./App' importuViewfrom"uview-ui"; importstorefrom'./store/index' Vue.use(uView); Vue.config.productionTip=false Vue.prototype.$store=store App.mpType='app' constapp=newVue({ ...App, store }) app.$mount() 3.4tabBar组件代码 3.5setRole方法 登录时，获取返回的权限，然后再调用setRole方法 范特西是只猫 关注 关注 178 点赞 踩 99 评论 155 收藏 扫一扫，分享内容 点击复制链接 专栏目录 Axure9+8产品经理(基础+进阶）+送授权密钥一枚 09-08

【购买本课程后，您将获得】：
  1.掌握Axure从基础到精通的所有技能（胜任0-3岁左右的PM，市场出价约为9000-14000每月）
  2.掌握产品心法，产品思维，成为一个高级产品经理（迅速比肩3-5岁产品经理，市场出价约为15000-25000每月）
  3.掌握产品与交互，与技术与运营的交叉领域，成为产品总监级别的人才（市场对产品总监出价约为27000-40000每月）
【另外，本课程还赠送】：
  1.价值3000元的工作型PPT一套
  2.价值500元的Axure授权码一枚
  3.价值2000元的产品模板、库近300份
【最后，您还将获得】：
  1.加入一个微信群的机会，与400多名全国产品经理一起抱团学习
  2.胡了老师10~15分钟的真人电话咨询服务(业内咨询价值约800元）
【介绍】胡了，8年互联网产品老兵 
  北大硕士、新加坡海归，曾创办3家公司PmHule（Vx) 
胡了曾主导多款产品，历经产品总监，产品VP，互联网公司创始人。


本课程由百度设计师+去哪儿网产品经理讲解
【特别提醒】活动赠品根据营销活动不同相应变化。

axure9正式版授权码+汉化包 04-30 axure9正式版授权码+汉化包+安装包+插件 评论 99 您还未登录，请先 登录 后发表或查看评论 AxureRP9注册码/授权码(Enterpriseedition、Teamedition和Proedition)_亲测可用 05-04 3个版本的注册码各一个，放心下载使用。

若不能成功使用，请留言联系我，以免浪费了你的积分！ Axurerp9-mac版，附激活码～亲测可用 05-01 AxureRP9-mac版，里面有验证激活码，亲测可用，欢迎下载！ AxureforMacRP9汉化激活正式版含专业版授权码 05-11 AxureRP9正式版（非Beta）,含专业版授权码，汉化包，亲测可用 axurerp93658注册码授权码激活码licensekey 08-16 axurerp93658注册码授权码激活码licensekey，亲测可用！ AxureRP9最新版授权码（亲测有效） 夏目_muzi_920316的博客 11-16 5708 Licensee: Freecrackdownload.com Key: 5vYpJgQZ431X/G5kp6jpOO8Vi3TySCBnAslTcNcKkszfPH7jaM4eKM8CrALBcEC1 AxureRP9授权码（亲测有效） gaofubo的博客 07-12 5万+ 注意：此文仅供学习与交流，于2020-07-12 AxureRP9.0.0.3687正式版（目前最新版） Licensee:Freecrackdownload.com KEY:5vYpJgQZ431X/G5kp6jpOO8Vi3TySCBnAslTcNcKkszfPH7jaM4eKM8CrALBcEC1 AxureRP9.0.0.3686正式版 Licensee:yygg329405 KEY:QmNyZyXeMrJU+1yw6XiXZGenOs9R3wV7S+KS7K90yTk= Axu Axure8授权码 weixin_43697849的博客 04-26 8385 AxureRP8版本 1、被授权人：www.jb51.net 授权密钥：smn/B4H9oFf30K6sLW36LaTs11yoKk5p616FpnyGdbtTum95cKLanzezWL6EZOOA EnterpriseEdition 企业版 2、被授权人：www.jb51.net 授权密钥：PfIjTySgSBZei/AM49Wsl/OXbAzPBegmTxQWNxGt+/VKKkbOI0VzxlKmpnpVYIIg 3、被授权人：zdfans.com 授权密钥：gP5uuK2gH+iIVO3YF Axure9授权码 04-30 [1]AxureRP是美国AxureSoftwareSolution公司旗舰产品，是一个专业的快速原型设计工具，让负责定义需求和规格、设计功能和界面的专家能够快速创建应用软件或Web网站的线框图、流程图、原型和规格说明文档。

作为专业的原型设计工具，它能快速、高效的创建原型，同时支持多人协作设计和版本控制管理。

AxureRP已被一些大公司采用。

AxureRP的使用者主要包括商业分析师、信息架构师、可用性专家、产品经理、IT咨询师、用户体验设计师、交互设计师、界面设计师等，另外，架构师、程序开发工程师也在使用Axure。

AxureRP9的授权码 demons_dai的博客 10-29 3498 AxureRP9授权码适合3658版本，亲测可用 授权用户： www.7down.com 授权密匙： fAL2Vx1hDZcCG9zvuYOXd0KvD9yyPDsfR6+8SZ8fONtm0sNg9YEjZAwx1Hj3jVRj O5bswTNBkOMinSO9wA3q8M/yBL/aW9hwI13aGwZkHjxrUxTksNKe/deVtO/X2ttc mjuGfxCocdCZ890jk... Axure9激活码 JaneYork的博客 06-02 3万+ 下载：https://www.axure.com/ SN: ProEdition Licensee:speedzodiac KEY:Uo9dxksy5DWICB3cs3plwJY+SUAf2Uzj9tdnR1YonltOYi/om6GiHg56/rYGAFED EnterpriseEdition Licensee:speedzodiac... Axure8.0/9.0注册码激活码授权码License Coo~的博客 05-11 3万+ https://7rp.cn/34 【注册】Axure8.1.0.3381注册码 玫瑰小屋的博客 12-07 2256  楼主亲测可用  转自Axure8.1注册 License：zdfans Key：fZw2VoYzXakllUuLVdTH13QYWnjD6NZrxgubQkaRyxD5+HNMqdr+WZKkaa6IoE5N Licensee：zd423 Key：LrZoHQetrL7OK8XOVWgvTFn+XOR32hQkrxkYj0CkbDUsvvENp6GCS38B8GiOS1ec... Axurerp8.1.0.3381激活码（2019-07-26亲测可用） 猫老板的豆 11-23 4万+ Axurerp8.1.0.3381激活码（亲测可用） License：zd423 Key：LrZoHQetrL7OK8XOVWgvTFn+XOR32hQkrxkYj0CkbDUsvvENp6GCS38B8GiOS1ec Axure8.0授权码 Penguinfool的博客 03-05 5万+ Licensee：UniversityofScienceandTechnologyofChina(CLASSROOM) Key：DTXRAnPn1P65Rt0xB4eTQ+4bF5IUF0gu0X9XBEUhM4QxY0DRFJxYEmgh4nyh7RtL Licensee:IloveyouAxure Key:UChpuxwbDW6eAIaAf9UujEFSBwN3vpEz9s... AxureRP9授权码 最新发布 Che_yibuhe_yibu的博客 04-20 164 axurerp9安装教程（如需免费版安装包请点击此处） 1.下载本站提供的压缩包进行解压 2.双击AxureRP-setup9.exe安装程序进行安装 3.点击下一步 4.勾选我同意，点击下一步 5.选择安装位置默认也可以 6.静静的等待安装 7.安装好后点击完成安装，这里吧自动运行取消因为运行也是英文版 8.将一开始下载的附件default文件复制 9.找到安装路径（默认安装路径为："C:\ProgramFiles(x86)\Axure\AxureRP9\"）新建一个 Axure各种版本注册码|最新AxureRP8.1.0.3377的授权码 热门推荐 only 07-17 13万+ 更新了Axure版本到8.1.0.3377后，原来的授权码不能用了，就在网上重新搜了一下，整理下，留个记录。

AxureRP8.1.0.3377—-亲测可用 Licensee： zdfans.com Key： gP5uuK2gH+iIVO3YFZwoKyxAdHpXRGNnZWN8Obntqv7++FF3pAz7dTu8B61ySxli Licensee： zdfans Key： fZw2... “相关推荐”对你有帮助么？ 非常没帮助 没帮助 一般 有帮助 非常有帮助 提交 ©️2022CSDN 皮肤主题：酷酷鲨 设计师：CSDN官方博客 返回首页 范特西是只猫 CSDN认证博客专家 CSDN认证企业博客 码龄6年 深圳市天狼网络科技有限公司 191 原创 1万+ 周排名 1321 总排名 138万+ 访问 等级 1万+ 积分 782 粉丝 858 获赞 716 评论 2283 收藏 私信 关注 热门文章 uni-app微信小程序根据角色动态的更改底部tabbar 87709 vueelementCascader级联选择器选择任意一级选项点击收起，点击label选中等问题详解 72456 excel表格数字批量去除前2位字符的方法 54837 Uncaught(inpromise)报错解决 51972 vueelementCascader级联选择器选择任意一级选项点击收起，点击label选中等问题详解 41414 分类专栏 vue 101篇 canvas 3篇 uni-app 7篇 百度地图 3篇 微信小程序 7篇 webrtc 1篇 钉钉 1篇 openlayers 30篇 webGis 23篇 echarts 9篇 加密算法 1篇 fabric.js 2篇 highcharts 2篇 bootstrap 1篇 java 18篇 mybatis 2篇 maven 2篇 mysql 2篇 html5&css3 17篇 jquery 15篇 javascript 23篇 ajax 13篇 开发工具 9篇 tomcat 1篇 execl 2篇 nodejs 10篇 git 2篇 express 2篇 使用教程 3篇 webpack 3篇 移动web 8篇 兼容问题 6篇 element-ui 21篇 mint-ui 1篇 最新评论 修改屏幕分辨率比例，4*3拼接屏21:9比例，大屏项目拼接适配屏解决方案 qq_47878711: 完全就是骗人win7和win10都试了根本没用 openlayers6【十七】vueVectorLayer矢量图层画地图省市区，多省市区(粤港澳大湾区)效果详解 荣耀新人: 老兄你解决了么我也出现这个问题了 openlayers6【十七】vueVectorLayer矢量图层画地图省市区，多省市区(粤港澳大湾区)效果详解 荣耀新人: 只显示北京的问题找到了在这个代码上 [code=javascript] letlineData=g.features[0]; [/code] 但是我把他forEach起来之后就一个都没有了这是什么原因啊 openlayers6【十七】vueVectorLayer矢量图层画地图省市区，多省市区(粤港澳大湾区)效果详解 荣耀新人: [code=javascript] addArea(geo=[]){ if(geo.length==0)returnfalse; letareaFeature=null; //设置图层 this.areaLayer=newVectorLayer({ source:newVectorSource({ features:[], }), }); //添加图层 this.map.addLayer(this.areaLayer); geo.forEach((g)=>{ letlineData=g.features[0]; if(lineData.geometry.type=="MultiPolygon"){ areaFeature=newFeature({ geometry:newMultiPolygon(lineData.geometry.coordinates).transform( "EPSG:4326", "EPSG:3857" ), }); }elseif(lineData.geometry.type=="Polygon"){ areaFeature=newFeature({ geometry:newPolygon(lineData.geometry.coordinates).transform( "EPSG:4326", "EPSG:3857" ), }); } }); areaFeature.setStyle( newStyle({ fill:newFill({color:"#4e98f444"}) [/code] 微信小程序实现使用百度云人脸录入人脸识别功能 yuezz: 哥们，我这个id和key都改成自己的了，为什么每次识别都是请重试？get和post的状态都是200 您愿意向朋友推荐“博客详情页”吗？ 强烈不推荐 不推荐 一般般 推荐 强烈推荐 提交 最新文章 vueel-dialog模态框拖拽 vue使用jszipfile-saver对附件wordpdfpng等进行zip打包下载 css设置好看的背景效果（毛玻璃） 2022年11篇 2021年24篇 2020年56篇 2019年65篇 2018年17篇 2017年29篇 目录 目录 分类专栏 vue 101篇 canvas 3篇 uni-app 7篇 百度地图 3篇 微信小程序 7篇 webrtc 1篇 钉钉 1篇 openlayers 30篇 webGis 23篇 echarts 9篇 加密算法 1篇 fabric.js 2篇 highcharts 2篇 bootstrap 1篇 java 18篇 mybatis 2篇 maven 2篇 mysql 2篇 html5&css3 17篇 jquery 15篇 javascript 23篇 ajax 13篇 开发工具 9篇 tomcat 1篇 execl 2篇 nodejs 10篇 git 2篇 express 2篇 使用教程 3篇 webpack 3篇 移动web 8篇 兼容问题 6篇 element-ui 21篇 mint-ui 1篇 目录 实付元 使用余额支付 点击重新获取 扫码支付 钱包余额 0 抵扣说明： 1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。

2.余额无法直接购买下载，可以购买VIP、C币套餐、付费专栏及课程。

余额充值