Electron可以使用html来开发其中显示的内容。有些菜单也可以画成html的形式。当你点击时，你可以调用相关的API。虽然施工方便，但风格可以任意调整。但它实际上是一个模拟菜单，而不是应用程序的原生菜单。这个模拟菜单有以下不足：html模拟生成，非原生。每个功能都需要通过自己的代码调用或实现，实际的原生菜单有很多预设的行为可以直接使用。Mac和Linux上的模拟菜单不适合顶部菜单栏。html模拟菜单无法生成系统托盘菜单。下面将介绍Electron中的原生菜单。菜单类型Electron中有三种类型的菜单：应用程序菜单、上下文菜单和托盘菜单。应用程序菜单应用程序菜单是应用程序上方的菜单。构建一个菜单只需要一个数组，数组中的每个成员都是一个菜单项，每个菜单项都有一些指定的配置。以下面的代码为例：constmyMenuTemplate=[{//设置菜单项文本label:'File',//设置子菜单submenu:[{label:'AboutElectron',//设置菜单角色role:'about',//about（关于），该值仅适用于MacOSX系统//当点击事件的role属性可以被识别时点击事件无效click:()=>{varaboutWin=newBrowserWindow({width:300,height:200,parent:win,modal:true});aboutWin.loadFile('about.html');}},{//设置菜单的类型为分隔条type:'separator'},{label:'Close',//设置菜单热键加速器:'Command+Q',click:()=>{赢.关闭();}}]},{label:'Edit',submenu:[{label:'Copy',click:()=>{win.webContents.insertText('Copy');}},{label:'Cut',click:()=>{win.webContents.insertText('Cut');}},{type:'separator'},{label:'find',一个加速器：'Command+F'，点击：()=>{win.webContents.insertText('Find');}},{label:'Replace',accelerator:'Command+R',click:()=>{win.webContents.insertText('replace');}}]}];以上是一个菜单的配置，常用的配置如下：id可选，指定菜单的id，如果需要使用，可以直接通过id获取类型菜单类型，可选值是正常的，分隔符，子菜单，复选框或单选框。label用于配置菜单上显示的文本。click菜单点击处理函数。checked是否勾选，仅对类型为checkbox或radio的菜单项有效。accelerator此菜单的快捷键。图标菜单项上的图标。需要特别注意的是图标不会自动缩放，必须提供合适大小的图片。兼容的高DPI设备必须根据命名约定提供图标。指高分辨率作用是指该菜单的一些系统预定义行为，如复制、粘贴、最小化、最大化等，当值系统可以识别时，配置的点击事件将失效。该配置的值在Mac下有更多支持，详见菜单作用。菜单项的更多配置，请参考MenuItems要应用菜单，必须使用Menu类，Menu类的定义放在electron命名空间下。Menu类有如下两个静态方法，用于生成和应用菜单，可以用newMenu()setApplicationMenu(menu/*menuobject*/)方法替换，将其用作应用程序菜单。加载文件并应用菜单代码如下：BrowserWindow({file:'index.html'});win.loadFile('./index.html');//应用上面准备的菜单配置来生成consttemplate=myMenuTemplate;//创建菜单对象constmenu=Menu.buildFromTemplate(template);//设置应用程序菜单Menu.setApplicationMenu(menu);win.on('closed',()=>{console.log('closed');win=null;});}app.on('ready',createWindow);app.on('activate',()=>{if(win===null){createWindow();}});基于以上代码，在window下可以看到如下效果：Mac下效果如下：window下，我们自定义about效果：而在Mac下，about是系统直接提供的：效果图很明显，就像window下的配置一样，但是在Mac上明显不同，第一个文件菜单没有了，编辑器里多了两个菜单项。这是Mac系统本身的一个特点。Mac下第一个菜单的文字显示必须是应用程序的名称。这里是用electron命令启动的，所以是electron。可以理解为在Mac下为第一个菜单项配置标签是无效的。（想想你Mac的第一个菜单，大部分都是应用程序的名字，比如Safari，PhotoShopCC）如果你有强迫症，一定要更改需要修改应用程序包的Info.plist文件，请参考上面的AboutInformationPropertyListFiles是默认配置应用程序菜单的形式。但是在实际场景中，往往需要对菜单进行动态调整。例如，某个菜单在某些状态下不可用，进入某个状态时有一个额外的菜单。此时我们需要能够调整菜单项的可用性或可见性，并提供动态添加新菜单的能力。调整菜单项状态的相关配置如下：menuItem.enabled布尔值标识菜单项是否启用。menuItem.visible一个布尔值，指示菜单项是否可见。menuItem.checkedBoolean标识菜单项是否被选中。获取菜单项，可以使用菜单对象的getMenuItemById(id)方法，该方法会返回对应的菜单项，只需调整菜单项的相关属性即可。要添加菜单项，可以先使用newMenuItem()建立一个菜单项，然后调用菜单实例的如下方法插入：menu.append(menuItem)在菜单中添加一个菜单。menu.insert(pos,menuItem)在菜单的指定位置添加一个新的菜单项。在windows下，点击切换显示和切换启用。对于右键菜单，构造菜单的方法和上面提到的应用菜单一样，都是通过菜单项的配置数组生成的。但是，不再需要使用setApplicationMenu()方法使其成为上下文菜单。只需要构建菜单，然后监听contextmenu事件，调用popup({x,y})在指定位置显示菜单即可。一个不完整的代码示例如下：constmenu=newMenu(/*菜单配置数组*/);document.getElementById('panel').addEventListener('contextmenu',(ev)=>{event.preventDefault();const{x,y}=ev;//弹出上下文菜单menu.popup({x,y});returnfalse;});当上下文菜单在某些情况下需要关闭时，只需调用菜单对象的colsePopup(browserWindow)方法即可。如果应用涉及多个窗口，需要关闭其他窗口的上下文菜单，可以将这个窗口作为参数传递，默认是操作当前窗口。其余与应用程序菜单完全相同。托盘菜单托盘菜单是点击窗口右下角时的菜单，在mac上是点击右上角小图标时的菜单。但是，默认应用程序不会显示在托盘中。如果需要展示，需要使用Electron中的Tray类来创建。使用以下演示代码创建托盘图标并将其与单击的托盘菜单相关联。const{app,Menu,Tray,BrowserWindow}=require('electron')lettray;letcontextMenu;functioncreateWindow(){win=newBrowserWindow({file:'index.html'});win.loadFile('./index.html');//创建一个托盘对象，并指定托盘图标tray=newTray('/images/tray.png');//为托盘图标创建上下文菜单contextMenu=Menu.buildFromTemplate([{label:'copy',role:'copy'},{label:'cut',role:'cut'},{label:'paste',角色:'粘贴'}]);//设置托盘图标Tiptexttray.setToolTip('ThisisElectron'sapplicationtrayicon')//关联托盘图标和上下文菜单tray.setContextMenu(contextMenu)win.on('closed',()=>{tray.destroy();win=null;});}app.on('ready',createWindow)app.on('activate',()=>{if(win===null){createWindow();}});按键操作说明如下：使用newTray(image)创建应用程序托盘。使用setToolTip(toolTip)将工具提示添加到托盘。配置菜单并使用setContextMenu将菜单与托盘相关联。这一步是必须的。托盘图标必须有上下文菜单才能显示演示效果如下：Windows效果：Mac：更多系统托盘Tray请参考官网文件系统托盘在不同系统有不同的交互方案：直接点击windows中的应用程序托盘激活当前应用程序，右击显示托盘菜单。在Mac中，左键单击通常用于显示托盘菜单。如果您需要您的应用程序在各个平台上具有相同的交互方式，您可以手动使用代码进行调整。涉及到以下事件和方法：click当托盘被点击时触发right-click当托盘被右键点击时触发tray.popUpContextMenu([menu,position])弹出托盘图标的上下文菜单。如果传入menu参数，则弹出菜单，而不是托盘图标的上下文菜单。参数position仅在Windows上可用，并具有默认值(0,0)。windows系统托盘的气泡通知应用程序托盘是windows系统中一个非常实用且常用的功能——气泡通知，只需使用托盘的displayBalloon()方法即可，如下演示：tray.displayBalloon({//icon:'./images/icon.png',//通知图标（可选）title:'气泡通知标题',content:'气泡通知内容'});tray.on('balloon-show',()=>{console.log('气泡通知显示');});//添加气泡消息点击事件tray.on('balloon-click',()=>{console.log('气球通知被用户点击');});//添加气泡消息关闭事件托盘.on('balloon-closed',()=>{console.log('balloon-closed');});气泡通知也有点击的功能，所以系统托盘也有如下事件：balloon-show，当显示气泡消息时触发；balloon-click，点击气泡消息时触发；balloon-closed，当气泡消息关闭时触发。需要注意的是：balloon-click和balloon-closed是互斥的，只会触发其中一个：点击气泡消息后，气泡消息会立即关闭，此时balloon-closed不会触发事件；仅当气球消息在显示几秒后自动关闭时才会触发气球关闭事件。效果图如下：以上是Electron原生菜单的常用使用方法说明。更深入的内容请参考以下内容：ElectronMenuMenuItemTraynativeImage
