菜单管理

菜单栏

在electron中可以方便的对应用菜单进行定义。

清除菜单

下面先来学习不显示默认菜单，在主进程main.js中定义以下代码。

const { BrowserWindow, app, Menu } = require('electron')
Menu.setApplicationMenu(null)

我们需要用到 Menu模块、MenuItem 菜单项与 accelerator 快捷键知识。

const { app, Menu } = require('electron')

//是否是苹果系统
const isMac = process.platform === 'darwin'

const template = [
  {
    label: 'banmashou',
    submenu: [
      {
        label: '打开新窗口',
        click: () => {
          const win = new BrowserWindow({
            width: 300,
            height: 300,
          })
          win.loadURL('https://www.banmashou.com')
        },
      },
      //分隔线
      {
        type: 'separator',
      },
      {
        label: '退出',
        click: async () => app.quit(),
        //定义快捷键
        accelerator: 'CommandOrControl+q',
      },
      //渲染进程触发主进程通信
      {
        click: () => mainWindow.webContents.send('update-counter', 1),
        label: 'Increment',
      },
      isMac
        ? { label: '关闭', role: 'close' }
        : { role: 'quit' },
    ],
  },
  {
    label: '在线文档',
    submenu: [
      {
        label: '斑马兽',
      },
    ],
  },
]

const menu = Menu.buildFromTemplate(template)
Menu.setApplicationMenu(menu)

右键菜单

electron 可以定义快捷右键菜单，需要预加载脚本与主进程结合使用

main.js 主进程定义ipc事件，当preload.js 触发事件时显示右键菜单

ipcMain.on('show-context-menu', (event) => {
  const popupMenuTemplate = [
    { label: '退出', click: () => app.quit() },
  ]

  const menu = Menu.buildFromTemplate(
    popupMenuTemplate,
  )
  menu.popup(
    BrowserWindow.fromWebContents(event.sender),
  )
})

preload.js 预加载脚本定义，用于触发右键事件，然后通过IPC调用主进程显示右键菜单

window.addEventListener('contextmenu', (e) => {
  e.preventDefault()
  ipcRenderer.send('show-context-menu')
})