基于 Electron 的跨平台桌面应用开发实战
引言：前端开发桌面端的价值
现在前端竞争激烈，许多岗位不仅要求 Web 经验，还希望具备桌面端开发能力。Electron 允许使用 HTML、CSS 和 JavaScript 构建跨平台桌面应用（Windows、macOS、Linux），复用现有技能栈，无需学习 C# 或 C++。
虽然'跨平台'听起来很美好，但不同操作系统在路径分隔符、系统通知 API 等方面存在差异。因此，理解 Electron 的核心架构至关重要。
Electron 技术架构解析
核心原理
Electron 由 Chromium 负责渲染界面，Node.js 负责操作系统级别的操作。它包含两个主要进程：
- 主进程 (Main Process): 运行 Node.js，负责创建窗口、管理应用生命周期、执行系统级操作。
- 渲染进程 (Renderer Process): 每个窗口的 Chromium 实例，负责展示界面和响应用户交互。
两者通过 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.on(, {
mainWindow = ;
});
}
app.().(createWindow);
app.(, {
(process. !== ) {
app.();
}
});
ipcMain.(, (event, filePath) => {
{
content = fs..(filePath, );
{ : , content };
} (error) {
{ : , : error. };
}
});
