electron快捷键

我们分为在主进程中注册快捷键和在渲染进程中注册快捷键

在主进程中我们有两种方式

一利用[Menu]来模拟快捷键,只有app获得焦点时才生效,很少使用

const { Menu, MenuItem } = require('electron')
const menu = new Menu()

menu.append(new MenuItem({
  label: 'Print',
  accelerator: 'CmdOrCtrl+P',
  click: () => { console.log('time to print stuff') }
}))

二就是全局快捷键（意思就是不强求app获得焦点）,r所以这就不是模拟菜单事件了，我们要监听键盘，因为快捷键的根本操作就是响应键盘的按键
我们可以用globalShortcut来实现

引用globalShortcut模块

const { app, BrowserWindow, ipcMain, globalShortcut } = require('electron');

注册快捷键（在mac10.14 上，客户端没有被信任操作音视频的快捷键失效

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()
  })

2.在渲染进程中我们也有二种方式
一可以利用浏览窗口监听键盘事件,这是一种常规的方式，自己判断什么键按下

window.addEventListener('keyup', doSomething, true)

注意第三个参数 true，这意味着当前监听器总是在其他监听器之前接收按键，以避免其它监听器调用 stopPropagation()。

二我们可以利用第三方模块比如MOUSETRAP

安装模块,我们也可以用Script标签引入


npm install mousetrap --save

使用(我们在html页面引入index.js文件，文件内容如下)

const Mousetrap = require('mousetrap');

// #region 快捷键
// single keys
Mousetrap.bind('esc', () => {
   console.log('escape');
}, 'keyup');
Mousetrap.bind('4', () => {
   console.log('4');
})
Mousetrap.bind("?", () => {
   console.log('show shortcuts!');
});
// combinations
Mousetrap.bind('command+shift+k', () => {
   console.log('command shift k');
});
// map multiple combinations to the same callback
Mousetrap.bind(['command+k', 'ctrl+k'], () => {
   console.log('command k or control k');
   // return false to prevent default browser behavior
   // and stop event from bubbling
   return false;
});

// gmail style sequences
Mousetrap.bind('g i', () => {
   console.log('go to inbox');
});
Mousetrap.bind('* a', () => {
   console.log('select all');
});

// konami code!
Mousetrap.bind('up up down down left right left right b a enter', () => {
   console.log('konami code');
});
// #endregion

html文件

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <meta http-equiv="X-UA-Compatible" content="ie=edge">
   <title>Document</title>
</head>
<body>
   <p>This is test pag!</p>
   <script type="text/javascript" src="./views/js/index.js"></script>
</body>
</html>

开发工作中如果要主进程响应的就用全局快键盘，如果是页面中的快键操作，就可以直接用mousetrap。