Electron 桌面应用开发完全教程：用前端技术做出能安装的桌面软件

一、原理背景

Electron 让你用 HTML + CSS + JavaScript 写出能在 Windows、macOS、Linux 上运行的桌面应用——VS Code、Discord、Figma、飞书桌面端都是它做的。它的原理是「一个浏览器内核 + 一个 Node.js 运行时打包在一起」：

  • 主进程（Main Process）：运行在 Node.js 环境，拥有系统权限（读写文件、弹窗、托盘、菜单），由 main.js 启动。
  • 渲染进程（Renderer）：就是网页，跑在 Chromium 里，负责界面。每个窗口一个渲染进程。
  • 进程通信（IPC）：渲染进程不能直接碰系统 API，要通过 ipcMain/ipcRenderer 向主进程「发请求、收结果」，类似前后端接口。

理解「主进程管系统、渲染进程管界面、IPC 当桥梁」，你就掌握了 Electron 的全部骨架。

二、分步操作

步骤 1：初始化项目

mkdir myapp && cd myapp && npm init -y
npm install electron --save-dev

package.json 加上：

{
  "main": "main.js",
内容摘要

一句话概述：理解「主进程管系统、渲染进程管界面、IPC 当桥梁」，你就掌握了 Electron 的全部骨架。

你将了解到：

  • 原理背景
  • 分步操作
  • 实战案例
  • 常见错误排查
  • 进阶实战与生产最佳实践

适合人群：需要动手落地、想补齐技术短板的开发者。

全文共 6 个章节，按「原理背景 → 进阶实战与生产最佳实践」的顺序展开，每节都能单独查阅，配有可直接照做的清单与模板。

内容侧重可落地的操作流程与常见坑点，读完就能对照自己的情况动手，不需要额外补理论基础。

既适合按章节顺序通读一遍建立完整认知，也适合遇到具体问题时按需查阅对应章节。

以上为全文要点速览，完整内容需解锁后阅读

🔒 付费文档

支付 5 积分后即可解锁全部内容