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