🌟 为什么选择Electron？

+ 使用HTML/CSS/JS构建跨平台应用
+ 支持Windows/macOS/Linux三大系统
+ 已有VSCode/Slack/Notion等成功案例
+ 可访问完整Node.js和浏览器API
- 安装包体积较大（约120MB基础大小）

🚀 5分钟环境搭建

1. 初始化项目

mkdir electron-demo && cd electron-demo
npm init -y
npm install electron --save-dev

2. 基础目录结构

.
├── main.js         # 主进程
├── preload.js      # 预加载脚本
├── index.html      # 渲染进程入口
├── package.json
└── src/            # 前端源码目录

3. 配置启动脚本

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

💡 核心概念解析

1. 主进程 vs 渲染进程

graph LR
  A[Main Process] -->|IPC| B[Renderer Process]
  B -->|IPC| A
  A -->|创建| B
  A --> Node.js全功能
  B --> 浏览器环境

2. 进程间通信(IPC)

// 主进程
const { ipcMain } = require('electron')
ipcMain.handle('get-data', () => 'Hello from Main!')

// 渲染进程
const { ipcRenderer } = require('electron')
const data = await ipcRenderer.invoke('get-data')

🔥 六大实战场景

场景1：系统托盘菜单

// 主进程
const { Tray } = require('electron')
let tray = new Tray('icon.png')
tray.setToolTip('我的应用')
tray.setContextMenu(Menu.buildFromTemplate([
  { label: '退出', click: () => app.quit() }
]))

场景2：本地文件操作

// 渲染进程
const fs = require('fs/promises')
const data = await fs.readFile('data.txt', 'utf-8')

场景3：系统对话框

// 主进程
const { dialog } = require('electron')
dialog.showOpenDialog({
  properties: ['openFile']
}).then(result => {
  console.log('选择文件:', result.filePaths)
})

🛠️ 调试与优化

1. 调试工具

// 主进程调试
mainWindow.webContents.openDevTools()

// 渲染进程调试
// 直接使用浏览器开发者工具

2. 安全配置

// 禁用危险功能
new BrowserWindow({
  webPreferences: {
    nodeIntegration: false,
    contextIsolation: true,
    preload: path.join(__dirname, 'preload.js')
  }
})

3. 性能优化策略

// 使用Web Workers处理耗时任务
const worker = new Worker('worker.js')
worker.postMessage({ data: largeData })

📦 应用打包部署

1. 安装构建工具

npm install electron-builder --save-dev

2. 配置构建参数

// package.json
"build": {
  "appId": "com.example.myapp",
  "productName": "我的应用",
  "directories": {
    "output": "dist"
  }
}

3. 生成安装包

npm run build
# 输出结果：
# • dist/
#   ├── my-app-1.0.0.dmg       (macOS)
#   ├── my-app Setup 1.0.0.exe (Windows)
#   └── linux-unpacked/        (Linux)

⚠️ 常见问题指南

1. 白屏问题排查

// 检查加载路径
mainWindow.loadFile('index.html')
// 或
mainWindow.loadURL('http://localhost:3000')

2. 版本兼容处理

// package.json
"devDependencies": {
  "electron": "^28.0.0"
}

3. 原生模块编译

# 安装node-gyp
npm install -g node-gyp
# 重建原生模块
npm rebuild --runtime=electron --target=28.0.0

+ 推荐工具：electron-store（本地存储）、electron-log（日志记录）
+ 最佳实践：保持主进程精简，复杂逻辑放在渲染进程
- 注意：生产环境禁用开发者工具