electron桌面开发

摘要：

Electron 是一个使用 JavaScript、HTML 和 CSS 构建跨平台桌面应用的开源框架，核心是 Chromium + Node.js，能让前端开发者快速写出 Windows/macOS/Linux 应用。

一、Electron 核心概念

主进程 (Main Process)
入口：main.js
管理应用生命周期、窗口、系统托盘、菜单、底层 API（文件、网络、硬件）
渲染进程 (Renderer Process)
就是浏览器页面（HTML/CSS/JS）
负责 UI 渲染与用户交互
IPC 通信
主 ↔ 渲染进程通过 ipcMain / ipcRenderer 消息通信

安全模式（推荐）

nodeIntegration: false + contextIsolation: true
用 preload.js 桥接暴露有限 API

二、典型应用（你每天都在用）

VS Code、Slack、Discord、飞书、钉钉、Notion、剪映专业版、腾讯会议

三、优缺点

✅ 优点

一套代码跑 Windows/macOS/Linux
前端直接上手，不用学 C++/C#/Swift
npm 生态极强（React/Vue/ 工具库直接用）
热更新、自动打包成熟
MIT 开源免费

❌ 缺点

包体积大（80MB+）、内存占用偏高
性能不如原生（不适合重度 3D / 超密集计算）

四、快速上手（5 步）

1. 环境准备

安装 Node.js LTS（v18+/v20+）

bash 复制代码

node -v  # v18+
npm -v   # 8+

2. 初始化项目

bash 复制代码

mkdir my-electron-app && cd my-electron-app
npm init -y
npm install --save-dev electron

3. 项目结构

bash 复制代码

my-electron-app/
├── package.json
├── main.js       # 主进程
├── index.html    # 渲染页面
└── preload.js    # 安全桥接（推荐）

4. 编写代码

package.json

bash 复制代码

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

main.js（主进程

bash 复制代码

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

function createWindow() {
  const win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: false,
      contextIsolation: true,
      preload: path.join(__dirname, 'preload.js')
    }
  })
  win.loadFile('index.html')
  win.webContents.openDevTools() // 开发用
}

app.whenReady().then(createWindow)

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

// IPC 示例：接收渲染消息
ipcMain.handle('getAppPath', () => app.getPath('userData'))

preload.js（安全桥接）

bash 复制代码

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

contextBridge.exposeInMainWorld('electronAPI', {
  getAppPath: () => ipcRenderer.invoke('getAppPath')
})

index.html

bash 复制代码

<!DOCTYPE html>
<html>
<body>
  <h1>Hello Electron</h1>
  <p id="path"></p>
  <script>
    window.electronAPI.getAppPath().then(path => {
      document.getElementById('path').textContent = path
    })
  </script>
</body>
</html>

5. 运行

bash 复制代码

npm start

五、打包发布（生成安装包）

使用 electron-builder

bash 复制代码

npm install --save-dev electron-builder

package.json 加脚本

bash 复制代码

"scripts": {
  "start": "electron .",
  "build": "electron-builder"
}

打包（三平台）

bash 复制代码

npm run build          # 当前平台
npm run build --win    # Windows
npm run build --mac    # macOS
npm run build --linux  # Linux

六、常用功能（API 速览）

窗口管理：BrowserWindow、透明、无边框、置顶
系统菜单 / 托盘：Menu、Tray
文件操作：Node.js fs + Electron dialog 选择文件
自动更新：electron-updater
快捷键、剪贴板、打印、网络、系统信息
Vue/React 集成：直接用 vue create / create-react-app + Electron

七、选型建议

适合 Electron
前端团队想快速做桌面工具
跨平台（Windows/macOS/Linux）
办公、IM、编辑器、管理后台、轻量工具
Web 应用转桌面

不适合

游戏、3D 渲染、超高性能计算
极小体积（<10MB）需求