一文詳解Electron?快捷鍵使用技巧及示例
引言
Electron 中可以設置全局快捷鍵和應用快捷鍵，全局快捷鍵就是注冊到系統(tǒng)里面的，全局生效的快捷鍵；而應用快捷鍵是指當用戶使用該應用程序時才生效的快捷鍵，它們的實現邏輯是不一樣的，接下來就為大家詳細介紹。
全局快捷鍵
Electron 提供的 globalShortcut 模塊可以用于注冊或取消全局快捷鍵。使用方法為：
globalShortcut.register(accelerator, callback) // 注冊單個快捷鍵 globalShortcut.registerAll(accelerators, callback) // 批量注冊快捷鍵
其中參數的含義
- accelerator 必須是有效的快捷鍵字符串
- callback 是當注冊成功后，用戶按下快捷鍵之后執(zhí)行的回調函數
有效的快捷鍵由多個功能鍵和一個鍵碼中間用加號（+）組合而成，例如：
Ctrl + TCmdOrCtrl + Shift + Z
常用的功能鍵和鍵碼如下，設置快捷鍵的時候可以從功能鍵里面選擇多個，從鍵碼里面選擇一個：
| 功能鍵 | Cmd、Ctrl、CmdOrCtrl、Alt、Shift、Meta |
|---|---|
| 鍵碼 | 0~9、A~Z、F1~F24、Space、Tab、Backspace、Delete、Enter、Esc 等 |
不過有兩點需要注意：
- 如果快捷鍵字符串無效會直接報錯，因此建議在使用此方法的時候加 try catch 語句，防止程序崩潰。
- 該方法并不確保一定可以成功注冊全局快捷鍵，因為有可能被電腦上的其他應用提前占用了，此時并不會報錯，而是返回 false，因此我們可以通過返回值來判斷快捷鍵是否注冊成功。
示例代碼
const { app, globalShortcut } = require('electron')
app.whenReady().then(() => {
registerGlobalShortcut('Cmd+Alt+K')
})
function registerGlobalShortcut(shortcut) {
if (!shortcut) return false
let flag = false
try {
flag = globalShortcut.isRegistered(shortcut)
if (flag) return true
flag = globalShortcut.register(shortcut, () => {
console.log('toggle shortcut')
})
} catch (e) {
console.error(e)
}
return flag
}
注意 globalShortcut 的 API 需要在 app ready 之后才能調用，否則會直接退出：
Electron.app/Contents/MacOS/Electron exited with signal SIGTRAP
代碼中有一行判斷快捷鍵是否被注冊的函數：
globalShortcut.isRegistered(accelerator)
該方法只能檢測當前應用是否注冊過這個快捷鍵，并不能檢測到快鍵鍵是否被其他應用占用，即使被其他應用注冊過了，該方法依然會返回 false，只有當前應用成功注冊了這個全局快捷鍵，才會返回 true。
可以使用一些開源的工具來檢測快捷鍵是否被占用，例如 Windows 系統(tǒng)上的 OpenArk ，Mac 上的 Shortcut Detective。
取消快捷鍵注冊的方法：
globalShortcut.unregister(accelerator) // 取消注冊指定快捷鍵 globalShortcut.unregisterAll() // 取消注冊所有快捷鍵
應用快捷鍵
與全局快捷鍵不同，窗口快捷鍵是當窗口處于激活狀態(tài)時，按下按鍵之后觸發(fā)的行為。例如我們打開 word 或 photoshop 軟件，可以用 ctrl + z 撤銷上一步操作，用 ctrl + c 復制等。下圖是 vscode 的菜單和對應的快捷鍵：
在 Electron 應用中，也提供了對應的功能，在創(chuàng)建菜單（Menu）的時候，可以指定窗口快鍵鍵，示例代碼如下：
const { app, BrowserWindow, Menu } = require('electron')
app.whenReady().then(() => {
createWindow()
})
let win
function createWindow() {
win = new BrowserWindow({
width: 600,
height: 400,
})
const tpl = [
{
label: '自定義菜單',
submenu: [
{
label: '打開控制臺',
role: 'toggleDevTools',
},
{
label: '綁定快捷鍵',
accelerator: 'Ctrl+Shift+K',
click: () => {
console.log('menu shortcut pressed')
},
},
],
},
]
if (process.platform === 'darwin') {
tpl.unshift({ label: '' })
}
const menu = Menu.buildFromTemplate(tpl)
Menu.setApplicationMenu(menu)
}
最終的效果是：系統(tǒng)菜單項綁定了快捷鍵，如下圖所示：
當應用處于激活狀態(tài)時，如果用戶觸發(fā)了 Ctrl+Shift+K 快捷鍵，會執(zhí)行回調函數，打印相關信息：
再次強調，一定要在打開當前應用后觸發(fā)快捷鍵才行，如果在別的應用中觸發(fā)這個快捷鍵是沒有效果的，正如官方文檔中說的：
其實每個桌面軟件都有注冊了自己的「應用快捷鍵」，例如 ctrl+c、ctrl+v 這種通用的都屬于應用快捷鍵。在 Windows 系統(tǒng)上，還可以為每個窗口設置不同的快捷鍵。例如，你可以在一個窗口中設置 Ctrl+O 快捷鍵打開文件，在另一個窗口中設置 Ctrl+S 快捷鍵保存文件。
在開發(fā)的時候，可能會想做這樣的事情：注冊一個不在菜單中顯示的應用快捷鍵便于調試（例如打開控制臺或者上傳日志等），那有沒有辦法能夠做到不注冊菜單，只注冊快捷鍵呢？有兩種方案：
方法1：把菜單給隱藏掉
MenuItem 有個 visibile 屬性用于設置菜單項是否展示，默認是 true，設置成 false 即可，不過 2015 年的一個 issue 說，在 macOS 系統(tǒng)上如果隱藏菜單，快捷鍵就失效了，但是經過筆者實際測試，發(fā)現并沒有失效（macOS 12.6.3 系統(tǒng)），所以這種方法是可行的，而且非常簡單，只需要修改一行代碼即可：
const tpl = [
{
label: '自定義菜單',
submenu: [
{
label: '打開控制臺',
role: 'toggleDevTools',
},
{
label: '綁定快捷鍵',
accelerator: 'Ctrl+Shift+K',
visible: false, // 設置菜單項為隱藏菜單
click: () => {
console.log('menu shortcut pressed')
},
},
],
},
]
方法2：利用 webContents.on('before-input-event') 事件
具體的內容可參見這個 issue，利用的是 webContents 的 before-input-event 事件。示例代碼如下：
app.on('web-contents-created', function (event, wc) {
wc.on('before-input-event', function (event, input) {
if (input.key === 'x' && input.ctrl && !input.alt && !input.meta && !input.shift) {
// Do something for Ctrl-X
event.preventDefault()
}
})
})
社區(qū)有開發(fā)者基于此封裝了 electron-localshortcut 包，可以非常方便的給不同的窗口（BrowserWindow）綁定快捷鍵，使用起來更簡單：
const { app, BrowserWindow } = require('electron')
const localShortcut = require('electron-localshortcut')
app.whenReady().then(() => createWindow())
let win1, win2
function createWindow() {
win1 = new BrowserWindow({ width: 600, height: 400 })
win1.loadURL('https://www.baidu.com')
localShortcut.register(win1, 'Ctrl+Shift+K', () => {
console.log('register local shortcut for win1')
})
win2 = new BrowserWindow({ width: 600, height: 400 })
win2.loadURL('https://www.taobao.com')
localShortcut.register(win2, 'Ctrl+Shift+T', () => {
console.log('register local shortcut for win2')
})
}以上就是Electron 中的快捷鍵的詳細內容，更多關于Electron 快捷鍵的資料請關注腳本之家其它相關文章！
相關文章
這篇文章主要為大家介紹了Css-In-Js實現classNames庫源碼解讀，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-12-12
這篇文章主要介紹了微信小程序 自定義Toast實例代碼的相關資料,需要的朋友可以參考下2017-06-06
dotenv源碼解讀從.env文件中讀取環(huán)境變量
這篇文章主要為大家介紹了dotenv源碼解讀從.env文件中讀取環(huán)境變量示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-12-12
這篇文章主要介紹了利用JS創(chuàng)建一個錄屏功能，創(chuàng)建這個功能錢我們首先創(chuàng)建一個HTML文件，包含記錄按鈕和一個播放標簽，下面來看看創(chuàng)建的詳細過程2021-11-11
這篇文章主要介紹了微信小程序 首頁制作簡單實例的相關資料,需要的朋友可以參考下2017-04-04
網站上面有這種切換效果...2006-06-06
這篇文章主要為大家介紹了JS前端可視化canvas動畫原理及其推導實現，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-08-08
這篇文章主要為大家介紹了使用async?await處理錯誤的方法示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-07-07
這篇文章主要介紹了微信小程序 swiper組件構建輪播圖的實例的相關資料,如有疑問請留言或者到本站社區(qū)交流討論，需要的朋友可以參考下2017-09-09
這篇文章將從C++模版要解決的問題出發(fā)，引出TS泛型要解決的問題，并簡答介紹一些稍微高級的使用場景的相關資料,需要的朋友可以參考一下2021-10-10