• 绝大多数 ToB 办公软件与工具类软件优先采用 Electron 开发。
• D依托 Chromium 内核。完美兼容网页特性，支持热更新与在线迭代。
• D轻量化部署，无需复杂程序环境依赖。
• D前端工程化程序完全复用，组件打包调试流程无缝衔接。

Electron 主要架构与工作原理

M很多新手只会照搬代码。不懂底层原理，一旦遇到进程报错或通信异常就无从下手。掌握 Electron 主要架构，是进阶实战关键。

. 双进程主要架构

主进程

"全局唯一" — 基于 Node.js 运行，可调用完整 Node API 与 Electron 原生 API。主要职责包括的观点是，创建窗口；管理生命周期，调用程序原生能力；管控所有渲染进程，

渲染进程

"浏览器页面" — 每个窗口对应一个独立渲染进程，由 Chromium 内核渲染 UI。默认关闭 Node 权限，只负责 UI 渲染与交互。 为安全起见需通过预加载脚本实现 IPC 通信。

预加载脚本

"安全桥梁" — 位于主进程和渲染进程之间。可打通两者通信通道，同时拥有特殊权限，是新版 Electron 安全规范必不可少的一环。

. 架构运行流程图解

• 进程隔离 & 权限分级：
• & 通信机制：

搭建第一个开箱即用的 Electron 环境

. 环境依赖要求

• NPM 或 Yarn 包管理工具。npm 包含 Node.js LTS 稳定版，请先确认已安装。node -v npm -v

. 全局辅助工具

• # 安装 electron 全局命令。可在任意项目目录快速启动调试

  npm install -g electron
  

创建并运行 Hello World 应用程序示例

以下步骤将帮助你零配置完成最简“Hello World”项目，并下载体验一次完整流程。准备好了吗，一起动手吧！

. 步骤1：初始化项目文件夹 & package.json 配置文件

# 创建项目文件夹
mkdir electron-hello-demo
# 进入项目目录
cd electron-hello-demo
# 初始化 package.json 配置文件
npm init -y

. 步骤2：安装Electron依赖.

npm install --save-dev electron@latest

. 步骤3：创建主要项目文件.

• Main.js – 主进程入口文件.
\
• No preload.js – 暂时空白。只做演示.
\
• No index.html – 简单 UI 页面.
\ 请根据需求自行编写 preload 与 index.html 文件，如果你想了解更详细代码请参考下面完整示例段落！<\/span> <\/div>" **说明** - **main.js** 中使用 `BrowserWindow` 创建窗口，并通过 `webPreferences.preload` 指定预加载脚本方法；- **index.html** 是渲染页面通过 `document.getElementById` 操作 DOM；- **package.json** 的 `main` 字段指向主进程入口，否则启动会报 “Cannot find module” 错误。

---

至于步骤4，配置启动脚本

修改 package.json 的 scripts.start 为：

json { "name"这方面，"electron‑hello‑demo","version": "0.1.0"。"description": "","main": "main.js","scripts": { "start": "electron ." },"devDependencies": { "electron": "^27.x" } }

关键点 - main: 必填字段，用来告诉 Electron 从哪里开始执行；- scripts.start: 用来让 npm start 一键启动。

---

步骤5这方面，运行项目

bash npm start

执行后会弹出一个包含 “Hello world!” 文本的新窗口，即表示一切正常。

---

项目结构与主要文件解析

文件	功能	小结
package.json	项目元数据 & 启动配置	必须包含 "main" 字段。否则无法启动
main.js	主进程逻辑	管理生命周期 & 创建窗口
renderer/preload.js	桥接主/渲染	使用 contextBridge 暴露受限 API
renderer/index.html	渲染页面	可以使用 Vue / React 等框架

---

常见错误排查

1️⃣ Cannot find module 'electron' 检查是否已执行 npm install --save-dev electron. 若未安装请先执行该命令.

2️⃣ 窗口没有显示 / 自动崩溃 确认 main.js 中 BrowserWindow 的 width/height 是否正整数且未遗漏逗号.

---

小贴士

• 在生产环境中务必开启 true> 并通过 preload 暴露所需接口，以确保安全性。
• 若想快速查看源码结构，可在 VS Code 中右键 Open in Terminal 并执行上述步骤。
• 想进一步 功能？尝试加入 IPC 调用，让主/渲染间实现更丰富交互。

---

通过上述步骤。你已完成从零到「Hello World」 的完整流程，并了解了： 1️⃣ 两大类痛点——技术栈割裂和跨网站成本；2️⃣ 双进程架构及其作用；说起来，3️⃣ 如何快速搭建最简环境并跑通第一个实例。

如果你对更高级功能感兴趣。如自动更新、本地存储或程序集成，请继续阅读后续章节或官方文档。祝你玩得开心 🚀