electron 监听键盘事件

源码资源网 · 发表于昨天 09:35

electron 监听键盘事件
1. electron 键盘事件监听
electron 中可以使用globalShortcut监听键盘事件，具体可以查看 electron 官方文档，有详细的介绍

注册事件：globalShortcut.register
判断是否注册成功：globalShortcut.isRegistered
注销注册事件：globalShortcut.unregisterAll

在 main.js 主进程文件中进行注册操作，具体代码如下所示：

const { globalShortcut } = require("electron");
const createWindow = () => {
const win = new BrowserWindow({});
// 在创建窗口时，注册键盘事件
handleRegister();
};
const handleRegister = () => {
// 注册一个'Up'监听器
globalShortcut.register("Up", () => {
// 发送消息通知
win.webContents.send("move-up");
});
// 检查'Up'是否注册成功
console.log("键盘上注册成功", globalShortcut.isRegistered("Up"));
globalShortcut.register("Down", () => {
// 发送消息通知
win.webContents.send("move-down");
});
// 检查'down'是否注册成功
console.log("键盘下注册成功", globalShortcut.isRegistered("Down"));
};
app.whenReady().then(() => {
// 调用该函数来打开窗口
createWindow();
app.on("activate", () => {
if (BrowserWindow.getAllWindows().length === 0) createWindow();
});
});
app.on("will-quit", () => {
// 在应用即将退出时，注销所有快捷键，以避免内存泄漏
globalShortcut.unregisterAll();
});

复制代码

2. react 接受事件通知
electron 键盘事件注册后，需要在 react 页面中进行监听，如下创建了一个 useKeyboardController.tsx 进行统一处理
将键盘控制逻辑封装在了自定义的 hooks 中
它接受两个参数：handleMoveUp 和 handleMoveDown
然后在 useEffect 钩子中注册了监听器来接收来自主进程的事件
并在组件卸载时删除了这些监听器

import { useEffect } from "react";
// 使用了 ipcRenderer 来监听来自主进程的事件
const { ipcRenderer } = window.require("electron");
const useKeyboardController = (
handleMoveUp: Function,
handleMoveDown: Function
) => {
useEffect(() => {
if (ipcRenderer && handleMoveUp && handleMoveDown) {
// 处理上键逻辑
const handleMoveUpWrapper = () => handleMoveUp();
// 处理下键逻辑
const handleMoveDownWrapper = () => handleMoveDown();
// 事件监听
ipcRenderer.on("move-up", handleMoveUpWrapper);
ipcRenderer.on("move-down", handleMoveDownWrapper);
return () => {
// 取消事件监听
ipcRenderer.removeListener("move-up", handleMoveUpWrapper);
ipcRenderer.removeListener("move-down", handleMoveDownWrapper);
};
}
}, [handleMoveUp, handleMoveDown]);
};
export default useKeyboardController;

复制代码

3. 上下键选中切换
为了实现键盘上下键进行列表数据切换

可以使用 activeIndex 的状态来跟踪当前选中的项，并结合键盘上下键事件处理

以下是相应的完整代码：

import useKeyboardController from "./useKeyboardController";
const [activeIndex, setActiveIndex] = useState(0);
const handleMoveUp = () => {
// 处理向下键逻辑序号减1
setActiveIndex(activeIndex - 1);
};
const handleMoveDown = () => {
// 处理向下键逻辑序号加1
setActiveIndex(activeIndex + 1);
};
useKeyboardController(
handleMoveUp,
handleMoveDown,
handleMoveLeft,
handleMoveRight
);

复制代码

4. 左右键页面切换
为了实现键盘左右键实现翻页功能

可以使用 currentPage 的状态来跟踪当前页数，并结合键盘左右键事件处理。

其他逻辑和左右键基本一样，此处就不重复写了。

// 左右键盘事件注册
globalShortcut.register("Left");
globalShortcut.register("Right");
const handleMoveLeft = () => {
// 键盘向左执行，页码减1
setCurrentPage(currentPage - 1);
};
const handleMoveRight = () => {
// 键盘向右执行，页码加1
setCurrentPage(currentPage + 1);
};

复制代码

5. ipcRenderer 引用报错
使用const { ipcRenderer } = window.require('electron');代码报错
报错信息如下所示：
window.require is not a function
TypeError: window.require is not a function
解决办法：加一层判断，存在时，才能调用。这样就可以避免在浏览器环境下直接调用 Electron 模块，导致运行异常。
修改 useKeyboardController.tsx 页面逻辑，以下是修改后的代码：

let ipcRenderer;
if (window.require) {
const electron = window.require("electron");
ipcRenderer = electron.ipcRenderer;
}

复制代码

6. electron 关闭后打开报错
electron 窗口关闭后再打开，上述代码会导致报错，报错信息如下所示：
A JavaScript error occurred in the main process
UnhandledPromiseRejectionWarning: TypeError: Object has been destroyed
at Function. (main.js:88:9)
at Object.showErrorBox (node:electron/js2c/browser_init:49:5725)
at node:electron/js2c/browser_init:189:763
问题分析：这是因为在窗口关闭后，对快捷键进行了注册，但在重新打开窗口时未进行注册。为避免这种问题，可以在应用关闭时取消注册快捷键监听器，并在应用再次激活时重新注册相同的监听器。
问题解决：窗口重新激活时，重新注册快捷键监听器
以下是修改后的代码：

app.on("activate", () => {
// 如果窗口重新激活时，重新注册快捷键监听器
handleRegister();
});
app.on("before-quit", () => {
// 在应用关闭前取消注册的快捷键监听器
globalShortcut.unregisterAll();
});

复制代码

		自动登录	找回密码
密码			立即注册

electron 监听键盘事件

相关帖子