Electron 是一个跨平台的桌面客户端框架，使用 JavaScript、HTML 和 CSS 构建桌面应用程序。其文档位于 https://www.electronjs.org/zh/docs/latest，当前最新稳定版本为 20.1.4。
特性
Electron 的主要特点包括主进程和渲染进程的隔离（沙箱模式）。用户操作和界面渲染由渲染进程处理，而操作系统 API 调用（如创建新窗体、获取电脑信息）则交给主进程。两者通过进程间通信进行交互。
基于 Web 技术，Electron 构建于 Chromium 和 Node.js 之上，允许开发者使用 HTML、CSS 和 JavaScript 进行开发。它是一个由 OpenJS 基金会和活跃社区管理的开源项目，并兼容 Mac、Windows 和 Linux，可构建跨平台应用程序。
功能
常用功能包括自动更新、原生菜单和通知、崩溃报告以便问题分析、调试和性能分析工具，以及可打包为 Windows 安装程序，提升用户体验。
生命周期
Electron 应用分为主进程和渲染进程。主进程管理应用程序生命周期和系统交互，渲染进程负责界面显示，两者协同工作。
安装 Node.js
Electron 依赖 Node.js，因此需先安装 Node.js。从官网 https://nodejs.org/zh-cn/ 下载长期维护版本，安装后通过执行 npm -v 和 node -v 命令验证安装。
安装 VSCode
推荐使用 Visual Studio Code（VSCode）作为开发工具，支持前端及后端开发。从官网 https://code.visualstudio.com/#alt-downloads 下载系统版本（如 64 位管理员版本），确保兼容性。
创建启动项目
首先创建项目目录并初始化基本配置。执行以下命令：
mkdir my-electron-app && cd my-electron-app
npm init
在初始化过程中，填写项目信息：包名称（默认或自定义）、版本号（默认 1.0.0）、描述（用于应用程序打包）、入口文件（改为 main.js），以及作者和许可证等信息。确认无误后完成初始化。
使用 VSCode 打开项目根目录，查看 package.json 文件中的项目信息。接下来安装 Electron 开发依赖：
npm install --save-dev electron
在 package.json 中添加 start 命令以在开发模式下运行应用：
"scripts": {
"start": "electron ."
}
此时运行 npm start 会报错，因为尚未配置程序主入口。
创建并启动窗体程序
安装 Electron 后，开始编写桌面应用示例。
首先添加一个展示页面 index.html：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<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>
然后在项目根目录创建 main.js 作为主入口文件：
const { app, BrowserWindow } = require('electron')
const createWindow = () => {
const win = new BrowserWindow({
width: 800,
height: 600
})
win.loadFile('index.html')
}
app.whenReady().then(() => {
createWindow()
})
运行 npm start 指令，应用程序成功启动并显示页面。
获取当前版本信息
要在页面中显示 Electron、Node.js 和 Chromium 的版本号，需添加预加载脚本。在根目录创建 preload.js 文件：
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])
}
})
接着改造 main.js，加载预加载脚本：
const { app, BrowserWindow } = require('electron')
const path = require('path')
const createWindow = () => {
const win = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
preload: path.join(__dirname, 'preload.js')
}
})
win.loadFile('index.html')
}
app.whenReady().then(() => {
createWindow()
})
保存后运行 npm start，启动页面将显示当前组件的版本号。