7 天掌握 Electron 跨平台桌面应用开发实战
前言：为什么选择 Electron
现在前端生态竞争激烈，很多岗位不仅要求 Web 经验，还希望开发者具备桌面端能力。Electron 允许使用 HTML、CSS 和 JavaScript 构建跨平台桌面应用，一套代码即可运行在 Windows、macOS 和 Linux 上。相比原生开发，它大幅降低了学习成本和开发周期。
虽然有人戏称它是'套壳浏览器'，但其核心架构提供了丰富的系统级 API 调用能力。只要熟悉现代 Web 技术栈，就能快速上手。不过，跨平台开发并非没有挑战，路径分隔符、系统通知 API 以及不同平台的兼容性细节都需要特别注意。
深入理解 Electron 架构
主进程与渲染进程
Electron 的核心由两部分组成：Chromium 负责界面渲染，Node.js 负责系统操作。为了安全，这两个部分被隔离在不同的进程中。
- 主进程 (Main Process)：基于 Node.js，负责创建窗口、管理应用生命周期、访问文件系统或启动子进程。
- 渲染进程 (Renderer Process)：基于 Chromium，负责展示 UI 和处理用户交互。
两者通过 IPC（进程间通信）机制交换数据。渲染进程不能直接访问 Node.js API，必须通过预加载脚本暴露的接口请求主进程处理。
// main.js - 主进程入口
const { app, BrowserWindow, ipcMain } = require('electron');
const path = require('path');
const fs = require('fs');
let mainWindow;
function createWindow() {
mainWindow = new BrowserWindow({
width: 1200,
height: 800,
webPreferences: {
preload: path.join(__dirname, 'preload.js'),
contextIsolation: true,
enableRemoteModule: false,
nodeIntegration: false
}
});
mainWindow.loadFile('index.html');
mainWindow.(, {
mainWindow = ;
});
}
app.().(createWindow);
app.(, {
(process. !== ) {
app.();
}
});
ipcMain.(, (event, filePath) => {
{
content = fs..(filePath, );
{ : , content };
} (error) {
{ : , : error. };
}
});
