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

不同的语言、框架都有自己擅长的领域：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 中引入执行。

学习electron还没有太久，在项目上进一步接触打包和自动更新后也踩了好多坑，百度了很多的资料，我这里对遇到的问题整理一下，避免后续想学习electron的同学再次踩坑。

参考： 问题解决的参考文档

不同的页面引入报不一样的错，如下：

renderer进程引入electron （app.vue）:

错误显示是node_modules/electron/index.js文件中引入fs.existsSync语句造成的

renderer进程引入electron （index.html页面）:

百度查资料得知原因是：

(1)、首先在渲染进程属于浏览器端，没有集成Node的环境，所以类似 fs 这样的Node的基础包是不可以使用。

(2)、因为没有Node环境，所以这种属于node api的require关键词是不可以使用的。

(3)、electron5.x的node集成环境默认是关闭的，这之前的版本是默认开启的

根据百度提供的方案是在主进程中集成 Nodejs，也就是添加配置nodeIntegration: true

通过使用window.require代替require来引入electron，因为前者不会被webpack编译，在渲染进程require关键字就是表示node模块的系统

渲染进程：

主进程main.js:

配置好重新启动前端工程会之前的错误没有了，但是出现 window.require is not a function .错误

由此看出直接使用window.require代替require是不可行的,接着百度查找资料，找到一种解决方案：

2.1新建preload.js预处理文件

2.2在main进程中添加preload配置项,使用了预加载之后,即使nodeIntegration为false,也可以使用Node API访问到ipcRenderer

2.3 渲染进程种引入electron中的ipcRenderer

把以上三个步骤引入之后重启前端工程,又发现报错

不用担心，这个其实是因为工程是在本地浏览器运行的，识别不了electron中的api,只要保证在electron应用程序下运行就不会报错。我们一般开发都是在本地浏览器调试，有红色报错提示的话看着还是比较碍眼，所以添加一个 is-electron来判断,处于electron环境中才执行

npm install --save is-electron

---