Electron 是一个由 GitHub 开发并开源的框架，允许开发者使用 Web 技术（HTML、CSS 和 JavaScript）构建跨平台的桌面应用程序。
主要特点
- 跨平台性：支持 Windows、macOS 和 Linux 三大主流操作系统，开发者只需编写一次代码即可在多个平台上运行。
- 技术栈复用：可以直接复用现有的前端技术栈和工具链（如 React、Vue、Angular 等），轻松集成各种 npm 包。
- 内置调试工具：内置 Chrome DevTools，开发者可以直接调试界面和逻辑，提高开发效率。
- 社区支持：拥有一个庞大且活跃的社区，开发者可以轻松找到文档、教程和开源库。
技术架构
Electron 应用分为主进程和渲染进程：
- 主进程：负责创建和管理应用窗口、与操作系统交互等。它运行在 Node.js 环境中，具有 require 模块和使用所有 Node.js API 的能力。
- 渲染进程：负责显示应用的用户界面，也就是加载 HTML、CSS 和运行 JavaScript 代码来构建界面交互。每个 BrowserWindow 实例都对应一个单独的渲染器进程。
使用场景
Electron 具有广泛的应用场景，包括但不限于：
- 内部管理工具：如员工信息管理系统、项目管理系统、CRM 系统等。
- 数据分析与可视化：创建交互式数据报表、实时数据监控面板等。
- 社交媒体客户端：提供与移动应用相似的用户体验，同时支持更多的功能和自定义设置。
- 邮件客户端：支持多账户管理、邮件过滤、离线阅读等功能。
- 云存储与同步工具：方便用户在不同设备间同步文件和数据。
- 代码编辑器与 IDE：如 Visual Studio Code 等流行的代码编辑器就是基于 Electron 构建的。
- 设计工具：提供直观的用户界面和丰富的交互功能。
- 在线学习平台客户端：提供离线学习、课程管理、进度跟踪等功能。
- 电子书籍与阅读器：支持多种格式的电子书、注释、书签等功能。
- 休闲游戏：对于休闲游戏、小游戏或基于 Web 技术的游戏来说，Electron 是一个不错的平台。
- 音乐与视频播放器：支持本地文件播放、在线流媒体、播放列表管理等功能。
缺陷
- 应用体积较大：Electron 应用通常包含整个 Chromium 引擎和 Node.js 运行时，导致生成的应用程序体积较大。
- 内存占用较高：每个 Electron 应用都运行在一个独立的 Chromium 实例中，因此内存占用较高，不适用于对性能要求极高及对资源占用敏感的应用。
入门示例
以下是一个简单的 Electron 应用创建步骤：
- 安装 Node.js：因为 Electron 依赖 Node.js，所以需要先安装 Node.js。
- 创建项目文件夹：在电脑上创建一个新的文件夹作为 Electron 项目的根目录。
- 初始化项目：在项目文件夹的终端中运行
npm init -y，这会创建一个package.json文件，用于管理项目的依赖和脚本。 - 安装 Electron：在项目目录下运行
npm install electron --save-dev，将 Electron 安装为开发依赖。 - 编写主进程文件（main.js）：
const { app, BrowserWindow } = require('electron');
function createWindow() {
const win = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
nodeIntegration: true
}
});
win.loadFile('index.html');
}
app.whenReady().then(createWindow);
app.on('window-all-closed', () => {
if (process.platform !== 'darwin') {
app.quit();
}
});
- 编写 HTML 页面（index.html）：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>My Electron App</title>
</head>
<body>
<h1>Hello World!</h1>
</body>
</html>
- 在
package.json中添加启动脚本：在package.json文件的scripts部分添加：
"scripts": {
"start": "electron ."
}
- 运行应用：在终端中运行
npm start，你将看到一个简单的窗口显示“Hello World!”。
使用 VSCode 开发 Electron 应用
环境准备
- 安装 Node.js：前往 Node.js 官方网站下载并安装最新版本的 Node.js。安装完成后，npm（Node 包管理器）也会一并安装。
- 安装 VSCode：从 VSCode 官网下载并安装 VSCode。
创建 Electron 项目
- 创建项目文件夹：在电脑上创建一个新的文件夹作为 Electron 项目的根目录。
- 初始化项目：在项目文件夹中打开终端，运行
npm init -y，这将创建一个package.json文件。 - 安装 Electron：在项目目录下运行
npm install electron --save-dev，将 Electron 安装为开发依赖。
编写代码
- 创建主进程文件（main.js）：在项目根目录下创建
main.js文件，内容与上述入门示例类似。 - 创建 HTML 页面（index.html）：创建
index.html文件，内容与上述示例类似。
配置和运行项目
- 在
package.json中添加启动脚本：在scripts部分添加"start": "electron ."。 - 运行应用：在终端中运行
npm start，Electron 应用将会启动。
调试 Electron 应用
- 创建调试配置文件：在项目根目录下创建
.vscode文件夹，并在其中创建launch.json文件，添加以下配置：
{
"version": "0.2.0",
"configurations": [
{
"name": "Debug Main Process",
"type": "node",
"request": "launch",
"cwd": "${workspaceFolder}",
"runtimeExecutable": "${workspaceFolder}/node_modules/.bin/electron",
"program": "${workspaceFolder}/main.js"
}
]
}
- 调试应用：在 VSCode 中打开项目文件夹，选择“Debug Main Process”配置，然后点击运行按钮或按下
F5键开始调试。
打包和发布应用
- 安装打包工具：例如，安装
electron-builder：npm install electron-builder --save-dev。 - 配置打包脚本：在
package.json文件的scripts部分添加"build": "electron-builder"。 - 打包应用：在终端中运行
npm run build，electron-builder将会根据项目配置生成可执行文件。 - 发布应用：将生成的可执行文件发布到目标平台，供用户下载和使用。