Electron开发：Electron 快捷键开发思路一览

Posted 2023-05-12

参考技术A

Electron 有全局快捷键和局部快捷键设置功能供大家方便地使用。如果是我们遇到的业务都是写死快捷键，那么也就不需要有这篇文章了，但事实上，我们往往会需要遇到重设设快捷键的需求，那么这时如何设计整个快捷键实现逻辑才比较优雅呢？这篇文章整理了多译的快捷键设计思路。

在 Electron 中，我们需要打交道的主要是 globalShortcut 模块，可以让我们方便地注册快捷键和注销快捷键。

先简单梳理一下和快捷键相关的程序运行逻辑，整个流程大致为两个环节： 全局快捷键初始化 和 用户对快捷键修改 。

全局快捷键初始化分两步：1、注册已有快捷键，2、监听快捷键注册和注销。

注册已有快捷键的逻辑很简单，就是根据存储的快捷键数据集绑定对应的功能。

而监听快捷键的则用于重新绑定快捷键。

第一步需要我们定义好快捷键数据集，这个数据集需要我们持久化存储。

第二步则需要我们再定义对应的功能数据集，这数据集存储我们需要的函数功能。

最后将其导入并完成快捷键注册

当然如果快捷键数量很多，可以考虑使用 map 的方式来完成注册。（如果遇到回调函数，可以考虑改变 shortcutFn 的结构，做对应的判断进行注册）

最后在 main/index.ts 中完成快捷键注册。

因为我们已经初始化对应的全局快捷键了，所以在用户实际修改快捷键的过程中，如果不进行注销，程序将直接执行对应的功能，renderer 窗口无法捕捉到对应被按下的键。

因此我们需要创建监听函数，当接收到注销或者注册新号时，完成对应快捷键的注销和注册。

这一步，我们可以集成进之前的 shortcutInit.ts 文件中。

Electron 框架中调用 Python 构建桌面应用

参考技术A

不同的语言、框架都有自己擅长的领域：Electron 基于 Chromium 和 Node.js 能以 Web 开发的模式打造桌面应用，开发用户界面又快捷又简单；Python 则在数据分析、自动化脚本等领域有非常多的应用。两者的社区生态都十分强大，由两者共同构建应用，在界面开发、功能、性能上能够强强联合；

为了简单验证技术可行性，我们来编写一个 Demo：

目的：验证 Electron 打造的桌面应用能够调用 Python，思路是使用 RPC 或 HTTP 或 WebSocket 进行通信

Demo 功能：输入 x、y 坐标，程序会移动鼠标到屏幕的 x,y 位置（通过 python 库 pyautogui 实现）

Demo 运行环境：MacOS、pyInstaller: 版本 4.5.1、python: 版本 3.9.7

源码：-------- 项目源码 --------

注意：移动鼠标需要授予应用控制权限，在 MacOS 下设置 偏好设置 -> 隐私 -> 辅助功能 -> 允许对应的应用。

技术栈：NodeJS、Electron、Python、aiohttp（HTTP、WebSocket）、pyautogui（控制鼠标）

为了使 NodeJS 和 Python 能够通信，Python 需要启动一个本地通信服务，Demo 中 py/api.py 能够启动一个本地 HTTP 服务：

然后我们需要执行 Python 代码以启动服务，为了使 NodeJS 可以执行 Python，我们使用 pyinstaller 将 Python 打包成可执行文件：

Python 启动了本地 HTTP 服务后，Chromium 和 Node.js 就可以通过请求的方式，与 python 连接通信了：

简单来说三个步骤：

本项目只是一个验证思路的 Demo，真的需要在项目上实践，还需要考虑以下几个点：

应该使用 RPC 通信而不是 HTTP 或者 WebSocket，Demo 使用 HTTP 只是搭建方便。实践中在建立连接、保持连接、异常重连都需要编写更多的逻辑来处理。为什么 Demo 没有使用 zerorpc? 这个库已经 4 年没有维护了，不兼容新版 NodeJS。

项目通过 pyinstaller 打包成可执行文件来调用 python。实际上其他能编译为可执行文件的语言也一样。还可以使用 WebAssembly 将其他语言编译成 .wasm，在 NodeJS 中引入执行。