一、前言
本文主要介绍electron应用如何自定义菜单，以及在哪些地方可以使用Menu模块。一般情况menu只是设置给mac系统的，因为windows系统在应用做了无边框之后，是不会显示应用菜单的（这里Linux暂时不考虑）。
点击查看Menu详情
二、适用场景及实施
1.应用内菜单自定义
这个菜单是指的这里
这里主要用到
Menu
的两个Api，分别是
Menu.buildFromTemplate(template)
和
Menu.setApplicationMenu(menu)
。
这里我们这样实现, 首先创建一个ElectronMenu.js文件，用于存放创建菜单。
// ElectronMenu.js
import { app, Menu } from 'electron'
// 设置菜单栏, win表示当前窗口实例
export function createMenu (win) {// darwin表示macOS，这里我们选择对macOS系统的创建应用内菜单if (process.platform === 'darwin') {const template = [{label: '我的超级应用',submenu: [{ label: '关于', accelerator: 'CmdOrCtrl+I', role: 'about' },// 这里可以自定义菜单项，如下可以与渲染进程通信{ label: '检测更新',click: () => { win.webContents.send('menuCheckUpdate') }，accelerator: '这里可以设置快捷键',enabled: false '这里设置是否可点击'},{ type: 'separator' }, // 分割线{ label: '隐藏', role: 'hide' },{ label: '隐藏其他', role: 'hideOthers' },{ type: 'separator' },{ label: '服务', role: 'services' },{ label: '退出', accelerator: 'Command+Q', click: () => {app.quit()} }]},{label: '编辑',submenu: [{ label: '复制', accelerator: 'CmdOrCtrl+C', role: 'copy' },{ label: '粘贴', accelerator: 'CmdOrCtrl+V', role: 'paste' },{ label: '剪切', accelerator: 'CmdOrCtrl+X', role: 'cut' },{ label: '撤销', accelerator: 'CmdOrCtrl+Z', role: 'undo' },{ label: '重做', accelerator: 'Shift+CmdOrCtrl+Z', role: 'redo' },{ label: '全选', accelerator: 'CmdOrCtrl+A', role: 'selectAll' }]},{label: '窗口',role: 'window',submenu: [{label: '缩放',role: 'Zoom'}, {label: '最小化',role: 'minimize'}, {label: '关闭',role: 'close'}]},{label: '帮助',role: 'help',submenu: [{label: '开发者工具',role: 'toggledevtools',accelerator: 'CommandOrControl+alt+i'}]}]const menu = Menu.buildFromTemplate(template)Menu.setApplicationMenu(menu)} else {// windows及linux系统不设置菜单Menu.setApplicationMenu(null)}
}
之后再background.js中引入一下
import { createMenu } from './ElectronMenu'
// 设置菜单栏, win是窗口实例
createMenu(win)
这样就实现了应用内的菜单设置。
这里能够查看关于菜单项的详情，例如是否可点击，设置快捷键等。
点击查看MenuItem详情
。
这里能够查看关于菜单项的
role
有哪些
点击查看role详情
。
这里最好给任何一个菜单指定
role
去匹配一个标准角色, 而不是尝试在
click
函数中手动实现该行为。 内置的
role
行为将提供最佳的原生体验。
2.系统托盘添加Menu
这个菜单指的这里
这里主要是在设置系统托盘（Tray）的文件中，如下
import { app, Tray, Menu } from 'electron'
let tray = new Tray()
const contextMenu = Menu.buildFromTemplate([{ label: '退出', click: () => { app.quit() } }
])
tray.setContextMenu(contextMenu)
3.右键菜单
// 主进程
import { Menu, ipcMain } from 'electron';
const contextMenuTemplate = [{label: '剪切',role: 'cut',},{label: '复制',role: 'copy',},{label: '粘贴',role: 'paste',}
];
const contextMenu = Menu.buildFromTemplate(contextMenuTemplate);
// 监听右键事件
ipcMain.on('contextMenu', (e, arg) => {// 这里可以指定菜单出现的位置contextMenu.popup(）
})
之后在渲染进程中
const { ipcRenderer } = require("electron")
// 监听鼠标右键
window.addEventListener("contextmenu", (e) => { e.preventDefault(); ipcRenderer.send('contextMenu', e)
});
这里可以不止设置右键菜单的事件，也可以在你渲染进程需要的时候，去唤起系统自带的菜单。毕竟系统自带的
role
，原生的功能要更加强大，比如说，复制、粘贴等，自己写这个功能可太费劲了-.-！！
三、后记
这里我们可以灵活的使用系统的菜单角色，让我们省去很多事情。
本篇完结！ 撒花！ 感谢观看！ 希望能帮助到你！
最后，最近找到一个VUE的文档，它将VUE的各个知识点进行了总结，整理成了《Vue 开发必须知道的36个技巧》。内容比较详实，对各个知识点的讲解也十分到位。
有需要的小伙伴，可以点击下方卡片领取，无偿分享