Electron 的菜单管理

33 min read

Electron 默认菜单

const {app, Menu} = require('electron')
const template = [
  {
    label: 'Edit',
    submenu: [
      {role: 'undo'},
      {role: 'redo'},
      {type: 'separator'},
      {role: 'cut'},
      {role: 'copy'},
      {role: 'paste'},
      {role: 'pasteandmatchstyle'},
      {role: 'delete'},
      {role: 'selectall'}
    ]
  },
  {
    label: 'View',
    submenu: [
      {role: 'reload'},
      {role: 'forcereload'},
      {role: 'toggledevtools'}, // !! 这里加入打开调试工具, 如果你不希望打开请去掉这行
      {type: 'separator'},
      {role: 'resetzoom'},
      {role: 'zoomin'},
      {role: 'zoomout'},
      {type: 'separator'},
      {role: 'togglefullscreen'}
    ]
  },
  {
    role: 'window',
    submenu: [
      {role: 'minimize'},
      {role: 'close'}
    ]
  },
  {
    role: 'help',
    submenu: [
      {
        label: 'Learn More',
        click () { require('electron').shell.openExternal('https://electronjs.org') }
      }
    ]
  }
]

if (process.platform === 'darwin') {
  template.unshift({
    label: app.getName(),
    submenu: [
      {role: 'about'},
      {type: 'separator'},
      {role: 'services', submenu: []},
      {type: 'separator'},
      {role: 'hide'},
      {role: 'hideothers'},
      {role: 'unhide'},
      {type: 'separator'},
      {role: 'quit'}
    ]
  })

  // Edit menu
  template[1].submenu.push(
    {type: 'separator'},
    {
      label: 'Speech',
      submenu: [
        {role: 'startspeaking'},
        {role: 'stopspeaking'}
      ]
    }
  )

  // Window menu
  template[3].submenu = [
    {role: 'close'},
    {role: 'minimize'},
    {role: 'zoom'},
    {type: 'separator'},
    {role: 'front'}
  ]
}

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

增加新的菜单

添加进的新菜单并在主进程里发信息给渲染进程

{
        label: '编辑',
        submenu: [
            {
                label: '新建',
                accelerator: 'CmdOrCtrl+0',
                click() {
                    mainWindow.webContents.send('keys');
                }
            }
        ]
    },

Electron 的所有内置的 role

undo: 撤销
redo:重做
cut:剪切
copy:复制
paste:粘贴
pasteAndMatchStyle
selectAll:全选
delete:删除
minimize:当前窗口最小化
close:关闭当前窗口
quit:退出应用程序
reload:刷新当前窗口
forceReload:强制刷新当前窗口,忽略缓存
toggleDevTools:打开或者关闭 devtool
togglefullscreen:进行全屏切换
resetZoom:重置窗口大小
zoomIn:放大窗口的10%.
zoomOut:缩小窗口的10%.