Electron的原理很简单,基本上就是使用我们常见的chrome浏览器的内核为基础通过nodejs和底层操作系统进行操作交互。
必要的准备内容不多,不管你是windows,linux还是mac只要安装最新版本的nodejs就可以了,除此之外确保你有npm和git
然后打开命令提示符输入
安装依赖的过程可能比较久,npm会自动安装一些windows的编译包。
安装成功并且运行了会提示入下图
实际上就是个chrome浏览器的壳子把html和css以及js绘制的UI显示出来,右边的debug工具都是和chrome里一模一样的。
当然我们也可以关闭它。显示的时候看起来就更加像是一个浏览器了。
electron的目录结构如下。
package.json是我们常见的npm包管理软件,这里主要是一些APP的应用信息,包的管理和开发用的脚本命令。在这里我们还要定义好main为main.js如果没有定义的话会默认启动index.js。这里和nodejs默认的情况都差不多。
main.js是应用程序的主进程文件,这个主进程文件就是用来创建应用程序窗口和处理系统事件使用的文件。它看起来大概是下面这个样子。
这个文件显示主界面的信息内容。
就是图中红色箭头指示的位置。
electron想必qt开发起来就容易多了,因为我们可以通过html,css和javascript这样简单容易的语言开发跨平台的桌面应用,因为读取的是html文件,这还意味着我们可以更容易的在服务端实时更新数据内容。
不同的语言、框架都有自己擅长的领域: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 中引入执行。
1、Electron:electron是一个使用js,html和css等的web技术创建原生桌面应用的框架,他基于chromium和node.js,构建的应用可以在Mac,windows和Linux三个平台上运行。2、React和react-router在该项目中负责构建单页面应用和路由跳转的实现。