作者：梁邦邦1.介绍菜单主要分为应用程序菜单和上下文菜单，在托盘和扩展坞中也会用到。本节主要介绍前两者。文档地址1.1应用菜单mac和windows都在左上角，只是一个在屏幕左上角，一个在应用视图左上角。Mac是这样的：windows是这样的：如果windows下没有显示菜单，在当前窗口按alt键就会出现。1.2上下文菜单是右键菜单。2.创建菜单2.1创建应用程序菜单接下来我们创建应用程序菜单。下面的步骤是：引入Menu类定义一个菜单模板，调用Menu类的buildFromTemplate方法，会根据传入的模板创建相应的菜单。调用Menu类的setApplicationMenu方法分四步创建一个应用程序菜单。先来看看效果吧。图片。附代码：//Step1const{Menu,dialog,app}=require('electron')//Step2consttemplate=[{label:'app',//macOS下第一个标签是应用名称，这里的设置无效]},{label:'file',submenu:[{label:'submenu',click:()=>{//调用dialog（弹窗模块）演示效果dialog.showMessageBoxSync({type:'info',title:'Prompt',message:'Asubmenuwasclicked'})}}]}]//Step3constmenu=Menu.buildFromTemplate(template)//Step4Menu.setApplicationMenu(menu)2.2创建上下文menu是创建一个右键菜单。前三个步骤与创建应用程序菜单相同。最后一步需要监听窗口上下文菜单事件来显示菜单选项。先听效果图上的事件上下文菜单文档。附代码：//Step1const{Menu,BrowserWindow}=require('electron')//Step2consttemplate=[{label:'app',//macOS下第一个label是应用名称，这里是Invalidsubmenu:[{role:'quit'},{role:'about'}]},{label:'edit',role:'editMenu'}]//步骤3constcontextMenu=Menu.buildFromTemplate(template)//步骤4//主进程，渲染进程可以使用window.addEventListener设置监听事件BrowserWindow.getFocusedWindow().webContents.on('context-menu',()=>{contextMenu.popup()})发现这个例子的代码比上一个例子少了，但是实现了更多的菜单，这个作用是什么？别急，往下看。3、设置菜单属性上一节讲到，这个作用是干什么用的？实际上，创建菜单行为有两种方式，一种是自定义，即1.1中的实现，另一种是预定义，即角色。role是MenuItem的属性，也是electron的预定义行为。文档说：最好将角色分配给与标准角色匹配的任何菜单，而不是尝试在点击功能中手动实现该行为。内置的角色行为将提供最佳的原生体验。使用role时，label和accelerator值是可选的，默认为每个平台合适的值。也就是说，只要你设置了role属性，这个菜单的文案、快捷键、事件行为都在内部实现了，体验比自定义行为要好。const{Menu,BrowserWindow}=require('electron')consttemplateCustom=[{label:'app',//macOS下第一个标签为应用名称，此处设置无效submenu:[{label:'quit',角色：'退出'}，{标签：'关于'，角色：'关于'，加速器：'CommandOrControl+shift+H'}]}，{标签：'编辑'，子菜单：[{角色：'editMenu'},{type:'separator'},{label:'custom',click:()=>{constwin=newBrowserWindow()win.loadURL('https://electronjs.org')}}]}]constcustomMenu=Menu.buildFromTemplate(templateCustom)Menu.setApplicationMenu(customMenu)上面代码第8行的快捷键是设置快捷键的属性。4.隐藏菜单如果我们在开发中使用了一些菜单，但是我们不想让用户看到，我们需要让这个功能保持在线，比如调试窗口，这样我们可以在线找到bug，那么这个属性可见可以使用这个隐藏菜单。有用。看效果图：const{Menu}=require('electron')constmenu=Menu.getApplicationMenu()//获取要隐藏的菜单，设置其属性visible为falsemenu.items[3].submenu.items[2].visible=false;如图：一开始可以看到view的子菜单ToggleDeveloperTools切换调试窗口，点击隐藏菜单，然后使用快捷键cmd+option+I（ctrl+shift+I下windows)来切换调试窗口。我们是小黑板前端，欢迎关注我们的知乎、Segmentfault、CSDN、简书、开源中国、博客园账号。
