Electron-开发实践：注册快捷键

【前言】

本文介绍一下electron应用中如何注册快捷键

【主进程】

主进程注册快捷键比较简单，需要注意的是在app ready后使用，

常见键盘映射： https://www.electronjs.org/docs/latest/api/accelerator

// 注册
globalShortcut.register(shortcutKey, shortcutCallback);

// 取消注册
globalShortcut.unregister(shortcutKey);

另外在推出app时需要将所有注册的快捷键清理掉

app.on('will-quit', () => {
  globalShortcut.unregisterAll();
});

【渲染进程】

要在渲染进程注册快捷键稍微复杂一些，

这里封装了一个npm包，欢迎使用： https://code.insistime.com/#/qiao-x-shortcut

主进程初始化ipc监听

import { shortcutIPCInit } from 'qiao-x-shortcut';

shortcutIPCInit({
  shortcutCallbackName: () => console.log('shortcutCallbackName from main process'),
});

preload相关

shortcut-preload.js

// electron
import { ipcRenderer } from 'electron';

/**
 * shortcutGlobalIPC
 * @returns res
 */
export const shortcutGlobalIPC = async (shortcutKey, shortcutCallbackName) => {
  return await ipcRenderer.invoke('ipc-shortcut-global', shortcutKey, shortcutCallbackName);
};

preload.js

// electron
import { contextBridge } from 'electron';

// custom preload
import { shortcutGlobalIPC } from './shortcut-preload.js';

// preload
contextBridge.exposeInMainWorld('electron', {
  shortcutGlobalIPC,
});

渲染进程调用

await window.electron.shortcutGlobalIPC('Command+Control+X', 'shortcutCallbackName');

效果

在渲染进程将快捷键Command+Control+X注册好了，

效果如下，每次按快捷键，主进程都会有日志打印

shortcutCallbackName from main process
shortcutCallbackName from main process
shortcutCallbackName from main process