- 我們分為在主進程中注冊快捷鍵和在渲染進程中注冊快捷鍵
- 在主進程中我們有兩種方式
一 利用[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。