📌 目录

  1. 什么是 Electron？为什么要学？
  2. Electron 的应用场景
  3. 快速搭建第一个 Electron 应用
  4. 主进程 vs 渲染进程（核心概念）
  5. 常用 API 与主流功能演示
  6. 打包成桌面应用（Windows/macOS/Linux）
  7. 开发技巧与项目结构建议
  8. Electron 踩坑与调试技巧
  9. 学完之后能做什么？
  10. 推荐资源与进阶方向

1️⃣ 什么是 Electron？为什么要学？

Electron 是一个基于 Chromium 和 Node.js 的跨平台桌面应用开发框架。

  • 使用 HTML + CSS + JavaScript 构建原生桌面应用
  • 支持 Windows / macOS / Linux 三大平台
  • 代表作：VSCode、Postman、Slack、微信开发者工具

🎯 适合人群：

  • 前端开发者想做桌面应用
  • 需要构建内网工具、数据可视化客户端
  • 想统一 Web + 桌面体验的团队

2️⃣ Electron 的应用场景

  • 企业内部桌面工具（数据库客户端、任务调度器）
  • 跨平台轻量客户端（如 Markdown 编辑器）
  • 封装 Web 应用为桌面软件（如 ChatGPT 桌面版）
  • 数据可视化、监控仪表盘

3️⃣ 快速搭建第一个 Electron 应用

✅ 初始化项目

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

✅ 添加启动脚本（package.json）

"scripts": {
  "start": "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><title>My App</title></head>
  <body>
    <h1>欢迎使用 Electron</h1>
    <button onclick="alert('你点击了按钮')">点我</button>
  </body>
</html>

✅ 启动应用：

npm start

4️⃣ 主进程 vs 渲染进程

名称作用
主进程 main创建窗口，控制应用生命周期
渲染进程 UI渲染 HTML 页面，处理交互
  • 主进程相当于后台服务
  • 渲染进程相当于每个页面的浏览器环境

👉 可以使用 ipcMain 和 ipcRenderer 实现主渲染进程通信

5️⃣ 常用功能 API 示例

✅ 打开文件对话框

const { dialog } = require('electron');
dialog.showOpenDialog({ properties: ['openFile'] }).then(result => {
  console.log(result.filePaths);
});

✅ 创建托盘菜单（Tray）

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

✅ 渲染进程调用主进程（通信）

// main.js
ipcMain.on('msg-from-renderer', (event, arg) => {
  console.log(arg);
  event.reply('reply-from-main', '收到！');
});

// renderer.js
const { ipcRenderer } = require('electron');
ipcRenderer.send('msg-from-renderer', '你好主进程');
ipcRenderer.on('reply-from-main', (event, msg) => alert(msg));

6️⃣ 打包为桌面应用（跨平台）

安装打包工具：

npm install electron-packager -g

打包：

electron-packager . MyApp --platform=win32 --arch=x64 --overwrite

输出目录中将会生成可运行的 .exe 文件！

👉 推荐使用更现代的 electron-builder：

npm install electron-builder --save-dev

7️⃣ 项目结构建议（大型应用）

📦my-electron-app
 ┣ 📁src
 ┃ ┣ 📄main.js         # 主进程入口
 ┃ ┣ 📄preload.js      # 预加载脚本（增强安全）
 ┃ ┗ 📁renderer        # 前端页面源码
 ┣ 📁public             # 静态资源
 ┣ 📄package.json
 ┗ 📄index.html

8️⃣ 踩坑与调试技巧

问题解决方案
Node.js 模块无法使用nodeIntegration: true 或用 preload.js 暴露接口
页面跨域使用 contextIsolation: false 仅限开发阶段
打包后闪退检查资源路径、打包配置是否正确
白屏问题页面路径写错或未加载完成，建议加 win.webContents.openDevTools() 观察日志

9️⃣ 学完之后能做什么？

  • 做一个本地运行的记事本、密码管理器、SQL 客户端
  • 把 Vue/React 项目一键打包为桌面软件
  • 做企业内部工具客户端（如数据同步、爬虫前端）
  • 制作自己的软件产品并发布

🔗 10. 推荐学习资源

✅ 总结

项内容
开发语言HTML + JS + Node.js
优势跨平台、高自由度、前端友好
应用场景本地工具、可视化平台、企业客户端
是否适合入门非常适合！一小时即可见成果