Electron 桌面应用开发入门

背景

Electron 让前端开发者能用 HTML/CSS/JS 写桌面应用。VS Code、Slack、Figma、Discord 都是 Electron 做的。如果你的毕设需要一个桌面端程序（管理系统、工具软件、数据可视化客户端），Electron 是唯一用前端技术栈就能搞定的方案。

---

核心概念

双进程架构

┌─────────────────────────┐
│     Main Process        │  ← Node.js 环境
│  (main.js)              │
│  - 窗口管理              │  - 文件系统 fs
│  - 原生菜单              │  - 系统通知
│  - IPC 通信              │  - 自动更新
│                         │
│  ←── ipcMain / ipcRenderer ──→ │
│                         │
│     Renderer Process    │  ← Chromium 环境
│  (index.html + JS)      │
│  - 页面渲染              │  - Canvas/WebGL
│  - 用户交互              │  - 任意前端框架
└─────────────────────────┘

IPC 通信

// Main Process
ipcMain.handle('get-data', async () => {
  return await db.query('SELECT * FROM users');
});

// Renderer Process (preload)
contextBridge.exposeInMainWorld('api', {
  getData: () => ipcRenderer.invoke('get-data'),
});

// Renderer (页面)
const data = await window.api.getData();

---

分步操作

第一步：创建项目

npm init electron-app@latest my-app -- --template=vite
cd my-app
npm start

第二步：理解项目结构

my-app/
├── package.json
├── forge.config.js     # Electron Forge 配置
├── src/
│   ├── main.js          # 主进程
│   ├── preload.js       # 预加载脚本（安全桥接）
│   ├── index.html       # 渲染进程入口
│   └── renderer.js      # 渲染进程 JS

第三步：创建窗口

// main.js
const { app, BrowserWindow } = require('electron');

function createWindow() {
  const win = new BrowserWindow({
    width: 1024,
    height: 768,
    webPreferences: {
      preload: path.join(__dirname, 'preload.js'),
      contextIsolation: true,  // 安全：隔离渲染进程
    },
  });

  win.loadFile('index.html');
}

app.whenReady().then(createWindow);

第四步：加原生菜单

const { Menu } = require('electron');
const menu = Menu.buildFromTemplate([
  {
    label: '文件',
    submenu: [
      { label: '新建', accelerator: 'CmdOrCtrl+N', click: () => { /* ... */ } },
      { label: '退出', role: 'quit' },
    ],
  },
]);
Menu.setApplicationMenu(menu);

---

毕设推荐场景

桌面管理系统

学生管理、图书管理、库存管理——Electron + Vue/React + SQLite。

串口/硬件工具

通过 Node.js 的 serialport 库连接 Arduino/传感器。

数据可视化客户端

Electron + ECharts/D3.js，比网页版更强（本地文件读写）。

---

思考题

1. 为什么 Electron 需要 contextIsolation 和 preload 脚本？
2. Main Process 和 Renderer Process 各能访问哪些 API？
3. Electron 打包后的体积通常很大（100MB+），如何优化？

---

小结

Electron 让前端技术栈覆盖桌面端。毕设用它写一个桌面应用，不仅实用性强，答辩时也能展示跨平台开发能力。