【桌面程序】Electron实现跨平台桌面应用程序

什么是Electron

Electron 是一个开源框架，用于构建跨平台的桌面应用程序，允许开发者使用网页技术（HTML、CSS 和 JavaScript）来开发桌面应用程序。它结合了 Chromium（用于渲染网页的浏览器引擎）和 Node.js（用于处理后台逻辑的 JavaScript 运行时环境），因此开发者可以使用前端技术来构建用户界面，并且利用 Node.js 来访问操作系统功能。

Electron 被广泛用于构建桌面应用，许多知名的桌面应用都基于 Electron 开发，如 Visual Studio Code、Slack、GitHub Desktop、Discord 等。

环境准备及实现

1.安装VScode

2.安装nodejs

sudo apt update
sudo apt install nodejs
node -v
sudo apt install npm

3.克隆架构代码

git clone https://github.com/electron/electron-quick-start

4.安装依赖

npm i

5.运行

npm start

6.运行成功

关于打包

Electron跨平台，但打包需要在对应平台打包，如要打成exe，必须在windows下。

一般的打包过程：

1. 完成开发
2. 在开发环境打包为中间态（使用 Electron Forge ）
3. 分发到对应系统
4. 在各系统打包（使用electron-packager）

1.使用 Electron Forge打中间态：

npm init electron-app@latest my-app

2.使用electron-packager打包exe（需在windows环境下）：

sudo npm install electron-packager -g

3.修改package.json文件：

"scripts": {
  "start": "electron .",
  "packager": "electron-packager . fukaiitapp --out fukaiitapp --arch=x64 --overwrite --ignore=node_modules"
}

参数说明：
map ：你将要生成的exe文件的名称
–platform=win32：确定了你要构建哪个平台的应用（Windows、Mac 还是 Linux）,可取的值有 darwin, linux, mas, win32
–arch=x64：决定了使用 x86 （ia32）还是 x64（x64），还是两个架构都用
–icon=自定义.ico：自定义设置应用图标
–out=./out：指定打包文件输出的文件夹位置,当前指定的为项目目录下的release文件夹
–asar：该参数可以不加，如果加上，打包之后应用的源码会以.asar格式存在
–app-version=1.0.0：生成应用的版本号
–overwrite：覆盖原有的build,让新生成的包覆盖原来的包
–ignore=node_modules：如果加上该参数，项目里node_modules模块不会被打包进去
–electron-version 8.2.1：指定当前要构建的electron的电子版本（不带"v"）,需要和当前的版本一致,具体可以在 package.json文件中查看,可以不加该参数，如果不一致，会自动下载。

4.运行打包命令：

npm run package

---

常见问题

1.如果打包过程中报错“Electron Forge child.stdout?.on”：
解决方案：
升级nodejs版本，至少在14及以上。

参考：https://zhuanlan.zhihu.com/p/649708525?utm_id=0

升级：

sudo npm install -g n
sudo n latest

2.如果报错“Error: Cannot find module ‘semver’”：
是npm与nodejs版本不一致导致的，需要重装npm保持一致。

参考：https://blog.youkuaiyun.com/kongtaoxing/article/details/127342042/

sudo apt remove nodejs
sudo apt remove npm

进入 /usr/local/lib 删除所有 node 和 node_modules文件夹
进入 /usr/local/include 删除所有 node 和 node_modules 文件夹
进入 /usr/local/bin 删除 node 的可执行文件

sudo apt install git curl
curl -fsSL https://deb.nodesource.com/setup_18.x | sudo -E bash -
sudo apt-get install -y nodejs

以上参考文献：
https://www.electronjs.org/zh/docs/latest/tutorial/application-distribution
https://www.electronforge.io/
https://blog.youkuaiyun.com/qq_46664185/article/details/122437700