electron 监听键盘事件

项目需要 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();
});
相关推荐
光影少年16 分钟前
vue2与vue3的全局通信插件,如何实现自定义的插件
前端·javascript·vue.js
As977_17 分钟前
前端学习Day12 CSS盒子的定位(相对定位篇“附练习”)
前端·css·学习
susu108301891119 分钟前
vue3 css的样式如果background没有,如何覆盖有background的样式
前端·css
Ocean☾20 分钟前
前端基础-html-注册界面
前端·算法·html
Rattenking21 分钟前
React 源码学习01 ---- React.Children.map 的实现与应用
javascript·学习·react.js
Dragon Wu23 分钟前
前端 Canvas 绘画 总结
前端
CodeToGym27 分钟前
Webpack性能优化指南:从构建到部署的全方位策略
前端·webpack·性能优化
~甲壳虫28 分钟前
说说webpack中常见的Loader?解决了什么问题?
前端·webpack·node.js
~甲壳虫32 分钟前
说说webpack proxy工作原理?为什么能解决跨域
前端·webpack·node.js
Cwhat34 分钟前
前端性能优化2
前端