在 B 端应用中常用到导航菜单，本篇将介绍如何基于布局导航 实现动态菜单配置。
注意：说明：
注意：推荐在 应用布局 中使用布局导航组件搭建应用布局，支持多页面引用同一套布局。
一、动态菜单配置结构
将布局导航菜单属性设置为表达式。
完整菜单配置输出结构可参考：
{ isMultiTerminal:true, //是否启动多端独立菜单 menuData:[{ //菜单配置项，如启用多端独立菜单，该配置只对PC端生效 key: "ypoaajhs5wqd",//菜单key值，不可重复 title: "首页", //显示的菜单名称 iconUrl: "td:view-module", //菜单配置中图标为内置图标是，图标名称 iconPath: "", // 菜单项中图标如为自定义图片，自定义图标默认地址 selectedIconPath: "", // 菜单项中图标如为自定义图片，选中时图标地址 children:[{ //二级菜单配置项 key: "ypoaajhs5aqs",//菜单key值，不可重复 title: "子菜单", //显示的菜单名称 disabled:false, //是否禁用 visible:true, //是否显示 iconUrl: "td:view-module", //菜单配置中图标为内置图标时，图标名称 iconPath: "", // 菜单项中图标如为自定义图片，自定义图标默认地址 selectedIconPath: "", // 菜单项中图标如为自定义图片，选中时图标地址 type: "link", //跳转方式。route:内部页面，link:外部链接 path: "", //当type为route时才需配置，内部页面ID packageName: "", //应用分包情况下，当type为route时才需配置，跳转的包标识名称 linkUrl: "https://cloud.tencent.com", //当type为link时才需配置，跳转的外链地址 linkTargetBlank: true, //当type为link时才需配置，是否新开页面 }]}],mobileMenuData:[ //菜单配置项，如启用多端独立菜单，该配置只对移动端端生效，isMultiTerminal为false时可不配置 { key: "ypoaajhs5ytr", title: "移动端菜单", iconUrl: "td:view-module", //菜单配置中图标为内置图标是，图标名称 iconPath: "", // 菜单项中图标如为自定义图片，自定义图标默认地址 selectedIconPath: "", // 菜单项中图标如为自定义图片，选中时图标地址 type: "route", //跳转方式。route:内部页面，link:外部链接 path: "/index", //当type为route时才需配置，内部页面ID packageName: "", //应用分包情况下，当type为route时才需配置，跳转的包标识名称 inkUrl: "", //当type为link时才需配置，跳转的外链地址 linkTargetBlank: true, //当type为link时才需配置，是否新开页面 } ]}
二、菜单项动态显隐控制示例
实现仅超级管理员可见，其他角色隐藏某菜单项场景。
三、定义变量及方法
1. 前往布局设计中，定义菜单是否显示的全局变量 isVisible，默认值设为 false。
2. 打开代码编辑器，全局方法中判断当前登录角色是否可见。本示例假设仅超级管理员可见，可根据业务调整。
async onAppLaunch(launchOpts) { //console.log('———> LifeCycle onAppLaunch', launchOpts) let hasAdministrator = await $w.auth.getUserInfo().relatedRoles.some(function (obj) { return obj.roleIdentity === 'administrator'; }); $w.app.dataset.state.isVisible = hasAdministrator }
注意：说明：
注意：该示例下请定义全局级变量及方法，页面级定义菜单显隐使用将受限。
四、设置菜单
1. 应用布局设计下，在顶部导航布局中将布局导航菜单属性设置为表达式。
2. 表达式示例如下：
结构如下：
({ isMultiTerminal:false, menuData:[{ key: "ypoaajhs5wqd", title: "首页", iconUrl: "td:view-module", iconPath: "", selectedIconPath: "", children:[{ key: "ypoaajhs5aqs", title: "子菜单", disabled:false, visible:$w.app.dataset.state.isVisible, //当为超级管理员时才显示 iconUrl: "td:view-module", iconPath: "", selectedIconPath: "", type: "link", path: "/index", packageName: "", linkUrl: "https://cloud.tencent.com", linkTargetBlank: true, }]},{ key: "ypoaajhs5aaa", title: "监控日志", disabled:false, visible:$w.app.dataset.state.isVisible, //当为超级管理员时才显示 iconUrl: "td:view-module", iconPath: "", selectedIconPath: "", type: "link", path: "/index", packageName: "", linkUrl: "", linkTargetBlank: true, }]})
3. 前往页面设计，在页面属性-页面布局中使用顶部导航布局。
4. isVisible 默认值为 false，菜单隐藏。如配置后可以展示完整菜单即表示角色控制生效。