Electron 从零开始：构建你的第一个桌面应用
🖥️ Electron 从零开始：构建你的第一个桌面应用
Electron 是一个可以使用 HTML、CSS 和 JavaScript 构建跨平台桌面应用的框架。它将 Chromium 和 Node.js 融合到一个环境中，使 Web 开发者也能轻松开发原生桌面应用。
🚀 什么是 Electron？
Electron 是由 GitHub 开发的开源框架，底层基于：
- Chromium：负责 UI 渲染
- Node.js：处理文件系统、后端逻辑
广受欢迎的桌面应用如 VS Code、Slack、Postman 都是基于 Electron 构建的。
🧰 开发环境准备
- 安装 Node.js（建议版本 ≥ 16）
- 安装
npm（随 Node.js 自带）
🛠️ 创建你的第一个 Electron 应用
1. 初始化项目
mkdir my-electron-app
cd my-electron-app
npm init -y
2. 安装 Electron
npm install electron --save-dev
📁 项目结构
my-electron-app/
├── package.json
├── main.js // 主进程入口
├── index.html // 应用页面
└── preload.js // 可选：渲染进程预加载脚本
🧠 主进程代码（main.js）
const { app, BrowserWindow } = require('electron');
const path = require('path');function createWindow() {const win = new BrowserWindow({width: 800,height: 600,webPreferences: {preload: path.join(__dirname, 'preload.js') // 可选}});win.loadFile('index.html');
}app.whenReady().then(() => {createWindow();app.on('activate', () => {if (BrowserWindow.getAllWindows().length === 0) createWindow();});
});app.on('window-all-closed', () => {if (process.platform !== 'darwin') app.quit();
});
🌐 页面内容（index.html）
<!DOCTYPE html>
<html><head><meta charset="UTF-8" /><title>Hello Electron</title></head><body><h1>Hello, Electron!</h1><p>这是你的第一个桌面应用。</p></body>
</html>
⚙️ 运行应用
在 package.json 中添加启动脚本：
"scripts": {"start": "electron ."
}
运行项目：
npm start
你将看到一个桌面窗口，显示着我们写的 HTML 页面。
✨ 进阶功能建议
| 功能 | 简介 |
|---|---|
preload.js | 安全桥接 Node 与页面 |
ipcMain / ipcRenderer | 主进程与渲染进程通信 |
| 文件读写 | 使用 Node.js API 操作文件系统 |
| 菜单栏 | 自定义应用菜单栏 |
| 自动更新 | 集成 Electron-updater |
| 打包发布 | 使用 Electron Forge 或 Electron Builder |
✅ 示例：添加渲染进程与主进程通信
preload.js
const { contextBridge, ipcRenderer } = require('electron');contextBridge.exposeInMainWorld('myAPI', {sayHello: () => ipcRenderer.send('hello'),
});
index.html
<button onclick="window.myAPI.sayHello()">点击打招呼</button>
main.js 中监听
const { ipcMain } = require('electron');
ipcMain.on('hello', () => {console.log('收到来自渲染进程的问候！');
});
📦 打包发布
推荐使用 Electron Forge：
npx create-electron-app my-app --template=webpack
或使用 Electron Builder：
npm install electron-builder --save-dev
并在 package.json 中配置 build 字段。
🧾 总结
| 步骤 | 操作 |
|---|---|
| 初始化项目 | npm init -y |
| 安装 Electron | npm install electron --save-dev |
| 创建主进程 | 编写 main.js |
| 创建页面 | 编写 index.html |
| 运行应用 | npm start |