告别键盘党和鼠标党，巧用 Electron 菜单与快捷键

2023-12-20 11:18:53

Electron 菜单

Electron 菜单是 Electron 应用中用于组织和显示命令的元素。它通常位于应用程序窗口的顶部，可以包含多个菜单项，每个菜单项可以包含子菜单或直接执行某个命令。

1.1 创建菜单

在 Electron 中创建菜单非常简单，只需要使用 Menu 模块即可。以下是一个创建菜单的示例代码：

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

const template = [
  {
    label: '文件',
    submenu: [
      {
        label: '新建',
        click: () => { console.log('新建文件'); }
      },
      {
        label: '打开',
        click: () => { console.log('打开文件'); }
      },
      {
        label: '保存',
        click: () => { console.log('保存文件'); }
      },
      {
        label: '另存为',
        click: () => { console.log('另存为'); }
      }
    ]
  },
  {
    label: '编辑',
    submenu: [
      {
        label: '撤销',
        click: () => { console.log('撤销'); }
      },
      {
        label: '重做',
        click: () => { console.log('重做'); }
      },
      {
        label: '剪切',
        click: () => { console.log('剪切'); }
      },
      {
        label: '复制',
        click: () => { console.log('复制'); }
      },
      {
        label: '粘贴',
        click: () => { console.log('粘贴'); }
      }
    ]
  },
  {
    label: '帮助',
    submenu: [
      {
        label: '关于',
        click: () => { console.log('关于'); }
      }
    ]
  }
];

const menu = Menu.buildFromTemplate(template);

Menu.setApplicationMenu(menu);

这段代码首先创建了一个菜单模板，然后使用 Menu.buildFromTemplate() 方法将模板转换为一个 Menu 对象，最后使用 Menu.setApplicationMenu() 方法将菜单设置为应用程序的菜单。

1.2 自定义菜单

除了使用默认的菜单模板外，您还可以自定义菜单的外观和行为。例如，您可以设置菜单项的图标、禁用某些菜单项或添加自定义菜单项。

以下是一个自定义菜单的示例代码：

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

const template = [
  {
    label: '文件',
    submenu: [
      {
        label: '新建',
        click: () => { console.log('新建文件'); },
        icon: './images/new.png'
      },
      {
        label: '打开',
        click: () => { console.log('打开文件'); },
        icon: './images/open.png'
      },
      {
        label: '保存',
        click: () => { console.log('保存文件'); },
        icon: './images/save.png'
      },
      {
        label: '另存为',
        click: () => { console.log('另存为'); },
        icon: './images/save-as.png'
      },
      {
        type: 'separator'
      },
      {
        label: '退出',
        click: () => { app.quit(); }
      }
    ]
  },
  {
    label: '编辑',
    submenu: [
      {
        label: '撤销',
        click: () => { console.log('撤销'); },
        accelerator: 'CmdOrCtrl+Z'
      },
      {
        label: '重做',
        click: () => { console.log('重做'); },
        accelerator: 'CmdOrCtrl+Y'
      },
      {
        type: 'separator'
      },
      {
        label: '剪切',
        click: () => { console.log('剪切'); },
        accelerator: 'CmdOrCtrl+X'
      },
      {
        label: '复制',
        click: () => { console.log('复制'); },
        accelerator: 'CmdOrCtrl+C'
      },
      {
        label: '粘贴',
        click: () => { console.log('粘贴'); },
        accelerator: 'CmdOrCtrl+V'
      }
    ]
  },
  {
    label: '帮助',
    submenu: [
      {
        label: '关于',
        click: () => { console.log('关于'); }
      }
    ]
  }
];

const menu = Menu.buildFromTemplate(template);

Menu.setApplicationMenu(menu);

在这段代码中，我们为菜单项设置了图标和快捷键。我们还添加了一个分隔符来分隔不同的菜单项组。

2. Electron 快捷键

Electron 快捷键是用于触发特定命令的键盘组合。快捷键可以与菜单项关联，也可以独立使用。

2.1 创建快捷键

在 Electron 中创建快捷键非常简单，只需要使用 globalShortcut 模块即可。以下是一个创建快捷键的示例代码：

const {globalShortcut} = require('electron');

globalShortcut.register('CmdOrCtrl+N', () => { console.log('新建文件'); });
globalShortcut.register('CmdOrCtrl+O', () => { console.log('打开文件'); });
globalShortcut.register('CmdOrCtrl+S', () => { console.log('保存文件'); });
globalShortcut.register('CmdOrCtrl+Q', () => { app.quit(); });

这段代码使用 globalShortcut.register() 方法注册了四个快捷键，分别用于触发新建文件、打开文件、保存文件和退出应用程序。

2.2 自定义快捷键

除了使用默认的快捷键外，您还可以自定义快捷键的组合。例如，您可以将 CmdOrCtrl+N 快捷键改为 Ctrl+N。

以下是一个自定义快捷键的示例代码：

const {globalShortcut} = require('electron');

globalShortcut.register('Ctrl+N', () => { console.log('新建文件'); });
globalShortcut.register('Ctrl+O', () => { console.log('打开文件'); });
globalShortcut.register('Ctrl+S', () => { console.log('保存文件'); });
globalShortcut.register('Ctrl+Q', () => { app.quit(); });