Electron 键盘快捷键

wy168 · 发表于 2022-10-29 15:11:02

本节我们学习 Electron 中的键盘快捷键。在 Electron 中，键盘快捷键被称作加速器，它们能够分派到运用程序菜单中的操纵上，也能够全局分派，所以纵然你的运用程序没有取得键盘核心，它们也能够被触发。

Electron 中有主进程和渲染进程这两种进行，所以我们可以分别在主进程中注册快捷键和在渲染进程中注册快捷键。

主进程注册快捷键

在主进程注册快捷键有两种方式，一种是利用 Menu 模块来模拟快捷键，二就是全局快捷键。

本地快捷键

我们可以使用 Electron 中的 Menu 模块来配置键盘快捷键，只有在 app 处于焦点状态时才可以触发快捷键，使用比较少。我们在创建 Menuitem 时必须指定一个 accelerator 属性。

示例：

const { Menu, MenuItem } = require(electron); const menu = new Menu(); menu.append(new MenuItem({ label: Print, accelerator: Ctrl+P, click: () => { console.log(打印资料) } }))

我们还可以根据用户的操作系统配置不同的组合键：

accelerator: process.platform === darwin ? Alt+Ctrl+I : Ctrl+Shift+I

全局快捷键

在应用程序没有键盘焦点时，我们可以使用 globalshortcut 模块检测键盘事件。我们来看下面这个例子。

示例：

下面代码中，我们将开发者工具的快捷键设置为 Alt+B：

// 引入electron const {app, BrowserWindow,globalShortcut} = require(electron); let win; function createWindow() { // 创建浏览器窗口 win = new BrowserWindow({ width: 800, height: 400, webPreferences: { nodeIntegration: true, }, }); // 加载index.html文件 win.loadFile(../html/index.html); // 自动打开开发者工具 // win.webContents.openDevTools(); // 当 window 被关闭，这个事件会被触发 win.on(closed, () => { win = null; }); } // Electron 会在初始化后并准备，创建浏览器窗口时，调用这个函数 app.on(ready, createWindow); // 当全部窗口关闭时退出 app.on(window-all-closed, () => { if (process.platform !== darwin) { app.quit(); } }); app.on(activate, () => { if (win === null) { createWindow(); } }); // 注册快捷键 app.on(ready, async () => { globalShortcut.register(Alt+B, function () { win.webContents.openDevTools(); }) createWindow(); })

然后我们运行 npm start 启动程序，只需要按下 Alt+B 键就可以打开开发者工具啦。

如果我们不想要设置好的快捷键，也可以注销快捷键，代码如下所示：

app.on(ready, () => { // 注销快捷键 globalShortcut.register(Alt+B, () => { console.log(按下Alt+B); }) // 注销所有快捷键 globalShortcut.unregisterAll(); })

渲染进程注册快捷键

渲染进程注册快捷键也有两种方式，一个是利用浏览器监听键盘事件，另一个是利用第三方模块。

浏览器窗口的快捷方式

我们可以利用浏览窗口监听键盘事件，这是一种常规的方式，自己判断什么键按下：

window.addEventListener(keyup, doSomething, true);

第三个参数 true 的意思就是说监听器将一直在其他监听器之前收到按键，以避免其它监听器调用 stopPropagation()。

利用第三方模块

如果我们不想手动进行快捷键解析，可以使用一些库来进行高级的按键检测，比如 Mousetrap。

首先我们需要安装这个库，然后使用 Script 标签引入

npm install mousetrap --save

在 HTML 页面中引入 index.js 文件：：

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>my_electron</title> </head> <body> <h2>你好，侠课岛！</h2> <script type="text/javascript" src=".js/index.js"></script> </body> </html>

index.js 文件内容：