Electron 新手入门指南：用 Web 技术构建跨平台桌面应用

欢迎来到 Electron 的世界！如果你是一名熟悉 Web 开发（HTML、CSS、JavaScript）的开发者，并且梦想着构建能够运行在 Windows、macOS 和 Linux 上的桌面应用程序，那么 Electron 绝对是你需要掌握的利器。

本指南将带你从零开始，一步步了解 Electron 是什么、为什么选择它、它的核心概念，并手把手教你搭建一个最简单的 Electron 应用，最终让你能够开启自己的桌面应用开发之旅。

预计阅读时间： 约 15-20 分钟
目标读者： 熟悉 Web 前端开发，对桌面应用开发感兴趣的初学者。

第一部分：认识 Electron – 这是什么，为什么用它？

1. Electron 是什么？

简单来说，Electron 是一个开源框架，它允许你使用 Web 技术 (HTML, CSS, JavaScript) 构建跨平台的桌面应用程序。它将 Chromium (Google Chrome 浏览器背后的开源项目，负责页面渲染) 和 Node.js (一个 JavaScript 运行时环境，用于后端开发或系统级操作) 结合在一起。

这意味着，你可以利用你现有的 Web 开发技能，结合 Node.js 强大的系统访问能力，来创建功能丰富的桌面应用，而无需学习 C++、C# 或 Objective-C 等传统的桌面开发语言。

2. 为什么选择 Electron？

跨平台性 (Cross-Platform): 一次开发，多平台运行。这是 Electron 最大的优势。你写的代码可以在 Windows、macOS 和 Linux 上几乎无差别地运行。这极大地节省了开发时间和成本。
利用现有技能 (Leverage Web Skills): 如果你已经是前端开发者，你几乎可以直接上手 Electron。你熟悉的 HTML 负责界面布局，CSS 负责样式美化，JavaScript 负责逻辑交互。
访问底层系统资源 (Access System APIs): Node.js 环境让你的应用能够访问文件系统、操作系统通知、原生菜单等桌面环境特有的功能，这是纯粹的浏览器环境做不到的。
丰富的生态系统 (Rich Ecosystem): 得益于 Node.js 和 npm（Node 包管理器），你可以使用海量的现有 JavaScript 库和模块，无论是前端框架（React, Vue, Angular）还是各种实用工具库。
强大的社区支持 (Strong Community): Electron 有着庞大的开发者社区和活跃的维护者，遇到问题很容易找到解决方案。
众多成功案例 (Proven Success): 许多流行的桌面应用都是用 Electron 构建的，例如：
- Visual Studio Code (VS Code)
- Slack
- Discord
- GitHub Desktop
- 钉钉
- 等等…

3. Electron 的适用场景

需要构建跨平台的桌面客户端。
团队成员主要熟悉 Web 开发技术。
应用需要与操作系统进行深度交互（文件操作、通知、原生菜单等）。
希望快速迭代和部署桌面应用。

4. Electron 的潜在缺点（需要了解）

性能开销 (Performance Overhead): 由于包含了完整的 Chromium 浏览器和 Node.js 环境，Electron 应用通常比原生应用占用更多的内存和磁盘空间。对于对性能要求极致、资源极其有限的应用，Electron 可能不是最佳选择。
打包体积 (Bundle Size): 打包后的应用体积相对较大，因为它需要包含整个 Electron 运行时。
安全性考虑 (Security Concerns): 如果处理不当，尤其是在加载远程内容或允许渲染进程直接访问 Node.js API 时，可能存在安全风险。需要遵循 Electron 的安全最佳实践。

尽管存在这些缺点，对于大多数业务应用、工具类应用、客户端应用而言，Electron 的跨平台和开发效率优势往往 outweighs 其性能开销。

第二部分：环境准备

在开始构建 Electron 应用之前，你需要确保你的开发环境已经准备就绪。Electron 是基于 Node.js 构建的，所以你需要安装 Node.js 和其附带的 npm (Node Package Manager)。

1. 安装 Node.js 和 npm

访问 Node.js 官网: 前往 https://nodejs.org/
下载安装包: 通常推荐下载 LTS (长期支持) 版本，它更稳定。根据你的操作系统下载对应的安装包（Windows .msi，macOS .pkg）。
运行安装程序: 按照安装向导的提示进行安装。大多数情况下，一路点击“下一步”并接受默认设置即可。Node.js 安装包通常会同时安装 npm。
验证安装: 安装完成后，打开你的终端或命令行工具（Windows 用户推荐使用 Git Bash 或 PowerShell，macOS/Linux 用户使用自带终端），输入以下命令检查 Node.js 和 npm 是否安装成功以及版本号：

bash node -v npm -v

如果看到版本号输出，说明安装成功。

2. 创建项目文件夹

在你的文件系统中选择一个合适的位置，创建一个新的文件夹来存放你的 Electron 项目。打开终端，进入这个文件夹：

bash mkdir my-electron-app cd my-electron-app

第三部分：核心概念解析

在开始写代码之前，理解 Electron 的一些核心概念至关重要。这是 Electron 与传统 Web 开发最主要的区别所在。

Electron 应用包含两个主要的进程类型：主进程 (Main Process) 和 渲染进程 (Renderer Process)。

1. 主进程 (Main Process)

唯一性: 一个 Electron 应用只有一个主进程。
角色: 主进程负责管理整个应用程序的生命周期，包括创建和管理应用程序窗口、处理系统事件（如应用启动、关闭）、访问原生操作系统 API（如文件系统、菜单、通知、电源管理等）。
环境: 主进程运行在一个 Node.js 环境中。这意味着你可以在主进程中使用 Node.js 的所有模块，例如 fs (文件系统)、path (路径处理) 等。
入口: Electron 应用的入口点通常是一个 JavaScript 文件（在 package.json 中配置），这个文件就是在主进程中运行的。我们通常把这个文件命名为 main.js。
不能直接访问 DOM: 主进程无法直接访问网页的文档对象模型 (DOM)，因为它没有运行在浏览器窗口的环境中。

2. 渲染进程 (Renderer Process)

多实例: 每个 Electron 窗口 (即 BrowserWindow 实例) 都运行在独立的一个渲染进程中。就像浏览器中的每一个标签页都运行在自己的进程中一样。
角色: 渲染进程负责显示网页界面（HTML、CSS、JavaScript）。它运行在一个 Chromium 浏览器环境中。
环境: 渲染进程拥有完整的浏览器环境，包括 window、document 对象，可以使用所有标准的 Web API。
限制: 渲染进程默认不直接访问 Node.js 的原生模块（为了安全考虑）。尽管旧版本可以开启 nodeIntegration: true，但这被认为是不安全的，推荐使用更安全的方式（如 contextBridge）。
可以访问 DOM: 渲染进程可以像普通网页一样访问和操作 DOM。

3. 主进程与渲染进程的区别和联系

理解这两者的区别非常重要：

特性	主进程 (Main Process)	渲染进程 (Renderer Process)
数量	唯一一个	每个窗口一个
环境	Node.js	Chromium (浏览器环境)
职责	应用生命周期、窗口管理、原生API	界面渲染、用户交互
访问能力	文件系统、网络、原生模块等	DOM、BOM、Web API（如 `fetch`）
入口	`package.json` 指定的主脚本	`BrowserWindow` 加载的 HTML 文件
相互通信	需要通过 IPC (Inter-Process Communication)	需要通过 IPC (Inter-Process Communication)

由于主进程和渲染进程运行在不同的环境中，它们不能像普通的 JavaScript 函数调用那样直接相互通信。它们需要通过一种机制来进行通信，这就是 IPC (Inter-Process Communication)。

4. IPC (Inter-Process Communication)

作用: IPC 是主进程和渲染进程之间发送消息和数据的桥梁。
模块: Electron 提供了 ipcMain 模块用于主进程，ipcRenderer 模块用于渲染进程。
基本模式:
- 渲染进程向主进程发送消息 (ipcRenderer.send())。主进程监听消息 (ipcMain.on()) 并处理。
- 主进程向渲染进程发送消息 (webContents.send())。渲染进程监听消息 (ipcRenderer.on()) 并处理。
- 渲染进程向主进程发送同步或异步请求并等待响应 (ipcRenderer.sendSync() / ipcRenderer.invoke())。主进程同步或异步地响应 (ipcMain.on() / ipcMain.handle())。invoke/handle 是异步模式，推荐使用。

例如，当你在渲染进程中点击一个按钮，想让主进程打开一个文件选择对话框时，你就需要通过 ipcRenderer 发送一个消息给主进程，主进程收到消息后调用 Electron 提供的原生对话框 API (dialog.showOpenDialog)，然后可能再通过 ipcMain 发送结果回渲染进程。

第四部分：构建一个简单的 Electron 应用

现在，我们来动手创建一个最简单的 Electron 应用。

1. 初始化项目

在之前创建的 my-electron-app 文件夹中，打开终端，运行 npm 初始化命令：

bash npm init -y

这个命令会在当前目录下创建一个 package.json 文件，它包含了项目的基本信息和依赖。-y 参数会跳过互动提问，使用默认值。

2. 安装 Electron

接下来，我们将 Electron 安装到项目中。

bash npm install electron --save-dev

install electron: 告诉 npm 安装 Electron 包。
--save-dev: 将 Electron 添加到 package.json 文件的 devDependencies（开发依赖）中。这意味着 Electron 是开发时需要的，而不是应用运行时必须包含在最终发布包中的（Electron 本身就是运行时）。

安装完成后，你会看到一个 node_modules 文件夹和 package-lock.json 文件。

3. 创建主进程文件 (`main.js`)

在 my-electron-app 文件夹的根目录创建一个名为 main.js 的文件。这是应用的主入口。

“`javascript
// 引入 electron 模块中的 app 和 BrowserWindow
const { app, BrowserWindow } = require(‘electron’)
const path = require(‘path’)

// 创建一个新窗口的函数
const createWindow = () => {
// 创建浏览器窗口
const mainWindow = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
// preload 脚本在渲染进程加载前执行，
// 可以在这里安全地暴露一些 API 给渲染进程
// 为了安全，通常不在这里开启 nodeIntegration
// nodeIntegration: false,
// contextIsolation: true, // 启用上下文隔离，这是推荐的安全设置
preload: path.join(__dirname, ‘preload.js’) // 后续可以添加 preload 脚本
}
})

// 加载 index.html 文件到窗口
// 使用 path.join 可以确保跨平台路径的正确性
mainWindow.loadFile(path.join(__dirname, ‘index.html’))

// 打开开发者工具 (可选，方便调试)
// mainWindow.webContents.openDevTools()
}

// 当 Electron 完成初始化并准备创建浏览器窗口时调用此方法
// 部分 API 只能在此事件发生后使用
app.whenReady().then(() => {
createWindow()

// 在 macOS 上，当 dock 图标被点击，且没有其他窗口打开时，
// 通常会重新创建一个窗口。实现这个行为。
app.on(‘activate’, () => {
if (BrowserWindow.getAllWindows().length === 0) {
createWindow()
}
})
})

// 当所有窗口都被关闭时退出应用
// 在 macOS 上，用户关闭所有窗口可能不想完全退出应用，
// 他们可能希望应用像其他 macOS 应用那样，只关闭窗口但仍在后台运行。
// 因此，我们通常只在非 macOS 平台上真正退出。
app.on(‘window-all-closed’, () => {
if (process.platform !== ‘darwin’) {
app.quit()
}
})

// 可以在这里处理其他应用生命周期事件，例如 ‘before-quit’ 等
“`

代码解释：

require('electron'): 导入 Electron 模块。
app: 控制应用程序生命周期的模块。
BrowserWindow: 创建和管理应用窗口的模块。
createWindow(): 一个自定义函数，用于创建并配置一个新的浏览器窗口。
- new BrowserWindow({...}): 创建一个 BrowserWindow 实例，可以配置窗口的各种属性，如大小、位置、是否无边框等。
- webPreferences: 配置窗口中网页的特性。preload 脚本是一个非常重要的安全特性，它在渲染进程加载其他脚本之前运行，并且拥有 Node.js 环境的访问权限，是安全地向渲染进程暴露 API 的推荐方式。
- mainWindow.loadFile(...): 加载本地 HTML 文件到窗口中。我们告诉 Electron 加载当前目录下名为 index.html 的文件。
app.whenReady().then(...): 监听 Electron 的 ready 事件。当 Electron 框架自身完成初始化后，这个事件会被触发。只有在这个时候，你才能创建窗口。
app.on('window-all-closed', ...): 监听 window-all-closed 事件。当所有窗口都被关闭时触发。我们判断如果不是 macOS (process.platform !== 'darwin')，就调用 app.quit() 完全退出应用。
app.on('activate', ...): 监听 activate 事件。在 macOS 上，当用户点击 Dock 中的应用程序图标时触发。如果此时没有窗口打开，我们就重新创建一个窗口，这是 macOS 应用的常见行为。

4. 创建渲染进程文件 (`index.html`)

在 my-electron-app 文件夹的根目录创建一个名为 index.html 的文件。这是应用窗口将加载并显示的界面。

“`html

我的第一个 Electron 应用

Hello, Electron!

这是一个用 Electron 构建的简单桌面应用。

Chromium 版本：

Node 版本：

Electron 版本：

“`

代码解释：

这是一个标准的 HTML5 文档。
<meta http-equiv="Content-Security-Policy"> 是一个重要的安全设置，限制了页面可以加载哪些资源，防止跨站脚本攻击 (XSS) 等。default-src 'self' 意味着只能从同源加载资源，script-src 'self' 意味着只能加载本地脚本。在 Electron 应用中，这有助于提高安全性。
<h1> 和 <p> 是页面的内容。
<strong> 元素用于显示 Electron 相关的版本信息，我们将通过 JavaScript 在渲染进程中填充这些内容（如果使用 preload 脚本）。

5. 创建 Preload 脚本 (`preload.js`) [推荐的安全实践]

为了安全地在渲染进程中访问一些 Node.js 或 Electron 功能（或暴露一些来自主进程的 API），我们使用 preload 脚本。这个脚本在渲染进程加载页面内容之前运行，并运行在与渲染进程主环境隔离但可以访问 Node.js API 的独立上下文（如果 contextIsolation 启用）。

创建一个名为 preload.js 的文件在项目根目录：

“`javascript
// 引入 Electron 的 ipcRenderer 和 contextBridge 模块
const { contextBridge, ipcRenderer } = require(‘electron’)

// 在全局 window 对象上暴露一个名为 ‘versions’ 的对象
// 这个对象包含了 Electron、Chromium 和 Node.js 的版本信息
// contextBridge.exposeInMainWorld 是一个安全的方式，
// 它不会污染渲染进程的全局环境，而是通过一个隔离的上下文暴露 API。
contextBridge.exposeInMainWorld(‘versions’, {
chromium: process.versions[‘chrome’], // 注意，Electron 官方文档里获取 Chromium 版本是通过 ‘chrome’ 这个键
node: process.versions[‘node’],
electron: process.versions[‘electron’],
// 还可以暴露 IPC 发送方法，例如:
// sendToMain: (channel, data) => ipcRenderer.send(channel, data),
// receiveFromMain: (channel, callback) => ipcRenderer.on(channel, (event, …args) => callback(…args))
})

// 示例：暴露一个简单的功能给渲染进程
/
contextBridge.exposeInMainWorld(‘electronAPI’, {
openFile: () => ipcRenderer.invoke(‘dialog:openFile’) // 异步调用主进程方法
})
/
“`

代码解释：

require('electron'): 导入 Electron 模块。
contextBridge: 用于在隔离的上下文和渲染进程主上下文之间安全地暴露 API。
ipcRenderer: 用于渲染进程与主进程通信。
contextBridge.exposeInMainWorld('versions', {...}): 将一个对象暴露到渲染进程的 window.versions 下。这里的 process.versions 是 Node.js 提供的一个对象，包含了 Node.js 及其依赖（如 V8 引擎，Chromium）的版本信息。我们从中提取需要的部分。
通过 contextBridge 暴露 API 是 Electron 官方推荐的安全做法，尤其是在 contextIsolation 开启的情况下。

6. 创建渲染进程脚本 (`renderer.js`) [可选，用于前端逻辑]

创建一个名为 renderer.js 的文件在项目根目录。我们需要在 index.html 中引入它。

“`javascript
// renderer.js

// 监听 DOMContentLoaded 事件，确保页面加载完毕
window.addEventListener(‘DOMContentLoaded’, () => {
// 从 preload 脚本暴露的 ‘versions’ 对象中获取版本信息
const versions = window.versions

// 将版本信息显示在页面上
document.getElementById('chromium-version').innerText = versions.chromium
document.getElementById('node-version').innerText = versions.node
document.getElementById('electron-version').innerText = versions.electron

// 示例：如果暴露了 openFile 方法
/*
const btn = document.getElementById('open-file-btn') // 假设有一个按钮
btn.addEventListener('click', async () => {
    const filePath = await window.electronAPI.openFile()
    console.log('Selected file:', filePath)
    // 可以在页面上显示文件路径
})
*/

})
“`

代码解释：

window.addEventListener('DOMContentLoaded', ...): 确保在 DOM 完全加载和解析后执行脚本。
window.versions: 访问 preload.js 中通过 contextBridge.exposeInMainWorld 暴露的对象。
document.getElementById(...): 获取 HTML 元素。
.innerText = ...: 更新元素的文本内容。

重要步骤: 如果你创建了 renderer.js，别忘了在 index.html 的 </body> 标签前引入它：

“`html

“`

7. 配置 `package.json`

打开 package.json 文件，找到 scripts 部分，添加一个 start 脚本，用于运行你的 Electron 应用。

json { "name": "my-electron-app", "version": "1.0.0", "description": "My first Electron application", "main": "main.js", // <-- 确保这里指向你的主进程文件 "scripts": { "start": "electron .", // <-- 添加或修改这一行 "test": "echo \"Error: no test specified\" && exit 1" }, "keywords": [ "electron", "guide" ], "author": "Your Name", "license": "ISC", "devDependencies": { "electron": "^28.2.3" // <-- 你的 Electron 版本可能不同 } }

"main": "main.js": 告诉 Electron 当应用启动时，哪个文件是主进程脚本的入口。
"start": "electron .": 定义了一个 npm 脚本。当你运行 npm start 命令时，它会执行 electron .。这里的 . 表示当前目录，Electron 会在当前目录下寻找 package.json 中指定的 main 文件（即 main.js）作为主进程入口来启动应用。

8. 运行你的第一个 Electron 应用！

在终端中，确保你还在 my-electron-app 项目文件夹内，然后运行：

bash npm start

如果一切顺利，你应该会看到一个带有标题“我的第一个 Electron 应用”的窗口弹出来，并且页面上显示着 Chromium、Node 和 Electron 的版本号。

恭喜你！你已经成功创建并运行了你的第一个 Electron 应用。

第五部分：进阶与下一步

成功运行 Hello World 只是个开始。要构建一个实用的 Electron 应用，你还需要了解更多。

1. IPC 通信的实际应用

回顾前面的 IPC 概念。现在你可以尝试在你的应用中实现一个简单的 IPC 例子。

示例：渲染进程向主进程发送消息，主进程显示一个弹窗。

修改 preload.js： 暴露一个发送消息的方法。

“`javascript
const { contextBridge, ipcRenderer } = require(‘electron’)

contextBridge.exposeInMainWorld(‘api’, {
// 暴露一个 send 方法，渲染进程可以通过 window.api.send(‘channel-name’, data) 调用
send: (channel, data) => {
// 白名单：只允许发送到特定的 IPC 通道
const validChannels = [‘show-message’] // 定义允许的通道名
if (validChannels.includes(channel)) {
ipcRenderer.send(channel, data)
}
}
// 还可以暴露接收消息的方法或其他主进程功能
// on: (channel, callback) => ipcRenderer.on(channel, (event, …args) => callback(…args))
})

// 保留 versions 暴露
contextBridge.exposeInMainWorld(‘versions’, {
chromium: process.versions[‘chrome’],
node: process.versions[‘node’],
electron: process.versions[‘electron’]
})
`` *注意：* 在preload.js` 中对 IPC 通道进行白名单过滤是一个重要的安全实践。
修改 index.html： 添加一个按钮。

“`html

Hello, Electron!

这是一个用 Electron 构建的简单桌面应用。

Chromium 版本：

Node 版本：

Electron 版本：
```
<button id="show-msg-btn">点击我，让主进程显示弹窗</button>

<script src="./renderer.js"></script>
```
“`

修改 renderer.js： 添加按钮点击事件，通过暴露的 api 发送消息。

“`javascript
window.addEventListener(‘DOMContentLoaded’, () => {
// … (版本信息显示代码不变) …

// 获取按钮并添加点击事件监听器
const showMsgBtn = document.getElementById('show-msg-btn')
showMsgBtn.addEventListener('click', () => {
    // 使用 preload 脚本暴露的 api.send 方法发送消息给主进程
    // 第一个参数是通道名，第二个参数是要发送的数据
    window.api.send('show-message', 'Hello from Renderer!')
})

})
“`

修改 main.js： 监听 show-message 通道的消息，并使用 Electron 的 dialog 模块显示一个消息框。

“`javascript
const { app, BrowserWindow, ipcMain, dialog } = require(‘electron’) // 引入 ipcMain 和 dialog
const path = require(‘path’)

const createWindow = () => {
const mainWindow = new BrowserWindow({
// … 其他配置 …
webPreferences: {
preload: path.join(__dirname, ‘preload.js’)
// 确保 contextIsolation 开启 (默认是开启的)
// contextIsolation: true
}
})
// … 加载文件和 devtools 代码 …
}

// … app.whenReady 和 app.on 代码不变 …

// 在主进程中监听来自渲染进程的消息
ipcMain.on(‘show-message’, (event, data) => {
// event 参数包含发送消息的渲染进程的信息
// data 是渲染进程发送过来的数据
console.log(‘Received message from renderer:’, data) // 在主进程的控制台打印

// 显示一个简单的消息框
dialog.showMessageBox({
type: ‘info’,
title: ‘主进程收到消息’,
message: 渲染进程说：${data},
buttons: [‘好的’]
})
// 注意：showMessageBox 是同步的
// 对于需要返回结果给渲染进程的，推荐使用 ipcMain.handle / ipcRenderer.invoke
})
“`

运行 npm start，点击按钮，你应该会看到一个由主进程弹出的消息框。

2. 打包与分发 (Packaging & Distribution)

当你的应用开发完成后，你需要将其打包成一个可安装或可执行的文件，以便在不同的操作系统上分发给用户。常用的工具有：

electron-packager: 一个相对简单的打包工具，为每个平台生成独立的目录。
electron-builder: 功能更强大，支持生成安装包（.exe, .dmg, .deb 等），签名，自动更新等。

这些工具通常作为项目的开发依赖安装，并在 package.json 的 scripts 中配置打包命令。例如使用 electron-builder：

npm install electron-builder --save-dev
在 package.json 中添加 build 配置和脚本。
运行 npm run build。

打包过程通常需要一些时间，完成后会在项目目录生成相应的平台构建文件。

3. 调试技巧

主进程调试: Electron 应用的主进程是一个 Node.js 进程。你可以像调试普通的 Node.js 应用一样调试它，例如使用 VS Code 的 Node.js 调试功能，配置启动项连接到 Electron 主进程。
渲染进程调试: 每个 Electron 窗口都有独立的开发者工具，就像浏览器一样。在 main.js 中通过 mainWindow.webContents.openDevTools() 打开，或者在应用运行时按 F12（或右键检查元素）。你可以使用 Elements, Console, Sources, Network 等面板来调试渲染进程的 HTML, CSS 和 JavaScript。

4. 学习更多

官方文档: Electron 官方文档是学习最权威、最全面的资源：https://www.electronjs.org/docs
示例代码: Electron 官方和社区提供了很多示例项目，可以学习如何实现特定功能。
社区: 加入 Electron 社区论坛或 Discord 群组，与其他开发者交流，提问和分享经验。
前端框架: 尝试将 React、Vue、Angular 等前端框架与 Electron 结合使用，构建更复杂的用户界面。这通常需要额外的构建工具（如 Webpack）来处理框架代码。

第六部分：总结

Electron 为 Web 开发者打开了桌面应用开发的大门，让你能够利用熟悉的 HTML、CSS、JavaScript 技能去创造强大的跨平台应用。理解主进程与渲染进程的区别以及 IPC 通信机制是掌握 Electron 的关键。

本指南带你迈出了第一步，创建了一个基本的 Electron 应用并了解了核心概念。桌面应用开发包含许多额外的挑战（如文件系统交互、原生 UI 元素、应用更新、安全性等），但 Electron 提供了丰富的 API 和工具来帮助你应对这些挑战。

现在，勇敢地开始你的 Electron 开发之旅吧！从简单的功能实现开始，不断查阅文档，实践并探索，你会发现用 Electron 构建桌面应用是多么有趣和高效。

祝你编码愉快！

Electron新手入门指南 – wiki基地

Electron 新手入门指南：用 Web 技术构建跨平台桌面应用

第一部分：认识 Electron – 这是什么，为什么用它？

1. Electron 是什么？

2. 为什么选择 Electron？

3. Electron 的适用场景

4. Electron 的潜在缺点（需要了解）

第二部分：环境准备

1. 安装 Node.js 和 npm

2. 创建项目文件夹

第三部分：核心概念解析

1. 主进程 (Main Process)

2. 渲染进程 (Renderer Process)

3. 主进程与渲染进程的区别和联系

4. IPC (Inter-Process Communication)

第四部分：构建一个简单的 Electron 应用

1. 初始化项目

2. 安装 Electron

3. 创建主进程文件 (`main.js`)

4. 创建渲染进程文件 (`index.html`)

Hello, Electron!

5. 创建 Preload 脚本 (`preload.js`) [推荐的安全实践]

6. 创建渲染进程脚本 (`renderer.js`) [可选，用于前端逻辑]

7. 配置 `package.json`

8. 运行你的第一个 Electron 应用！

第五部分：进阶与下一步

1. IPC 通信的实际应用

Hello, Electron!

2. 打包与分发 (Packaging & Distribution)

3. 调试技巧

4. 学习更多

第六部分：总结

发表评论取消回复

Electron 新手入门指南：用 Web 技术构建跨平台桌面应用

第一部分：认识 Electron – 这是什么，为什么用它？

1. Electron 是什么？

2. 为什么选择 Electron？

3. Electron 的适用场景

4. Electron 的潜在缺点（需要了解）

第二部分：环境准备

1. 安装 Node.js 和 npm

2. 创建项目文件夹

第三部分：核心概念解析

1. 主进程 (Main Process)

2. 渲染进程 (Renderer Process)

3. 主进程与渲染进程的区别和联系

4. IPC (Inter-Process Communication)

第四部分：构建一个简单的 Electron 应用

1. 初始化项目

2. 安装 Electron

3. 创建主进程文件 (main.js)

4. 创建渲染进程文件 (index.html)

Hello, Electron!

5. 创建 Preload 脚本 (preload.js) [推荐的安全实践]

6. 创建渲染进程脚本 (renderer.js) [可选，用于前端逻辑]

7. 配置 package.json

8. 运行你的第一个 Electron 应用！

第五部分：进阶与下一步

1. IPC 通信的实际应用

Hello, Electron!

2. 打包与分发 (Packaging & Distribution)

3. 调试技巧

4. 学习更多

第六部分：总结

发表评论 取消回复

3. 创建主进程文件 (`main.js`)

4. 创建渲染进程文件 (`index.html`)

5. 创建 Preload 脚本 (`preload.js`) [推荐的安全实践]

6. 创建渲染进程脚本 (`renderer.js`) [可选，用于前端逻辑]

7. 配置 `package.json`

发表评论取消回复