Electron on Liangweidong's blog

Electron 跨平台桌面应用：从零搭建到打包分发

Sat, 15 Dec 2018 00:00:00 +0800

什么是 Electron

Electron 是 GitHub 2013 年推出的开源框架，让开发者用 HTML + CSS + JavaScript 构建跨平台桌面应用。核心 = Chromium + Node.js。

优势

Web 技术栈：React / Vue / Angular 任意
跨平台：一套代码，Windows / macOS / Linux
完整 Node.js API：文件系统、子进程、网络
生态丰富：VSCode、Slack、Discord、Notion 都是 Electron

快速开始

环境要求

Node.js 18+
npm / yarn / pnpm
平台原生工具：Windows 需 Visual Studio Build Tools，macOS 需 Xcode CLT，Linux 需 libnss3 等

创建项目

1
2


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

修改 package.json：

1
2
3
4
5
6
7
8


{
 "name": "my-electron-app",
 "version": "1.0.0",
 "main": "main.js",
 "scripts": {
 "start": "electron ."
 }
}

安装：

1

npm install --save-dev electron

package.json 会加：

1
2
3


"devDependencies": {
 "electron": "^33.2.0"
}

main.js（主进程）

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33


const { app, BrowserWindow } = require('electron');
const path = require('path');

const createWindow = () => {
 const win = new BrowserWindow({
 width: 1200,
 height: 800,
 webPreferences: {
 preload: path.join(__dirname, 'preload.js'),
 contextIsolation: true, // 默认 true（安全）
 nodeIntegration: false, // 默认 false（安全）
 },
 });

 win.loadFile('index.html');
 // win.webContents.openDevTools();
};

app.whenReady().then(() => {
 createWindow();

 app.on('activate', () => {
 if (BrowserWindow.getAllWindows().length === 0) {
 createWindow();
 }
 });
});

app.on('window-all-closed', () => {
 if (process.platform !== 'darwin') {
 app.quit();
 }
});

preload.js（预加载）

1
2
3
4
5
6
7


const { contextBridge, ipcRenderer } = require('electron');

contextBridge.exposeInMainWorld('api', {
 sendMessage: (msg) => ipcRenderer.send('message', msg),
 onReply: (callback) => ipcRenderer.on('reply', callback),
 invokeMethod: (method, args) => ipcRenderer.invoke(method, args),
});

index.html（渲染进程）

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20


<!DOCTYPE html>
<html>
<head>
 <meta charset="UTF-8">
 <title>My App</title>
</head>
<body>
 <h1>Hello, Electron!</h1>
 <button id="btn">点击</button>
 <p id="output"></p>

 <script>
 document.getElementById('btn').addEventListener('click', () => {
 window.api.invokeMethod('greet', 'World').then((result) => {
 document.getElementById('output').textContent = result;
 });
 });
 </script>
</body>
</html>

启动

1

npm start

打开开发者工具（DevTools）：Ctrl + Shift + I

进程架构

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17


┌──────────────────────┐ ┌──────────────────────┐
│ Main Process │ │ Renderer Process │
│ (Node.js) │ IPC │ (Chromium) │
│ │ ←─────→ │ │
│ - 应用生命周期 │ │ - 渲染 UI │
│ - 创建 / 关闭窗口 │ │ - Web 前端 │
│ - 菜单 / 托盘 │ │ - 不能直接用 Node │
│ - 调用系统 API │ │ │
└──────────────────────┘ └──────────────────────┘
 ↑ ↑
 │ │
 │ ┌────────────────┐ │
 └────────→│ Preload │←──────┘
 │ (桥接) │
 │ - contextBridge│
 │ - 暴露受限 API │
 └────────────────┘

IPC 通信

方式 1：invoke / handle（推荐）

渲染进程：

1
2
3


// renderer.js
const result = await window.api.invokeMethod('greet', 'World');
console.log(result);

preload.js：

1
2
3


contextBridge.exposeInMainWorld('api', {
 invokeMethod: (method, args) => ipcRenderer.invoke(method, args),
});

主进程：

1
2
3
4
5


const { ipcMain } = require('electron');

ipcMain.handle('greet', async (event, name) => {
 return `Hello, ${name}!`;
});

方式 2：send / on（单向）

渲染进程：

1
2
3
4


window.api.sendMessage('用户点击了');
window.api.onReply((event, data) => {
 console.log('收到主进程回复:', data);
});

preload.js：

1
2
3
4


contextBridge.exposeInMainWorld('api', {
 sendMessage: (msg) => ipcRenderer.send('message', msg),
 onReply: (callback) => ipcRenderer.on('reply', callback),
});

主进程：

1
2
3
4


ipcMain.on('message', (event, msg) => {
 console.log('收到:', msg);
 event.sender.send('reply', '已收到');
});

主进程 API

菜单

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26


const { Menu, app } = require('electron');

const template = [
 {
 label: '文件',
 submenu: [
 { label: '新建', accelerator: 'CmdOrCtrl+N', click: () => { /* ... */ } },
 { type: 'separator' },
 { role: 'quit' },
 ],
 },
 {
 label: '编辑',
 submenu: [
 { role: 'undo' },
 { role: 'redo' },
 { type: 'separator' },
 { role: 'cut' },
 { role: 'copy' },
 { role: 'paste' },
 ],
 },
];

const menu = Menu.buildFromTemplate(template);
Menu.setApplicationMenu(menu);

对话框

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22


const { dialog } = require('electron');

// 打开文件
const result = await dialog.showOpenDialog({
 title: '选择文件',
 filters: [{ name: 'Text', extensions: ['txt', 'md'] }],
});
console.log(result.filePaths);

// 保存文件
const result = await dialog.showSaveDialog({
 title: '保存',
 defaultPath: 'untitled.txt',
});

// 消息框
await dialog.showMessageBox({
 type: 'info',
 title: '提示',
 message: '操作成功',
 detail: '已保存到磁盘',
});

系统托盘

1
2
3
4
5
6
7
8


const { Tray, Menu, nativeImage } = require('electron');

const tray = new Tray(nativeImage.createEmpty());
tray.setToolTip('My App');
tray.setContextMenu(Menu.buildFromTemplate([
 { label: '显示', click: () => { /* show window */ } },
 { label: '退出', click: () => { app.quit(); } },
]));

通知

1
2
3
4


new Notification({
 title: '新消息',
 body: 'Hello from main process',
}).show();

文件系统

主进程用 fs，渲染进程通过 IPC：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10


// 主进程
ipcMain.handle('read-file', async (event, path) => {
 const fs = require('fs/promises');
 return await fs.readFile(path, 'utf8');
});

ipcMain.handle('write-file', async (event, path, content) => {
 const fs = require('fs/promises');
 await fs.writeFile(path, content);
});

渲染进程访问

完整框架（React / Vue）

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17


# React + Vite
npm create vite@latest my-electron-app -- --template react-ts
cd my-electron-app
npm install
npm install --save-dev electron electron-builder

# 配置 vite.config.ts
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

export default defineConfig({
 base: './',
 plugins: [react()],
 build: {
 outDir: 'dist',
 },
});

1
2
3
4
5
6
7


// package.json
"main": "main.js",
"scripts": {
 "dev": "concurrently \"vite\" \"electron .\"",
 "build": "vite build",
 "package": "electron-builder"
}

文件结构

 1
 2
 3
 4
 5
 6
 7
 8
 9
10


my-electron-app/
├── electron/
│ ├── main.js
│ └── preload.js
├── src/
│ ├── App.tsx
│ └── main.tsx
├── index.html
├── vite.config.ts
└── package.json

打包分发

electron-builder

1

npm install --save-dev electron-builder

package.json：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28


{
 "build": {
 "appId": "com.example.myapp",
 "productName": "MyApp",
 "directories": {
 "output": "dist"
 },
 "files": [
 "electron/**/*",
 "dist/**/*",
 "package.json"
 ],
 "win": {
 "target": ["nsis", "portable"],
 "icon": "build/icon.ico"
 },
 "mac": {
 "target": ["dmg", "zip"],
 "icon": "build/icon.icns",
 "category": "public.app-category.developer-tools"
 },
 "linux": {
 "target": ["AppImage", "deb"],
 "icon": "build/icon.png",
 "category": "Development"
 }
 }
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10


# 用 forge 一键导入
npx electron-forge import

# 打包
npm run make

# 结果
# Windows: out/MyApp Setup 1.0.0.exe
# macOS: out/MyApp-1.0.0.dmg
# Linux: out/MyApp-1.0.0.AppImage

electron-forge（替代方案）

1
2
3


npm install --save-dev @electron-forge/cli
npx electron-forge import
npm run make

安全最佳实践

必须开启

1
2
3
4
5
6
7
8


new BrowserWindow({
 webPreferences: {
 contextIsolation: true, // 沙箱
 nodeIntegration: false, // 渲染进程禁用 Node
 sandbox: true, // Chromium 沙箱
 preload: path.join(__dirname, 'preload.js'),
 },
});

关闭新窗口

1
2
3
4
5
6


app.on('web-contents-created', (event, contents) => {
 contents.setWindowOpenHandler(({ url }) => {
 require('electron').shell.openExternal(url);
 return { action: 'deny' };
 });
});

CSP

1
2


<meta http-equiv="Content-Security-Policy"
 content="default-src 'self'; script-src 'self'">

自动更新

1

npm install --save-dev electron-updater

1
2
3
4


// main.js
const { autoUpdater } = require('electron-updater');

autoUpdater.checkForUpdatesAndNotify();

package.json：

1
2
3
4
5
6
7


"build": {
 "publish": {
 "provider": "github",
 "owner": "yourname",
 "repo": "myapp"
 }
}

性能优化

开启 V8 缓存：--js-flags="--max-old-space-size=4096"
启用 lazy load：路由懒加载
Web Worker 处理密集计算
offscreen 渲染：截图 / 录屏

常见问题

启动白屏

通常是预加载脚本报错。检查 preload.js 路径和 contextBridge 用法。

require is not defined

渲染进程不能直接用 require，必须通过 preload.js 暴露。

跨域请求

主进程可以任意跨域；渲染进程需要用 IPC 转发到主进程发起请求。

macOS 签名

1
2
3


# 开发者证书
codesign --deep --force --verify --verbose --sign "Developer ID Application: Name" MyApp.app
xcrun notarytool submit MyApp.zip --keychain-profile "AC_PASSWORD"

下一步

Tauri 2.x 实战，看 2020-05-15《Tauri 2.x 跨平台桌面应用》
桌面开发技术栈对比，看 2014-08-15《桌面开发技术栈对比》

参考资料

Electron 官方：https://www.electronjs.org/
Electron 文档：https://www.electronjs.org/docs/latest/
electron-builder：https://www.electron.build/
electron-forge：https://www.electronforge.io/
Awesome Electron：https://github.com/sindresorhus/awesome-electron

桌面开发技术栈对比：Electron vs Tauri vs Qt vs Fyne

Fri, 15 Aug 2014 00:00:00 +0800

跨平台桌面应用 4 大技术栈

技术	底层	语言	包大小	性能	生态
Electron	Chromium + Node.js	JS/TS	80~150MB	★★★	★★★★★
Tauri	系统 WebView + Rust	TS + Rust	2~10MB	★★★★★	★★★
Qt	Qt 库	C++ / QML / Python	30~80MB	★★★★★	★★★★
Fyne	系统 GUI	Go	10~30MB	★★★★	★★

一、Electron

原理

Chromium：渲染 UI（每个窗口一个）
Node.js：调用本地 API（文件系统、进程、IPC）
主进程 + 渲染进程：主进程（Node.js）管理窗口，渲染进程（Chromium）展示 UI

优势

Web 生态完整：React、Vue 任意用
跨平台：Windows / macOS / Linux 一套代码
第三方 SDK 丰富：自动更新、native dialog、native menu

劣势

包大：80MB 起步
内存高：每个窗口一个 Chromium
性能：JS 引擎有 GC 抖动

代表应用

VSCode、Slack、Discord、Notion、Postman、Figma Desktop

适用场景

内部工具 / 中后台
重 UI 重数据展示
团队 JS 技术栈

二、Tauri

原理

系统 WebView：Windows 用 WebView2，macOS 用 WKWebView，Linux 用 WebKitGTK
Rust 后端：编译成原生二进制，提供 IPC、文件系统、shell 等
前端任意：React / Vue / Svelte / Solid / 纯 HTML

优势

极小包：2~10MB（vs Electron 80MB）
低内存：复用系统 WebView
Rust 后端：性能强、安全（内存安全）
细粒度权限：声明式 ACL

劣势

WebView 跨平台表现不一致（Windows 较新，Linux GTK 旧）
生态比 Electron 小
学习曲线：Rust + 前端

代表应用

各种 Rust 生态工具
部分 VSCode 插件、Cursor 编辑器
OpenCode、cc-connect、tinyhumans/openhuman

适用场景

追求包大小 / 启动速度
Rust 团队
命令行 + GUI 一体

三、Qt

原理

Qt 库：跨平台 C++ GUI 库
QWidget：传统 UI
QML：声明式 UI（类 QML + JavaScript）
PyQt / PySide：Python 绑定

优势

性能极强：原生绘制
跨平台：Windows / macOS / Linux / Android / iOS / 嵌入式
工业级：KDE、Autodesk Maya、VirtualBox、VLC
工具链成熟：Qt Creator IDE

劣势

学习曲线陡：C++ + Qt 框架
商业授权：LGPL / GPL / Commercial 三种
包大：30MB+
UI 不够现代（vs Web）

适用场景

工业控制 / 嵌入式 UI
科学计算 / 数据可视化
跨平台 + 高性能

四、Fyne

原理

Go 语言：编译成单一二进制
系统原生控件：Windows GDI、macOS Cocoa、Linux GTK
声明式 API：类 Flutter 风格

优势

跨平台编译：Go 一份代码，Windows/macOS/Linux 任意编译
单二进制：无外部依赖
小包：10~30MB
简单易学

劣势

生态小：第三方库少
UI 不够丰富：控件有限
性能中等：没有 GPU 加速

适用场景

Go 团队
内部工具
简单桌面应用

详细对比

包大小

应用	Electron	Tauri	Qt	Fyne
Hello World	80MB	3MB	30MB	12MB
复杂应用（VSCode 级别）	200MB+	15MB	100MB	40MB

启动时间

应用	Electron	Tauri	Qt	Fyne
冷启动	1.5~3s	0.3~1s	0.2~0.5s	0.5~1s
热启动	0.5~1s	0.1~0.3s	0.1~0.2s	0.2~0.5s

内存占用

应用	Electron	Tauri	Qt	Fyne
空闲	100~200MB	30~80MB	20~50MB	30~70MB
复杂场景	500MB+	150MB	100MB	150MB

选型决策树

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12


你的团队用什么语言？
├── JS/TS → Electron（生态最好）
├── Rust → Tauri（性能 + 体积最优）
├── C++ → Qt（性能 + 工业级）
├── Go → Fyne（最简单）
└── Python → PyQt / PySide

你的核心需求是？
├── 包小 + 快 → Tauri
├── 生态丰富 → Electron
├── 高性能 3D / 工业 → Qt
└── Go 写小工具 → Fyne

安装包大小优化

Electron

移除不必要的依赖
用 electron-builder 拆分 platform / arch
用 asar 压缩资源

Tauri

用 release 模式（默认）
启用 LTO（Link Time Optimization）
拆分 release（不同 OS 单独打包）

Qt

静态链接 vs 动态链接
删除用不到的 Qt 模块

Fyne

UPX 压缩
Go 1.20+ 链接器优化

跨平台坑

macOS

签名 + 公证（notarization）必需
沙箱（sandbox）
Apple Silicon（arm64）vs Intel（x64）

Linux

各种发行版：deb / rpm / AppImage / Flatpak
WebView 版本：Ubuntu LTS 用 snap，WebView 是 Chromium

Windows

32 / 64 位
WebView2 Runtime（Win10 1803+ 预装，旧版需引导安装）

下一步

Electron 入门，看 2018-12-15《Electron 跨平台桌面应用》
Tauri 2.x 实战，看 2020-05-15《Tauri 2.x 跨平台桌面应用》
Fyne 入门，看 2016-10-15《Go-Fyne 入门》

参考资料

Electron 官方：https://www.electronjs.org/
Tauri 官方：https://tauri.app/
Qt 官方：https://www.qt.io/
Fyne 官方：https://fyne.io/
Wails（Go + WebView）：https://wails.io/
Flutter Desktop：https://flutter.dev/desktop