[TOC] [https://electronjs.org/docs/api/menu](https://electronjs.org/docs/api/menu) ## 技巧 ## 接口 `let menu = new Menu() ` ### 静态方法 #### [`Menu.setApplicationMenu(menu)`设置菜单](https://electronjs.org/docs/api/menu#menusetapplicationmenumenu)[](https://electronjs.org/docs/api/menu#menusetapplicationmenumenu "Permalink") * 在windows和Linux系统中,使用`null`参数将会移除菜单栏, 但在MacOS系统中则不会有任何效果; 注意:这个**API**调用要在程序的`ready`事件模块之后; #### [`Menu.buildFromTemplate(template)`](https://electronjs.org/docs/api/menu#menubuildfromtemplatetemplate)[](https://electronjs.org/docs/api/menu#menubuildfromtemplatetemplate "Permalink") `template` 参数 是 `menu` 的数组 #### [`Menu.getApplicationMenu() `](https://electronjs.org/docs/api/menu#menugetapplicationmenu)[](https://electronjs.org/docs/api/menu#menugetapplicationmenu "Permalink") ### 实例方法 #### [`menu.popup(options)`](https://electronjs.org/docs/api/menu#menupopupoptions)[](https://electronjs.org/docs/api/menu#menupopupoptions "Permalink") * `options`Object (可选) * `window`[BrowserWindow](https://electronjs.org/docs/api/browser-window)(可选) - 默认为选中窗口. * `x`数字 (可选)-默认值是当前鼠标光标的位置。如果声明了`y`, 则必须声明。 * `y`数字 (可选)-默认值是当前鼠标光标的位置。如果声明了`x`, 则必须声明。 * `positioningItem`数字 (可选)*macOS*\-要在指定坐标下的鼠标光标下定位的菜单项的索引。默认值为-1。 * `callback`Function (optional) - 会在菜单关闭后被调用. * 将此菜单作为 browserWindow中的上下文菜单弹出,即在界面中弹出 #### `menu.closePopup([browserWindow])` 关闭`browserWindow`中的上下文菜单。 #### `menu.append(menuItem)` 追加到菜单 * `menuItem`[菜单项](https://electronjs.org/docs/api/menu-item) #### `menu.insert(pos, menuItem)` 将`menuItem`插入菜单的`pos`位置。 * `pos`Integer * `menuItem`[菜单项](https://electronjs.org/docs/api/menu-item) ### 实例事件 #### 'menu-will-show' 调用`menu.popup()`事件时触发该事件 #### 'menu-will-close' ### 实例属性 #### menu.items 返回`MenuItem []`数组。 ## 案例 ### 取消菜单栏 ``` const {Menu} = require("electron"); Menu.setApplicationMenu(null); // 设置菜单部分 ``` ### 自定义菜单 main.js ``` const {app,BrowserWindow,Menu,shell} = require("electron"); app.on("ready",()=>{ buildMenu(); createWindow(); }); app.on('browser-window-created', function () { let reopenMenuItem = findReopenMenuItem(); if (reopenMenuItem) reopenMenuItem.enabled = false }) app.on('window-all-closed', function () { let reopenMenuItem = findReopenMenuItem(); if (reopenMenuItem) reopenMenuItem.enabled = true app.quit() }) //定义一个创建浏览器窗口的方法 function createWindow(){ // 创建一个浏览器窗口对象,并指定窗口的大小 mainWindow=new BrowserWindow({ width:1200, height:800, nodeIntegration:true }); if (debug){ mainWindow.webContents.openDevTools(); // mainWindow.maximize();//最大化运行 } // 通过浏览器窗口对象加载index.html文件,同时也是可以加载一个互联网地址的 mainWindow.loadURL('file://'+__dirname+'/demo/hmtl/index.html'); // 同时也可以简化成:mainWindow.loadURL('./index.html'); // 监听浏览器窗口对象是否关闭,关闭之后直接将mainWindow指向空引用,也就是回收对象内存空间 mainWindow.on("closed",function(){ mainWindow = null; }); } /** * 自定义菜单 */ function buildMenu() { let template = [ { label: 'Edit ( 操作 )', submenu: [{ label: 'Copy ( 复制 )', accelerator: 'CmdOrCtrl+C', role: 'copy' }, { label: 'Paste ( 粘贴 )', accelerator: 'CmdOrCtrl+V', role: 'paste' }, { label: 'Reload ( 重新加载 )', accelerator: 'CmdOrCtrl+R', click: function (item, focusedWindow) { if (focusedWindow) { // on reload, start fresh and close any old // open secondary windows if (focusedWindow.id === 1) { BrowserWindow.getAllWindows().forEach(function (win) { if (win.id > 1) { win.close() } }) } focusedWindow.reload() } } }] }, { label: 'Window ( 窗口 )', role: 'window', submenu: [{ label: 'Minimize ( 最小化 )', accelerator: 'CmdOrCtrl+M', role: 'minimize' }, { label: 'Close ( 关闭 )', accelerator: 'CmdOrCtrl+W', role: 'close' }, { label: '切换开发者工具', 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: 'Help ( 帮助 ) ', role: 'help', submenu: [{ label: 'FeedBack ( 意见反馈 )', click: function () { shell.openExternal('https://forum.iptchain.net') } },{ label:"测试打印日志", click(){ console.log("测试打印日志"); } } ] } ]; const menu = Menu.buildFromTemplate(template); Menu.setApplicationMenu(menu) // 设置菜单部分 /** * 增加更新相关的菜单选项 */ function addUpdateMenuItems (items, position) { if (process.mas) return; const version = app.getVersion(); let updateItems = [{ label: `Version ${version}`, enabled: false }, { label: 'Checking for Update', enabled: false, key: 'checkingForUpdate' }, { label: 'Check for Update', visible: false, key: 'checkForUpdate', click: function () { require('electron').autoUpdater.checkForUpdates() } }, { label: 'Restart and Install Update', enabled: true, visible: false, key: 'restartToUpdate', click: function () { require('electron').autoUpdater.quitAndInstall() } }] items.splice.apply(items, [position, 0].concat(updateItems)) } // 针对Mac端的一些配置 if (process.platform === 'darwin') { const name = electron.app.getName(); template.unshift({ label: name, submenu: [{ label: 'Quit ( 退出 )', accelerator: 'Command+Q', click: function () { app.quit() } }] }) // Window menu. template[3].submenu.push({ type: 'separator' }, { label: 'Bring All to Front', role: 'front' }) addUpdateMenuItems(template[0].submenu, 1) } // 针对Windows端的一些配置 if (process.platform === 'win32') { const helpMenu = template[template.length - 1].submenu; addUpdateMenuItems(helpMenu, 0) } } /** * 自定义菜单 * @returns {*} */ function findReopenMenuItem () { const menu = Menu.getApplicationMenu(); if (!menu) return; let reopenMenuItem menu.items.forEach(function (item) { if (item.submenu) { item.submenu.items.forEach(function (item) { if (item.key === 'reopenMenuItem') { reopenMenuItem = item } }) } }) return reopenMenuItem; } ```