项目需要 electron 监听键盘事件,进行页面逻辑操作,上下键进行列表数据切换,左右键实现列表数据翻页
1. electron 键盘事件监听
electron 中可以使用globalShortcut监听键盘事件,具体可以查看 electron 官方文档,有详细的介绍
- 注册事件:
globalShortcut.register
- 判断是否注册成功:
globalShortcut.isRegistered
- 注销注册事件:
globalShortcut.unregisterAll
在 main.js 主进程
文件中进行注册操作,具体代码如下所示:
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 钩子中注册了监听器来接收来自主进程的事件
并在组件卸载时删除了这些监听器
js
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 的状态来跟踪当前选中的项,并结合键盘上下键事件处理
以下是相应的完整代码:
js
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 的状态来跟踪当前页数,并结合键盘左右键事件处理。
其他逻辑和左右键基本一样,此处就不重复写了。
js
// 左右键盘事件注册
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 页面逻辑,以下是修改后的代码:
js
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
问题分析:这是因为在窗口关闭后,对快捷键进行了注册,但在重新打开窗口时未进行注册。为避免这种问题,可以在应用关闭时取消注册快捷键监听器,并在应用再次激活时重新注册相同的监听器。
问题解决:窗口重新激活时,重新注册快捷键监听器
以下是修改后的代码:
js
app.on("activate", () => {
// 如果窗口重新激活时,重新注册快捷键监听器
handleRegister();
});
app.on("before-quit", () => {
// 在应用关闭前取消注册的快捷键监听器
globalShortcut.unregisterAll();
});