从小白到精通——Electron桌面应用开发全攻略

代表作：VS Code、Slack、GitHub Desktop、Postman 都是用 Electron 开发的。主进程（Main Process）与渲染进程（Renderer Process），可以让前端开发者轻松构建 Windows、macOS、Linux 应用。生成可执行文件（.exe / .dmg / .AppImage）。渲染进程（Renderer）负责页面渲染、UI逻辑。主进程可创建

2501_93945834

627人浏览 · 2025-10-26 17:06:01

2501_93945834 · 2025-10-26 17:06:01 发布

一、认识 Electron

Electron 是一个使用 HTML + CSS + JavaScript 开发跨平台桌面应用的框架。
它结合了 Chromium（界面渲染） 与 Node.js（系统能力），可以让前端开发者轻松构建 Windows、macOS、Linux 应用。

代表作：VS Code、Slack、GitHub Desktop、Postman 都是用 Electron 开发的。

学习 Electron 的关键：

主进程（Main Process）与渲染进程（Renderer Process）
IPC 通信机制
窗口与菜单管理
文件操作与系统交互
打包与发布

二、环境准备

安装 Node.js
创建项目目录

mkdir my-electron-app cd my-electron-app npm init -y

安装 Electron

npm install electron --save-dev

在 package.json 添加启动脚本

"scripts": { "start": "electron ." }

三、第一个 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);

index.html

<!DOCTYPE html> <html> <head><meta charset="UTF-8"><title>Hello Electron</title></head> <body> <h1>欢迎来到 Electron 桌面应用</h1> <button id="btn">点击我</button> <script> document.getElementById('btn').addEventListener('click', () => { alert('Electron 真好玩！'); }); </script> </body> </html>

启动应用：

npm start

四、主进程与渲染进程

Electron 的架构类似浏览器：

主进程（Main）负责创建窗口、处理系统事件。
渲染进程（Renderer）负责页面渲染、UI逻辑。

主进程可创建多个窗口，每个窗口对应一个渲染进程。

const win1 = new BrowserWindow({ width: 500, height: 400 }); const win2 = new BrowserWindow({ width: 400, height: 300 });

五、窗口操作

const win = new BrowserWindow({ width: 800, height: 600, resizable: false, fullscreenable: false, icon: 'icon.png' }); win.loadFile('index.html'); win.webContents.openDevTools(); // 打开调试工具

六、IPC 通信机制（主进程 ↔ 渲染进程）

主进程可以与页面脚本进行数据通信。

主进程 main.js

const { ipcMain } = require('electron'); ipcMain.on('send-message', (event, msg) => { console.log('收到消息：', msg); event.reply('reply-message', '你好，渲染进程！'); });

渲染进程 index.html

<script> const { ipcRenderer } = require('electron'); ipcRenderer.send('send-message', '来自渲染进程的问候'); ipcRenderer.on('reply-message', (event, msg) => { alert(msg); }); </script>

参考案例：www.nsrgri.cn

七、文件系统访问

Electron 集成了 Node.js，可以直接使用 fs 模块操作本地文件。

const fs = require('fs'); // 写入文件 fs.writeFileSync('data.txt', 'Electron 写入测试'); // 读取文件 const data = fs.readFileSync('data.txt', 'utf-8'); console.log('文件内容：', data);

八、创建菜单与快捷键

菜单模板

const { Menu, app } = require('electron'); const template = [ { label: '文件', submenu: [ { label: '新建', click: () => console.log('新建文件') }, { type: 'separator' }, { label: '退出', role: 'quit' } ] }, { label: '帮助', submenu: [{ label: '关于', click: () => console.log('关于我们') }] } ]; const menu = Menu.buildFromTemplate(template); Menu.setApplicationMenu(menu);

九、右键菜单

const { Menu, MenuItem } = require('electron'); const { ipcMain } = require('electron'); ipcMain.on('show-context-menu', (event) => { const template = [ { label: '复制', role: 'copy' }, { label: '粘贴', role: 'paste' } ]; const menu = Menu.buildFromTemplate(template); menu.popup(); });

渲染端触发

document.addEventListener('contextmenu', (e) => { e.preventDefault(); ipcRenderer.send('show-context-menu'); });

十、打开系统对话框

const { dialog } = require('electron'); async function openFileDialog() { const result = await dialog.showOpenDialog({ properties: ['openFile', 'multiSelections'] }); console.log(result.filePaths); }

十一、系统通知

new Notification('提示', { body: '任务执行完毕！' });

十二、托盘图标

const { Tray, Menu } = require('electron'); let tray = null; app.whenReady().then(() => { tray = new Tray('icon.png'); const contextMenu = Menu.buildFromTemplate([ { label: '显示窗口', click: () => win.show() }, { label: '退出', click: () => app.quit() } ]); tray.setToolTip('我的Electron应用'); tray.setContextMenu(contextMenu); });

十三、自动更新（AutoUpdater）

const { autoUpdater } = require('electron-updater'); autoUpdater.checkForUpdatesAndNotify(); autoUpdater.on('update-downloaded', () => { autoUpdater.quitAndInstall(); });

十四、SQLite 本地数据库

npm install sqlite3

const sqlite3 = require('sqlite3').verbose(); const db = new sqlite3.Database('data.db'); db.serialize(() => { db.run("CREATE TABLE IF NOT EXISTS user (id INTEGER PRIMARY KEY, name TEXT)"); db.run("INSERT INTO user (name) VALUES (?)", ['张三']); db.each("SELECT * FROM user", (err, row) => console.log(row)); });

十五、集成前端框架（React/Vue）

可以将 React 或 Vue 打包后嵌入 Electron。

win.loadURL('http://localhost:5173'); // 指向Vite开发服务器

或：

win.loadFile('dist/index.html');

十六、窗口间通信

多个窗口之间可通过主进程中转。

ipcMain.on('broadcast', (event, msg) => { win2.webContents.send('message', msg); });

十七、保存用户配置

npm install electron-store

const Store = require('electron-store'); const store = new Store(); store.set('theme', 'dark'); console.log(store.get('theme'));

十八、打包应用

安装打包工具：

npm install electron-builder --save-dev

package.json

"build": { "appId": "com.example.myapp", "productName": "MyElectronApp", "win": { "target": "nsis" } }

打包命令：

npx electron-builder

生成可执行文件（.exe / .dmg / .AppImage）。

十九、自动启动应用

npm install electron-auto-launch

const AutoLaunch = require('electron-auto-launch'); const appLauncher = new AutoLaunch({ name: 'MyElectronApp' }); appLauncher.enable();

二十、完整实战项目：记事本桌面应用

main.js

const { app, BrowserWindow, ipcMain } = require('electron'); const fs = require('fs'); let win; function createWindow() { win = new BrowserWindow({ width: 800, height: 600, webPreferences: { nodeIntegration: true } }); win.loadFile('index.html'); } ipcMain.on('save-text', (event, text) => { fs.writeFileSync('note.txt', text); event.reply('saved', '文件已保存到 note.txt'); }); app.whenReady().then(createWindow);

index.html

<!DOCTYPE html> <html> <head><meta charset="utf-8"><title>Electron 记事本</title></head> <body> <h2>简单记事本</h2> <textarea id="content" rows="10" cols="60"></textarea><br> <button id="saveBtn">保存</button> <script> const { ipcRenderer } = require('electron'); document.getElementById('saveBtn').addEventListener('click', () => { const text = document.getElementById('content').value; ipcRenderer.send('save-text', text); }); ipcRenderer.on('saved', (e, msg) => alert(msg)); </script> </body> </html>

运行后，你即可拥有一个带文件保存功能的桌面记事本应用！