1、前言
由于工作需要，前段时间基于electron框架开发了一个桌面应用程序。由于我之前主要是做c++后端开发，所以没有任何electron基础，也没有任何前端开发基础，但是没有办法，老板需要，那就得会，不会就得学。经过一段时间的开发，也积累了一点electron框架和前端开发的经验，借此机会总结一下，一是记录自己的一个学习过程，另外也希望可以帮助到有需要的人。
2、electron相关理论知识学习
electron相关的文档和博客应该也不少，对于刚入门的开发者，推荐官方文档，这个文档比较系统，学习起来也比较容易。具体知识就不再赘述了，直接贴上链接：
Electron是什么？
3、如何开始一个简单的electron demo程序
3.1 依赖安装
由于electron框架是基于Node.js，因此需要先安装node.js。如果没有安装node.js请自行安装好node.js，并设置好环境变量。
可以在cmd命令窗口中输入：
node -v如果node.js安装成功，会显示版本号。如下所示：
3.2 官方入门教程
官方给出了一个简单的教程，可以快速创建第一个electron程序。创建一个简单electron程序，可以主要分为四个步骤：
3.2.1 创建目录并初始化
最开始需要新建一个工程目录，并进行初始化。
以管理员身份打开cmd窗口，创建一个目录，并进行初始化：
mkdir my-electron-app && cd my-electron-app
npm init这一步完成之后，会在my-electron-app目录下面生成一个package.json文件。
3.2.2 安装electron依赖包
npm install --save-dev electron为了让electron能够在开发模式之下，通过start命令运行程序，需要在package.json文件scripts字段下面增加一条start命令：
{"scripts": {"start": "electron ."}
}3.2.3 创建主程序
创建主程序main.js：
// main.js// Modules to control application life and create native browser window
const { app, BrowserWindow } = require('electron')
const path = require('node:path')const createWindow = () => {// Create the browser window.const mainWindow = new BrowserWindow({width: 800,height: 600,webPreferences: {preload: path.join(__dirname, 'preload.js')}})// 加载 index.htmlmainWindow.loadFile('index.html')// 打开开发工具// mainWindow.webContents.openDevTools()
}// 这段程序将会在 Electron 结束初始化
// 和创建浏览器窗口的时候调用
// 部分 API 在 ready 事件触发后才能使用。
app.whenReady().then(() => {createWindow()app.on('activate', () => {// 在 macOS 系统内, 如果没有已开启的应用窗口// 点击托盘图标时通常会重新创建一个新窗口if (BrowserWindow.getAllWindows().length === 0) createWindow()})
})// 除了 macOS 外，当所有窗口都被关闭的时候退出程序。 因此, 通常
// 对应用程序和它们的菜单栏来说应该时刻保持激活状态,
// 直到用户使用 Cmd + Q 明确退出
app.on('window-all-closed', () => {if (process.platform !== 'darwin') app.quit()
})// 在当前文件中你可以引入所有的主进程代码
// 也可以拆分成几个文件，然后用 require 导入。3.2.4 创建页面
创建页面文件index.html
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><!-- https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP --><meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'"><title>Hello World!</title></head><body><h1>Hello World!</h1>We are using Node.js <span id="node-version"></span>,Chromium <span id="chrome-version"></span>,and Electron <span id="electron-version"></span>.</body>
</html>3.2.5 创建预加载程序
创建与加载程序preload.js:
// preload.js// 所有的 Node.js API接口 都可以在 preload 进程中被调用.
// 它拥有与Chrome扩展一样的沙盒。
window.addEventListener('DOMContentLoaded', () => {const replaceText = (selector, text) => {const element = document.getElementById(selector)if (element) element.innerText = text}for (const dependency of ['chrome', 'node', 'electron']) {replaceText(`${dependency}-version`, process.versions[dependency])}
})3.3 可能遇到问题 -- 安装electron依赖失败
如果根据上面的总结步骤，结合官方的教程，一步一步操作下面，应该没有什么难度。可能会在安装3.2.2安装electron依赖包时失败，因为国内网络的原因，从官方镜像源下载速度可能很慢，一般设置一下镜像源就好。在my-electron-app目录下面需要新建一个.npmrc文件，内容如下：
registry=https://registry.npmmirror.com
electron_mirror=https://cdn.npmmirror.com/binaries/electron/
electron_builder_binaries_mirror=https://npmmirror.com/mirrors/electron-builder-binaries/
![攻防世界[GoodRe]](https://img-blog.csdnimg.cn/img_convert/e0b5dea2797384c00ae1817348a982d0.png)
