使用Electron自定义菜单。本系列文章的应用示例已发布在GitHub上：electron-api-demos-Zh_CN。您可以克隆或下载并运行查看。欢迎来到星空。使用Menu和MenuItem模块可用于创建自定义本地菜单。有两种类型的菜单：应用程序（顶部）菜单和上下文（右键单击）菜单。在浏览器中打开完整的API文档。创建应用程序菜单支持：Win、macOS、Linux|流程：主要使用Menu和MenuItem模块来自定义定义您的应用程序菜单。如果你没有设置任何菜单，Electron默认会为你的应用程序生成一个最小菜单。此应用程序使用下面的代码来设置应用程序菜单。如果单击应用程序菜单中的“查看”选项，然后单击“应用程序菜单演示”，将显示一个消息框。主进程constelectron=require('electron')constBrowserWindow=electron.BrowserWindowconstMenu=electron.Menuconstapp=electron.applettemplate=[{label:'Edit',submenu:[{label:'Undo',accelerator:'CmdOrCtrl+Z'，角色：'撤消'}，{标签：'重做'，加速器：'Shift+CmdOrCtrl+Z'，角色：'重做'}，{类型：'分隔符'}，{标签：'剪切'，加速器：'CmdOrCtrl+X'，角色：'剪切'}，{标签：'复制'，加速器：'CmdOrCtrl+C'，角色：'复制'}，{标签：'粘贴'，加速器：'CmdOrCtrl+V',role:'paste'},{label:'全选',accelerator:'CmdOrCtrl+A',role:'selectall'}]},{label:'View',submenu:[{label:'Reload',accelerator:'CmdOrCtrl+R',click:function(item,focusedWindow){if(focusedWindow){//重新加载后，刷新并关闭所有辅助窗口if(focusedWindow.id===1){BrowserWindow.getAllWindows().forEach(function(win){if(win.id>1){win.close()}})}focusedWindow.reload()}}},{label:'切换全屏',accelerator:(function(){if(process.platform==='darwin'){return'Ctrl+Command+F'}else{return'F11'}})(),点击:function(item,focusedWindow){if(focusedWindow){focusedWindow.setFullScreen(!focusedWindow.isFullScreen())}}},{label:'ToggleDeveloperTools',accelerator:(function(){if(process.platform==='darwin'){return'Alt+Command+I'}else{return'Ctrl+Shift+I'}})(),click:function(item,focusedWindow){if(focusedWindow){focusedWindow.toggleDevTools()}}},{type:'separator'},{label:'ApplicationMenuDemo',click:function(item,focusedWindow){if(focusedWindow){constoptions={type:'info',title:'ApplicationMenuDemo',buttons:['OK'],message:'这个演示是针对“菜单”部分的，展示了如何创建一个可点击的菜单菜单中的项目。}electron.dialog.showMessageBox(focusedWindow,options,function(){})}}}]},{label:'window',role:'window',submenu:[{label:'minimize',accelerator:'CmdOrCtrl+M',role:'minimize'},{label:'close',accelerator:'CmdOrCtrl+W',role:'close'},{type:'separator'},{label:'重新打开窗口',加速器:'CmdOrCtrl+Shift+T',enabled:false,key:'reopenMenuItem',点击:function(){app.emit('activate')}}]},{label:'Help',role:'help',submenu:[{label:'Learnmore',click:function(){electron.shell.openExternal('http://electron.atom.io')}}]}]functionaddUpdateMenuItems(items,position){if(process.mas)returnconstversion=electron.app.getVersion复制代码()letupdateItems=[{label:`Version${version}`,enabled:false},{label:'正在检查更新',enabled:false,key:'checkingForUpdate'},{label:'检查更新',visible:false,key:'checkForUpdate',click:function(){require('electron').autoUpdater.checkForUpdates()}},{label:'重新启动并安装更新',enabled:true,visible:false,key:'restartToUpdate',点击:function(){require('electron').autoUpdater.quitAndInstall()}}]items.splice.apply(items,[position,0].concat(updateItems))}functionfindReopenMenuItem(){constmenu=Menu.getApplicationMenu()if(!menu)returnletreopenMenuItemmenu.items.forEach(function(item){if(item.submenu){item.submenu.items.forEach(function(item){if(item.key==='reopenMenuItem'){reopenMenuItem=item}})}})returnreopenMenuItem}if(process.platform==='darwin'){constname=electron.app.getName()模板。unshift({label:name,submenu:[{label:`about${name}`,role:'about'},{type:'separator'},{label:'service',role:'services',submenu:[]},{type:'separator'},{label:`Hide${name}`,accelerator:'Command+H',role:'hide'},{label:'隐藏其他',accelerator:'Command+Alt+H',role:'hideothers'},{label:'Showall',role:'unhide'},{type:'separator'},{label:'Exit',加速器：'Command+Q',click:function(){app.quit()}}]})//窗口菜单。template[3].submenu.push({type:'separator'},{label:'pre-all',role:'front'})addUpdateMenuItems(template[0].submenu,1)}if(process.platform==='win32'){consthelpMenu=template[template.length-1].submenuaddUpdateMenuItems(helpMenu,0)}app.on('ready',function(){constmenu=Menu.buildFromTemplate(template)Menu.setApplicationMenu(menu)})app.on('browser-window-created',function(){letreopenMenuItem=findReopenMenuItem()if(reopenMenuItem)reopenMenuItem.enabled=false})app.on('window-all-closed',function(){letreopenMenuItem=findReopenMenuItem()if(reopenMenuItem)reopenMenuItem.enabled=true})高级提示了解操作系统菜单差异。在为多个操作系统设计应用程序时，重要的是要注意应用程序菜单根据系统上的每个不同约定进行操作。例如，在Windows上，加速器设置为&。命名约定也各不相同，例如“设置”或“首选项”。以下是学习操作系统特定标准的资源：macOSWindows.aspx)Linux创建上下文菜单支持：Win、macOS、Linux|Process:Main您可以使用Menu和MenuItem模块来创建上下文菜单或右键单击菜单。您可以右键单击此应用程序中的任意位置，或单击示例按钮以查看示例上下文菜单。在此示例中，我们使用ipcRenderer模块在从渲染器进程显式调用它时显示上下文菜单。有关所有可用属性，请参阅上下文菜单事件文档。主进程constelectron=require('electron')constBrowserWindow=electron.BrowserWindowconstMenu=electron.MenuconstMenuItem=electron.MenuItemconstipc=electron.ipcMainconstapp=electron.appconstmenu=newMenu()menu.append(newMenuItem({label:'Hello'}))menu.append(newMenuItem({type:'separator'}))menu.append(newMenuItem({label:'Electron',type:'checkbox',checked:true}))app.on('browser-window-created',function(event,win){win.webContents.on('context-menu',function(e,params){menu.popup(win,params.x,params.y)})})ipc.on('show-context-menu',function(event){constwin=BrowserWindow.fromWebContents(event.sender)menu.popup(win)})rendererprocessconstipc=require('electron').ipcRenderer//告诉主进程在单击示例按钮时显示菜单constcontextMenuBtn=document.getElementById('context-menu')contextMenuBtn.addEventListener('click',function(){ipc.send('show-context-menu')})如果本文对您有帮助，请在下方点赞或加星GitHub：electron-api-demos-Zh_CN支持，谢谢。
