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. 初始化项目

bash 复制代码

mkdir my-electron-app
cd my-electron-app
npm init -y

2. 安装 Electron

bash 复制代码

npm install electron --save-dev

📁 项目结构

复制代码

my-electron-app/
├── package.json
├── main.js          // 主进程入口
├── index.html       // 应用页面
└── preload.js       // 可选：渲染进程预加载脚本

🧠 主进程代码（main.js）

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）

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 中添加启动脚本：

json 复制代码

"scripts": {
  "start": "electron ."
}

运行项目：

bash 复制代码

npm start

你将看到一个桌面窗口，显示着我们写的 HTML 页面。

✨ 进阶功能建议

功能	简介
`preload.js`	安全桥接 Node 与页面
`ipcMain` / `ipcRenderer`	主进程与渲染进程通信
文件读写	使用 Node.js API 操作文件系统
菜单栏	自定义应用菜单栏
自动更新	集成 Electron-updater
打包发布	使用 Electron Forge 或 Electron Builder

✅ 示例：添加渲染进程与主进程通信

preload.js

js 复制代码

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

contextBridge.exposeInMainWorld('myAPI', {
  sayHello: () => ipcRenderer.send('hello'),
});

index.html

html 复制代码

<button onclick="window.myAPI.sayHello()">点击打招呼</button>

main.js 中监听

js 复制代码

const { ipcMain } = require('electron');
ipcMain.on('hello', () => {
  console.log('收到来自渲染进程的问候！');
});

📦 打包发布

推荐使用 Electron Forge：

bash 复制代码

npx create-electron-app my-app --template=webpack

或使用 Electron Builder：

bash 复制代码

npm install electron-builder --save-dev

并在 package.json 中配置 build 字段。

🧾 总结

步骤	操作
初始化项目	`npm init -y`
安装 Electron	`npm install electron --save-dev`
创建主进程	编写 `main.js`
创建页面	编写 `index.html`
运行应用	`npm start`