缺点：只能在应用程序被聚焦时触发（焦点在程序上，不只是显示），由于win一般不使用菜单，故只能用于mac上。

import { app, dialog, Menu } from 'electron'
import config from './index'
import global from './global'
const os = require('os')
const isMac = process.platform === 'darwin'
const menuConfig = [{
  label: app.name,
  submenu: [{
    label: '关于',
    accelerator: isMac ? 'Alt+Cmd+I' : 'Alt+Shift+I',
    click: function () {
      info()
  label: '设置',
  submenu: [{
    label: '快速重启',
    accelerator: 'CmdOrCtrl+F5',
    role: 'reload'
    label: '退出',
    accelerator: 'CmdOrCtrl+Q',
    role: 'quit'
  label: '开发者设置',
  submenu: [{
    label: '切换到开发者模式',
    accelerator: 'CmdOrCtrl+I',
    role: 'toggledevtools'
function info() {
  dialog.showMessageBox({
    title: '关于',
    type: 'info',
    message: 'vue-cli-electron',
    // detail: `版本信息：\nelectron版本：${process.versions.electron}\n当前系统：${os.type()} ${os.arch()} ${os.release()}\n当前版本：${process.env.VUE_APP_ENV}，${process.env.VUE_APP_VERSION}`,
    detail: `版本信息：\nelectron版本：${process.versions.electron}\n当前系统：${os.type()} ${os.arch()} ${os.release()}\n当前版本：${global.envConfig.VUE_APP_ENV}，${global.envConfig.VUE_APP_VERSION}`,
    noLink: true,
    buttons: ['确定']
菜单的快捷键注册是用accelerator添加的，当然你也可以根据系统的不同进行差异化处理，role的话是electron内置的行为，比如copy - 复制，paste - 粘贴等等，可以参考官方文档
在windows下我们把菜单隐藏掉，mac的话正常显示：
function setMenu(win) {
  let menu
  if (config.devToolsShow) {
    menu = Menu.buildFromTemplate(menuConfig)
    Menu.setApplicationMenu(menu)
    win.webContents.openDevTools({ mode: 'detach' })
  } else {
    if (isMac) {
      menu = Menu.buildFromTemplate(menuConfig)
      Menu.setApplicationMenu(menu)
    } else {
      Menu.setApplicationMenu(null)
    win.webContents.openDevTools({ mode: 'detach' })
    // win.webContents.closeDevTools()
主进程监听快捷键
globalShortcut
globalShortcut模块可以在操作系统中注册/注销全局快捷键，但是个人不推荐用这种方式来注册快捷键:
优点：响应级别最高，只要软件在运行中，无论软件处于什么状态（没聚焦甚至隐藏），都会响应。
缺点：如果快捷键已经被其他应用程序注册掉，那么会注册失败。注册成功后，由于其响应级别最高，所以会影响其他软件快捷键的使用，在启动软件后，其他软件的快捷键相同的话其他软件的快捷键无法生效。
// 主进程，渲染进程可以使用remote来注册：
const { app, globalShortcut } = require('electron')
app.whenReady().then(() => {
  const ret = globalShortcut.register('CommandOrControl+X', () => {
    console.log('CommandOrControl+X is pressed')
  if (!ret) {
    console.log('registration failed')
  // 检查快捷键是否注册成功
  console.log(globalShortcut.isRegistered('CommandOrControl+X'))
app.on('will-quit', () => {
  // 注销快捷键
  globalShortcut.unregister('CommandOrControl+X')
  // 注销所有快捷键
  globalShortcut.unregisterAll()
electron-localshortcut
第三方的npm包，api和globalShortcut基本一致，相对而言没那么激进，是针对于窗口注册的，故需传入窗口进行注册，当窗口没聚焦时，不会响应。
优点：针对于窗口的监听，响应需处于聚焦状态，基本上能满足大多数场景。
缺点：需要引入第三方包，页面有webview，且焦点在webview上时无法触发。
npm install --save electron-localshortcut
const electronLocalshortcut = require('electron-localshortcut')
const win = new BrowserWindow()
win.loadUrl('https://github.com')
win.show()
electronLocalshortcut.register(win, 'Ctrl+A', () => {
  console.log('You pressed ctrl & A')
// 检查快捷键是否注册成功
console.log(electronLocalshortcut.isRegistered(win, 'Ctrl+A'))
// 注销快捷键
electronLocalshortcut.unregister(win, 'Ctrl+A')
electronLocalshortcut.unregisterAll(win)
渲染进程监听快捷键
自己页面监听
实际上就是网页keyup的监听，可以用通信把键盘按键的信息传送到主进程。
当然你也可以在主进程中使用before-input-event，渲染进程中调度页面中的keydown和keyup事件之前，会发出before-input-event事件，可以在主进程捕获按键信息。
优点：针对于页面的监听，常用于某个页面的特殊按键监听。
缺点：页面有iframe或webview，且焦点在iframe或webview上时，无法触发（iframe可以触发before-input-event）。
渲染进程：
window.addEventListener('keyup', handleKeyPress, true)
function handleKeyPress(event) {
  $message.success(`keyup 监听${event.key}`)
  console.log(`You pressed ${event.key}`)
window.removeEventListener('keyup', handleKeyPress, true)
win.webContents.on('before-input-event', (event, input) => {
  if (input.control && input.key.toLowerCase() === 'i') {
    console.log('Pressed Control+I')
    event.preventDefault()
组合按键：当然一般来说快捷键都是组合按键的，我们可以借助第三方按键库来处理。
npm i mousetrap
渲染进程：
Mousetrap.bind('ctrl+k', function() { 
  $message.success(`Mousetrap ctrl+k`)
Mousetrap.unbind('ctrl+k')
webview或iframe嵌入网页监听
如果我们的页面中有webview或iframe，且焦点在webview或iframe上时，会导致我们的快捷键失效。
Menu菜单和globalShortcut不会失效。
electron-localshortcut：webview无效，iframe有效
keyup：webview无效，iframe无效，before-input-event：iframe有效。
这样看下来在应用webview的时候比较难处理，只有Menu菜单和globalShortcut对其生效，那么还有其他方式吗？
我们可以通过向webview注入preload.js来进行键盘按键的监听，然后将键盘信息回传给我们的渲染进程
vue.config.js中electronBuilder修改为：
preload: { preload: 'src/renderer/preload/ipcRenderer.js', webviewPreload: 'src/renderer/preload/webview.js' }
webviewPreload是我们向webview注入的js，当然你得新建对应文件，注意一下我们建立的文件是webview.js，编译后为webviewPreload.js，故我们注入的为webviewPreload.js。
注：webview 启动及Node integration启用须在主进程窗口webPreferences进行配置。
webview.js：
const { ipcRenderer } = require('electron')
window.addEventListener('keyup', handleKeyPress, true)
function handleKeyPress(event) {
    console.log(event.key)
    ipcRenderer.sendToHost('ipc-message', {
        data: event.key
渲染进程：
<webview ref="webviewRef" class="webview" src="https://www.baidu.com" :preload="state.preload" ></webview>
const { remote } = require('electron')
const path = require('path')
const webview = webviewRef.value
state.preload = path.resolve(remote.app.getAppPath(), './webviewPreload.js')
webview.addEventListener('ipc-message', webMessage)
webview.addEventListener('dom-ready', () => {
  webview.openDevTools()
function webMessage(event) {
  console.log('在此监听事件中接收webview嵌套页面所响应的事件', event)
  $message.success(`webview：${event.args[0].data}`)
简单梳理一下，我们把webviewPreload.js注入webview，通过这个js进行键盘的keyup监听，然后通过sendToHost把信息回传给渲染进程，渲染进程中获取回传的信息。
渲染进程是看不到我们注入js以及webview的打印，可以使用webview.openDevTools()，打开webview的控制台查看。
本例子就没说明组合键了，想用组合键请自行注入mousetrap进行操作。
本系列更新只有利用周末和下班时间整理，比较多的内容的话更新会比较慢，希望能对你有所帮助，请多多star或点赞收藏支持一下
本文地址：https://xuxin123.com/electron/menu-shortcut
本文github地址：链接