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 Electrontitle>
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 |