Electron 第一步

作者一千柯橘

2025年11月25日 17:50

Build cross-platform desktop apps with JavaScript, HTML, and CSS。这就是 Electron 让开发者用 Web 技术（HTML/CSS/JavaScript） 就能构建出和原生应用（如 Windows 的 .exe、macOS 的 .app）体验一致的桌面软件，无需学习 C++、Swift 等原生开发语言代码参考： github.com/kejuqu/elec…

Electron 的核心组成部分

主要分成如下三个部分：

组成部分	核心作用	技术依赖 / 本质
1. 主进程（Main Process）	负责管理全局资源和原生能力调用，是应用的入口点。	Node.js 运行时（基于 V8 引擎）
2. 渲染进程（Renderer Process）	应用的 “界面”，负责渲染用户看到的 UI（即 Web 页面），可有多进程。	Chrome 浏览器内核（Blink 引擎）
3. 预加载脚本（Preload Script）	主进程和渲染进程的 “桥梁”，解决两者通信和权限隔离问题。

Electron 的核心逻辑可以理解为：用 Chrome 内核做界面渲染（渲染进程），用 Node.js 做原生能力支撑（主进程），用预加载脚本解决两者的通信和安全问题—— 最终实现 “Web 技术写桌面应用” 的目标，是 Web 开发者切入桌面开发的最低门槛工具

开始 Electron

初始化项目

// 1. 创建一个项目名字为 electron-app
mkdir electron-app && cd electron-app

// 2. 初始化项目，自动创建 package.json
npm init 
// package.json
{
  "name": "electron-app",
  "version": "1.0.0",
  "description": "to develop an electron app",
  "main": "main.js", // 这是需要自己加的， main 为入口文件
  "scripts": {
    "dev": "electron .", // 这是需要自己加的
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "jakequc",
  "license": "MIT",
  "packageManager": "pnpm@10.22.0",
  "devDependencies": {
    "electron": "^39.2.3"
  }
}

// 3. 安装 electron 为开发依赖，因为 electron 不会在运行时用到
pnpm install electron --save-dev

// 4. 在根目录下创建入口文件 main.js,内容为
console.log("Hello from Electron 👋");

// 5. npm run dev
// 控制台出现 Hello from Electron 👋 表示初始化项目成功 🎉🎉🎉

可能遇到或疑惑

为啥 electron 安装到 devDependencies？

Electron 的角色是「开发 / 构建工具」，而非最终产品运行时必需的依赖，Electron 的作用仅体现在开发调试和最终打包两个阶段，用户拿到的「桌面应用」里，根本不需要 Electron 本身，也可以说 Electron 被嵌入到了产物中

安装失败

方法1: 可以参考这个 www.electronjs.org/docs/latest… 链接

方法2: 去 # electron always "Electron failed to install correctly, please delete node_modules/electron and try installing again"

// 在你的安装终端执行
node node_modules/electron/install.js

方法3: 更改 nodeLinker 保证安装 npm 包是实际存在在磁盘上的，而不是软链接或者替代的安装策略

// 如果是 pnpm 包管理工具，在项目更目录的 pnpm-workspace.yaml
nodeLinker: "hoisted"

// 如果是 yarn，通过命令自动生成配置
yarn config set nodeLinker node-modules

加载 web 页面到浏览器窗口

Electron 的每个 window 窗口都可以加载一个本地的 HTML 文件或者是一个远程的地址

创建 web page HTML 文件

恭喜你已经基本搭建了 Electron，现在我们让 Electron 加载 web 页面，我们先从一个 local HTML 文件开始，在根目录下创建一个 index.html 文件

// index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <!-- https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP -->
    <meta
      http-equiv="Content-Security-Policy"
      content="default-src 'self'; script-src 'self'"
    />
    <meta
      http-equiv="X-Content-Security-Policy"
      content="default-src 'self'; script-src 'self'"
    />
    <title>Hello from Electron renderer!</title>
  </head>
  <body>
    <h1>Hello from Electron renderer!</h1>
    <p>👋</p>
  </body>
</html>

使用 Electron main.js 来加载 html 文件到 BrowerWindow 中

electron 包使用的模块：

app 控制一个应用的事件生命周期
BrowserWindow，它用于创建和管理应用程序窗口。每个 web page 就是一个渲染进程，每个渲染进程可以使用 js APIs 和任何前端开发技术，比如 React、Vite 等

// main.js 替换为：
const { app, BrowserWindow } = require('electron')

const createWindow = () => {
  const win = new BrowserWindow({
    width: 800,
    height: 600
  })

  win.loadFile('index.html')
}

app.whenReady().then(() => {
  createWindow()
})

操作系统平台判断

注意在不同的操作系统中应用窗口可能有不同的行为，因此可以借助 process.platform 变量来帮助你条件性的在不同操作系统上做不同的事情， process.platform 有三个值：

win32 (Windows)
linux(Linux)
darwin (macOS)

退出整个应用

在 Windows 和 Linux 关闭所有的窗口后将会自动退出整个应用，但是 macOs 上需要单独调用 app.quit() 才能实现，此时需要监听 electron 的 app 模块中的 window-all-closed 事件

app.on("window-all-closed", () => {
  // 如果是 macOS 系统，需要显示的调用 app.quit() 才能退出整个应用
  if (process.platform !== "darwin") {
    app.quit();
  }
});

打开一个可运行的窗口

相比之下，macOS 应用通常即使在没有任何窗口打开的情况下也会继续运行。当没有可用窗口时激活该应用，应该打开一个新窗口。当窗口激活的时候可以监听 app 模块的 activate 事件，因为 windows 不能在 ready 事件前创建 BrowserWindow，所以我们应该在 whenReady 里监听 activate 事件

app.whenReady().then(() => {
  createWindow();

  // windows 必须等待 应用 ready 之后才能创建窗口，当前没有窗口打开时，应该创建一个窗口
  app.on("activate", () => {
    if (BrowserWindow.getAllWindows().length === 0) {
      createWindow();
    }
  });
});

普通视图