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",

🔒 付费文档

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