一、前言

本文主要介绍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，原生的功能要更加强大，比如说，复制、粘贴等，自己写这个功能可太费劲了-.-！！

三、后记

这里我们可以灵活的使用系统的菜单角色，让我们省去很多事情。

本篇完结！ 撒花！ 感谢观看！ 希望能帮助到你！