Electron.js 详解、应用场景及完整案例
一、Electron.js 核心详解1. 什么是 Electron.js？
Electron（原名为 Atom Shell）是由 GitHub 开发的开源框架，基于 Node.js 和 Chromium，允许开发者使用 HTML、CSS、JavaScript 构建跨平台（Windows、macOS、Linux）的桌面应用程序。
核心优势：
[*]跨平台：一套代码运行在三大桌面系统，无需针对不同系统单独开发
[*]技术栈友好：前端开发者无需学习 C++/Swift 等桌面开发语言，直接复用 Web 技术
[*]原生能力：通过 Node.js 访问文件系统、系统API，通过 Electron 内置模块实现窗口管理、菜单、托盘等桌面特性
[*]生态丰富：可复用 npm 生态（数十万包）和前端框架（React/Vue/Angular）
2. 核心架构
Electron 应用由 主进程 和 渲染进程 组成，通过 IPC（进程间通信）实现通信：
进程类型作用技术基础核心模块主进程（Main Process）管理应用生命周期（启动/退出）、窗口创建、系统资源访问Node.js + Electron APIBrowserWindow（窗口）、app（应用）、Menu（菜单）、ipcMain（IPC通信）渲染进程（Renderer Process）负责UI渲染，每个窗口对应一个独立渲染进程Chromium + Web 技术ipcRenderer（IPC通信）、remote（已废弃，改用 @electron/remote）关键原理：
[*]主进程是应用入口，只能有一个，负责创建和管理渲染进程
[*]渲染进程运行在 Chromium 沙箱中，默认无法直接访问系统资源，需通过 IPC 向主进程发送请求
[*]预加载脚本（Preload Script）：在渲染进程加载前执行，可桥接主进程和渲染进程，暴露安全的API给渲染进程
3. 核心模块速览
模块名核心功能app应用生命周期管理（启动、退出、激活、事件监听）BrowserWindow创建和控制应用窗口（大小、位置、样式、加载URL）ipcMain/ipcRenderer主进程与渲染进程的异步通信Menu/MenuItem创建应用菜单（顶部菜单、右键菜单）Tray创建系统托盘图标和上下文菜单dialog显示原生对话框（打开文件、保存文件、提示框）fs（Node.js 模块）文件系统读写（主进程可直接使用，渲染进程需通过IPC）二、Electron 应用场景
Electron 因跨平台、技术栈低门槛，被广泛用于以下场景：
1. 开发者工具
[*]VS Code：代码编辑器（最知名的 Electron 应用）
[*]Postman：API调试工具
[*]GitHub Desktop：Git 版本控制客户端
[*]Slack：团队协作工具
2. 生产力工具
[*]Notion：笔记与知识库工具
[*]Trello：项目管理工具
[*]Figma（桌面版）：UI设计工具
[*]企业内部办公系统（如审批、报表工具）
3. 媒体/娱乐应用
[*]Spotify（桌面版）：音乐播放器
[*]视频播放器（基于 Web 播放器+本地文件访问）
[*]游戏客户端（2D 游戏或轻量 3D 游戏）
4. 本地数据处理工具
[*]日志分析工具（读取本地日志文件+可视化）
[*]CSV/Excel 数据转换工具
[*]本地数据库管理工具（如 SQLite 客户端）
5. 离线 Web 应用封装
[*]将现有 Web 应用（如后台管理系统）封装为桌面应用，支持离线缓存
[*]需访问本地资源的 Web 工具（如本地图片处理）
三、完整案例：本地文件阅读器
功能说明
[*]支持通过对话框选择本地文本文件（.txt/.md）
[*]读取文件内容并在界面展示
[*]支持文件编码切换（UTF-8/GBK）
[*]窗口大小可调整、支持最小化/关闭
技术栈
[*]主框架：Electron 28（最新稳定版）
[*]前端：原生 HTML/CSS/JavaScript（无框架依赖，便于理解）
[*]文件编码：iconv-lite（处理 GBK 编码）
步骤 1：项目初始化
1.1 创建项目目录
mkdir electron-file-reader
cd electron-file-reader1.2 初始化 npm 项目
npm init -y1.3 安装依赖
# 安装 Electron（生产依赖）
npm install electron --save
# 安装 iconv-lite（处理文件编码）
npm install iconv-lite --save1.4 配置 package.json
修改 package.json，添加 Electron 启动脚本和主进程入口：
{
"name": "electron-file-reader",
"version": "1.0.0",
"main": "main.js", // 主进程入口文件
"scripts": {
"start": "electron .", // 启动应用
"package": "electron-packager . FileReader --platform=all --arch=all --out=dist" // 打包（需先安装 electron-packager）
},
"devDependencies": {},
"dependencies": {
"electron": "^28.0.0",
"iconv-lite": "^0.6.3"
}
}步骤 2：编写主进程代码（main.js）
主进程负责窗口创建、文件读取、IPC通信：
const { app, BrowserWindow, dialog, ipcMain } = require('electron');
const fs = require('fs');
const path = require('path');
const iconv = require('iconv-lite');
let mainWindow;
// 创建主窗口
function createWindow() {
mainWindow = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
// 启用预加载脚本
preload: path.join(__dirname, 'preload.js'),
// 允许渲染进程使用 Node.js API（开发环境方便，生产环境建议禁用）
nodeIntegration: false,
contextIsolation: true // 启用上下文隔离，安全推荐
}
});
// 加载前端页面
mainWindow.loadFile('index.html');
// 打开开发者工具（开发环境）
mainWindow.webContents.openDevTools();
// 窗口关闭事件
mainWindow.on('closed', () => {
mainWindow = null;
});
}
// 应用就绪后创建窗口
app.whenReady().then(createWindow);
// 所有窗口关闭时退出应用（Windows/Linux）
app.on('window-all-closed', () => {
if (process.platform !== 'darwin') {
app.quit();
}
});
// macOS 激活应用时重新创建窗口
app.on('activate', () => {
if (BrowserWindow.getAllWindows().length === 0) {
createWindow();
}
});
// IPC：监听渲染进程的"选择文件"请求
ipcMain.handle('select-file', async () => {
// 打开文件选择对话框
const result = await dialog.showOpenDialog(mainWindow, {
title: '选择文本文件',
filters: [
{ name: '文本文件', extensions: ['txt', 'md'] },
{ name: '所有文件', extensions: ['*'] }
],
properties: ['openFile'] // 仅允许选择单个文件
});
// 用户取消选择
if (result.canceled) return null;
// 返回选中的文件路径
return result.filePaths;
});
// IPC：监听渲染进程的"读取文件"请求
ipcMain.handle('read-file', async (event, filePath, encoding) => {
try {
// 读取文件原始字节（避免编码问题）
const buffer = fs.readFileSync(filePath);
// 根据选择的编码解码
const content = iconv.decode(buffer, encoding);
return { success: true, content };
} catch (error) {
return { success: false, error: error.message };
}
});步骤 3：编写预加载脚本（preload.js）
预加载脚本在渲染进程加载前执行，用于暴露 IPC 通信接口（安全隔离）：
const { contextBridge, ipcRenderer } = require('electron');
// 向渲染进程暴露安全的 API（window.electron 全局对象）
contextBridge.exposeInMainWorld('electron', {
// 选择文件
selectFile: () => ipcRenderer.invoke('select-file'),
// 读取文件
readFile: (filePath, encoding) => ipcRenderer.invoke('read-file', filePath, encoding)
});步骤 4：编写前端界面（index.html）
前端负责UI展示和用户交互，通过 window.electron 调用主进程API：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Electron 本地文件阅读器</title>
</head>
<body>
<button id="selectBtn">选择文件</button>
<select id="encodingSelect">
<option value="utf8">UTF-8</option>
<option value="gbk">GBK</option>
</select>
未选择文件
</body>
</html>步骤 5：运行应用
在项目根目录执行以下命令启动应用：
npm start步骤 6：打包应用（可选）
6.1 安装打包工具
npm install electron-packager --save-dev6.2 执行打包命令
npm run package打包完成后，会在 dist 目录下生成对应系统（Windows/macOS/Linux）的可执行文件。
案例效果
[*]启动后显示"未选择文件"，点击"选择文件"按钮可打开系统文件对话框
[*]选择 .txt 或 .md 文件后，自动读取并展示内容
[*]可通过下拉框切换编码（解决GBK文件乱码问题）
[*]支持窗口大小调整、最小化/关闭，内容区域自动滚动
四、关键注意事项
1. 安全性
[*]禁用 nodeIntegration: true（默认禁用），避免渲染进程被恶意脚本攻击
[*]启用 contextIsolation: true（默认启用），隔离主进程和渲染进程的上下文
[*]预加载脚本仅暴露必要的API，避免暴露敏感模块（如 fs 直接给渲染进程）
2. 性能优化
[*]避免创建过多窗口（每个窗口对应一个渲染进程，占用内存）
[*]大文件读取采用流（fs.createReadStream），避免同步读取导致UI阻塞
[*]优化渲染进程的DOM操作，避免频繁重绘
3. 跨平台兼容性
[*]文件路径：使用 path.join 代替硬编码路径（Windows用 \，macOS/Linux用 /）
[*]系统托盘：macOS 托盘图标尺寸建议 22x22px，Windows 建议 32x32px
[*]对话框样式：不同系统的原生对话框样式不同，无需手动适配
4. 打包与分发
[*]打包工具：electron-packager（简单打包）、electron-builder（更强大，支持自动签名、安装包生成）
[*]体积优化：剔除开发依赖（npm prune --production）、使用 asar 压缩资源文件
五、扩展方向
[*]支持更多文件格式（如 PDF、Office 文件，需集成对应解析库）
[*]添加文件编辑和保存功能
[*]实现最近打开文件列表（通过 app.getPath('recentDocuments')）
[*]支持暗黑模式（通过 nativeTheme 模块）
[*]集成云同步功能（通过 Node.js 调用云存储API）
来源：程序园用户自行投稿发布，如果侵权，请联系站长删除
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！ 感谢分享 东西不错很实用谢谢分享 感谢分享，下载保存了，貌似很强大
页:
[1]