从 0 到 1 认识 Electron对比不同桌面方案的优劣，客观说明选择 Electron 的理由。并逐步开始加强对

桌面方案

方案

nw.js

nwjs.io/

nw.js（也称为 Node-Webkit）是一个开源框架，允许你使用 Web 技术（如 HTML、CSS 和 JavaScript）构建跨平台的桌面应用程序。它结合了 Chromium 浏览器和 Node.js 运行时 环境，使你可以编写桌面应用程序，并访问操作系统的原生功能，如文件系统、系统通知等。
nw.js 提供了一种简单的方式将 Web 内容打包成一个独立的桌面应用程序，无需学习新的技术或工具链。它支持 Windows、macOS 和 Linux 等多个平台，使开发人员可以轻松地创建跨平台的应用程序。
提供完整的 Node.js 支持和原生模块调用

neutralino.js

neutralino.js.org/

Neutralinojs 是一个轻量级且可移植的桌面应用程序开发框架。它允许您使用 JavaScript、HTML 和 CSS 开发轻量级跨平台桌面应用程序。您可以使用任何编程语言扩展 Neutralinojs（通过扩展 IPC），并将 Neutralinojs 用作任何源文件的一部分（通过子进程 IPC）。
在 Electron 和 NWjs 中，您必须安装 Node.js 和数百个依赖库。嵌入的 Chromium 和 Node.js 会使简单的应用程序变得臃肿 — 在大多数情况下，框架比您的应用程序还要重。Neutralinojs 提供了一个轻量级且可移植的 SDK，它是 Electron 和 NW.js 的替代品。Neutralinojs 不捆绑 Chromium，而是使用操作系统中现有的 Web 浏览器库（例如 Linux 上的 gtk-webkit2）。Neutralinojs 为本机操作实现了安全的 WebSocket 连接，并嵌入了静态 Web 服务器来提供 Web 内容。此外，它还为开发人员提供了一个内置的 JavaScript 客户端库。
如果您可以构建网站，那么您也可以构建跨平台桌面应用程序，因为 Neutralinojs 是一个使用 JavaScript、HTML 和 CSS 等 Web 技术创建本机桌面应用程序的框架。您确实可以使用您最喜欢的前端框架（例如 Angular、React、Svelte、Vue 等）来构建您的下一个 Neutralinojs 应用程序。

npm install -g @neutralinojs/neu

electron

www.electronjs.org/zh/

Electron 是一个开源框架，用于构建跨平台的桌面应用程序。它允许开发人员使用 Web 技术（如 HTML、CSS 和 JavaScript）构建应用程序，并使用 Chromium 和 Node.js 来运行应用程序。
Electron 的工作原理是将应用程序的界面部分使用 Chromium 渲染，而应用程序的后端逻辑则使用 Node.js 运行。这使得开发人员可以使用熟悉的 Web 技术构建桌面应用程序，并访问操作系统的原生功能，如文件系统、系统通知等。
Electron 提供了丰富的 API，用于访问操作系统的原生功能，并提供了一些工具和模板，用于快速开始开发应用程序。它支持 Windows、macOS 和 Linux 等多个平台，使开发人员可以轻松地构建跨平台的桌面应用程序。

对比

开源程度

我们选取 开源协议、NPM 周下载量、Github Star 三个主要维度，来综合衡量：开源程度 指标

方案	开源协议	NPM 周下载量	Github Star
nw.js	MIT	1,576 +	40.1k
neutralino.js	MIT	450 +	245
electron	MIT	659,161 +	112k

综上：在 开源协议 维度，三者旗鼓相当；在 NPM 周下载量、Github Star 维度，electron 都具备十分明显的优势！

综合对比 开源程度 三个关键维度后，我们得到综合排名： electron >> nw.js > neutralino.js

开发难度

我们选取 技术选型、开发构建工具、文档丰富度 三个主要维度，来综合衡量-指标：开发难度

注：为能更好发挥 Web Developer 的产品价值，进一步提升团队整体产出及人效，我们优先以 Web Developer 的视角，来评估综合开发难度~，其中，Web Developer 是指通过 HTML、CSS、JavaScript 等技术，完成产品交付的开发人员。

方案	技术选型	开发构建工具	文档丰富度	开发难度
nw.js	JS、HTML、CSS	需要理解学习官文中的各个工具nwjs-builder、nw-builder自行构建	专业文档较少，需要更多时间精力来学习理解	中
neutralino.js	JS、HTML、CSS	需要理解学习官文中的各个工具，自行构建	专业文档较为丰富，示例代码较少	中
electron	JS、HTML、CSS	具备丰富的企业级项目构建工具生态，如 electron-vite、vite，具备更快、更精简的开发体验！	专业文档丰富，有丰富的案例及最佳实践	易

综上：在 技术选型 维度，三者均属于 Web Developer 的核心技能范畴；在 开发构建工具 维度，electron 具备丰富的企业级项目构建工具生态，具备更快、更精简的开发体验；在 文档丰富度 维度，electron 除拥有丰富的双语文档外，还有详细的示例代码及最佳实践！

综合对比 开发难度 三个关键维度后，我们得到综合排名：electron > nw.js > neutralino.js

平台支持

我们选取 基本架构、支持平台 两个主要维度，来综合衡量-指标：平台支持

方案	基本架构：渲染+进程	支持平台
nw.js	Chromium + Node.js基于 Chromium 和 Node.js，允许使用 Web 技术构建桌面应用程序。应用程序的界面部分使用 Chromium 渲染，而后端逻辑使用 Node.js 运行	支持 Windows、macOS 和 Linux，以及一些较少见的平台，如 Raspberry Pi
neutralino.js	系统默认WebView + 内置系统 API系统的默认 WebView（如 Windows 的 Edge WebView2、macOS 的 WKWebView、Linux 的 GTK WebKit）来加载 HTML、CSS 和 JavaScript。与操作系统的通信等操作，由其内置API完成，开发者只需按场景调用即可	支持 Windows、macOS 和 Linux，以及 Web 浏览器
electron	Chromium + Node.js允许使用 Web 技术构建跨平台的桌面应用程序，如 HTML、CSS 和 JavaScript。使用 Chromium 和 Node.js，将应用程序的界面部分使用 Chromium 渲染，而后端逻辑使用 Node.js 运行。	支持 Windows、macOS 和 Linux

综上：在 基础架构 维度，nw.js 与 electron 均内置、捆绑了 Chromium 和 Node.js，这将使得框架本身的体积，可能比应用程序还要重，而相比之下 neutralino.js 则要轻便许多。在 支持平台 维度上，三者均支持 Window、macOS 和 Linux。

综合对比 基础架构、平台支持 两个关键维度后，我们得到综合排名：neutralino.js > nw.js > electron

性能体验

和前端工程化必备流程一样，桌面客户端的开发也有必备的 3D 流程：

Development、Deployment、Debugger

我们选取 打包方式、体积性能 两个维度，来综合衡量-指标：性能体验

方案	打包方式	体积性能
nw.js	可将应用程序代码打包成一个独立的可执行文件；也可将代码直接放在 nw.js 运行时中运行	体积较小，启动较快使用 Chromium 渲染，性能和用户体验通常比较好
neutralino.js	将应用的资源文件和核心运行时（Neutralino Core）捆绑在一起，生成跨平台的独立可执行文件	【核心运行时】体积小，仅 5M 左右启动性能，由于不需要加载整个 Chromium 引擎和 Node.js 环境，只需启动一个嵌入式的本地 WebView、加载 HTML、CSS 和 JavaScript 资源。启动相当快
electron	将其他应用程序代码和 Electron 运行时打包在一起，生成一个独立的可执行文件	应用程序的体积较大、启动速度较慢使用 Chromium 渲染，性能和用户体验通常比较好

综上：在 打包方式 维度，三者相差不大，但在 体积性能 方面，neutralino.js 具备明显优势。

综合对比 打包方式、体积性能 两个关键维度后，我们得到综合排名：neutralino.js > electron > nw.js

社区生态

我们选取 社区支持、软件更新 两个主要维度，来综合衡量-指标：社区生态

方案	社区支持	软件更新
nw.js	社区相对较小，有一些活跃的插件和工具使用企业级应用市场内，知名的 APP 有 Slack、Visual Studio Code、Atom 等，均采用 Electron 开发	软件更新相对较慢，在一些新特性和功能的支持上较弱
neutralino.js	社区生态相较小，有一些活跃的插件和工具使用，第三方插件生态相对较小，尤其在企业级应用开发中，可能缺乏一些企业级所需的专业工具和插件[Neutralinojs Apps	软件更新相对较慢，在一些新特性和功能的支持上较弱
electron	拥有庞大的生态系统和活跃的社区支持，有大量的插件和工具可供使用，社区论坛和 Stack Overflow 上有许多热心的开发者回答问题，帮助解决开发中的各种问题，鼓励开发者参与到 Electron 的开发和改进中，提供反馈和建议，共同推动框架的发展企业级应用市场内，知名的 APP 有 Figma、Github Desktop、VS Code、Notion 等，均采用 Electron 开发	软件更新快，在一些新特性和功能的支持上较强

www.electronjs.org/apps

综上：在 社区支持 维度，electron 具有明显的优势，在市场上拥有众多基于 electron 开发、成熟且广受欢迎的APP！在 软件更新 维度，electron 也更新快，对一些新特性新功能的支持上很给力！

综合对比 社区生态 两个关键维度后，我们得到综合排名：electron >> nw.js > neutralino.js

总结

对比维度	nw.js	neutralino.js	electron	结论
开源程度	MIT	MIT	MIT	electron >> nw.js > neutralino.js
开发难度	中	中	易	electron > nw.js > neutralino.js
平台支持	中	多	中	neutralino.js > nw.js > electron
性能体验	中	优	良	neutralino.js > electron > nw.js
社区生态	弱	弱	强	electron >> nw.js > neutralino.js

注：虽然在 平台支持、性能体验 两个维度上，neutralino.js 有着卓越的表现！

但同时比较遗憾的时是，它仅能胜任逻辑简单、小型的应用开发，

对于复杂、大型应用的支持，则捉襟见肘。

综上对比，我们综合考虑各项指标，选择 electron 作为桌面客户端的解决方案。

基础信息

虽然您需要在开发环境安装 Node.js 才能编写 Electron 项目，但是 Electron 不使用您系统的 Node.js 环境来运行它的代码。相反地，它使用它内置的 Node.js 运行时。这意味着您的终端用户不需要 Node.js 环境也可以运行您的应用。

要查看您应用内置的 Node.js 版本，您可以访问主进程 (main process) 或预加载脚本 (preload script) 中的 process.versions ****变量

官方文档

electron 是一个使用 JavaScript、HTML 和 CSS 构建桌面应用程序的框架。

electron 将 Chromium 和 Node.js 嵌入到了一个二进制文件中，因此它允许你仅需一个代码仓库，就可以撰写支持 Windows、macOS 和 Linux 的跨平台应用。

建议：中文文档与英文文档对照着阅读，以便深入理解

www.electronjs.org/zh/docs/lat…

沙盒实测

www.electronjs.org/fiddle

Electron Fiddle 是由 Electron 开发并由其维护者支持的沙盒程序。我们强烈建议将其作为一个学习工具来安装，以便在 开发过程 中对 Electron 的 api 进行实验或对 特性进行原型化。

构建工具

Electron 开发构建工具

得益于 Vite 卓越的前端开发体验，越来越多的 Electron 项目也开始应用它来构建开发！
Electron 是一个基于 Chromium 和 Node.js 构建跨平台桌面应用程序的框架，这意味着打包工具需要同时处理 Node.js 和 浏览器 两种环境

cn.electron-vite.org/

构建配置

cn.vitejs.dev/

衍生产品

业务框架

www.kaka996.com/

electron-egg 是一个 业务框架

就好比 Spring 之于 JAVA，Thinkphp 之于 PHP，Express 之于 Node ......

目标计划

学习计划

dist 测试 & URL 测试
开发调试
dist 指定路由跳转测试
通读 electron-vite 创建的项目源码，同步再阅读 Electron 文档
熟悉 electron-vite 和 vite

在下面的思维导图中，我们约定：

浏览器端（Browser）简称 B
桌面客户端（Client）简称 C
桌面服务端（Server）简称 S
图形用户界面（Graphical User Interface）简称 GUI

快速入门

Electron 是一个使用 JavaScript、HTML 和 CSS 构建桌面应用程序的框架。嵌入 Chromium 和 Node.js 到二进制的 Electron 允许您保持一个 JavaScript 代码代码库并创建在Windows上运行的跨平台应用 macOS 和 Linux ——不需要本地开发经验。

基本要求

在使用 Electron 进行开发之前，仅需要安装 Node.js（建议为最新的 LTS 版本）

创建步骤

1. 使用脚手架创建项目

Electron 应用程序将遵循与其他 Node.js 项目相同的结构，会有一个默认的入口文件 main.js

2. 运行主进程

任何 Electron 应用程序入口都是 main 文件。这个文件控制了 主进程！它运行在一个完整的 Node.js 环境中，负责控制您应用的生命周期，显示原生界面，执行特殊操作并管理 渲染进程。

3. 创建页面

在 Electron 中，各个窗口显示的内容，可以是本地 HTML 文件，也可以是一个远程 url。为方便入口，我们将在本地创建一个 index.html 文件

<!DOCTYPE html>
<html lang="en">
  <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'">
    <title>Hello World!</title>
  </head>
  <body>
    <h1>Hello World!</h1>
    We are using Node.js <span id="node-version"></span>,
    Chromium <span id="chrome-version"></span>,
    and Electron <span id="electron-version"></span>.
  </body>
</html>

4. 在窗口中打开您的页面

在上步中，我们创建了一个页面 index.html，我们现将它加载进应用窗口中。要做到这一点，需要两个 Electron 模块：

app 模块：控制应用程序的事件生命周期
BrowserWindow 模块：创建和管理应用程序窗口

由于主进程运行在 Node.js 环境中，我们将遵循 CommonJS 模块，在 main.js 文件头部导入所需模块

const { app, BrowserWindow } = require('electron')

// 添加 createWindow 方法，将 index.html 加载进一个新的 BrowserWindow 实例中
const createWindow = () => {
  const win = new BrowserWindow({
    width: 800,
    height: 600
  })

  win.loadFile('index.html')
}

// 调用 createWindow 方法，打开窗口
app.whenReady().then(() => {
  createWindow()
}) // 在 Electron 中，只有在 app 模块的 ready 事件被激发后才能创建浏览器窗口

5. 管理窗口的生命周期

虽然你现在可以打开一个浏览器窗口，但你还需要一些额外的模板代码使其看起来更像是各平台原生的。应用程序窗口在每个OS下有不同的行为，Electron将在app中实现这些约定的责任交给开发者们。

一般而言，你可以使用进程全局的 platform 属性来专门为某些操作系统运行代码.

app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') app.quit()
})

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

  app.on('activate', () => {
    if (BrowserWindow.getAllWindows().length === 0) createWindow()
  })
})

6. 通过预加载脚本在渲染器中访问 Node.js

在主进程通过Node的全局 process 对象访问这个信息是微不足道的。然而，你不能直接在主进程中编辑DOM，因为它无法访问渲染器文档上下文。它们存在于完全不同的进程！

这是将 预加载 脚本连接到渲染器时派上用场的地方。预加载脚本在渲染器进程加载之前加载，并有权访问两个渲染器全局 (例如 window 和 document) 和 Node.js 环境

// 访问 Node.js process.versions 对象，
// 并运行一个基本的 replaceText 辅助函数将版本号插入到 HTML 文档中

window.addEventListener('DOMContentLoaded', () => {
  const replaceText = (selector, text) => {
    const element = document.getElementById(selector)
    if (element) element.innerText = text
  }

  for (const dependency of ['chrome', 'node', 'electron']) {
    replaceText(`${dependency}-version`, process.versions[dependency])
  }
})

要将此脚本附加到渲染器流程，请在你现有的 BrowserWindow 构造器中将路径中的预加载脚本传入 webPreferences.preload 选项

const { app, BrowserWindow } = require('electron')
// 在你文件顶部导入 Node.js 的 path 模块
const path = require('node:path')

// 修改已有的 createWindow() 方法
const createWindow = () => {
  const win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      preload: path.join(__dirname, 'preload.js')
    }
  })

  win.loadFile('index.html')
}
// ...

7. 将功能添加到你的网页内容中

只需将你自定义脚本，放到入口网页文件中引入即可

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

// renderer.js 中包含的代码可以在接下来使用与前端开发相同的 JavaScript API 和工具。
// 例如使用 webpack 打包并最小化您的代码，或者使用 React 来管理您的用户界面

打包分发

最快捷的打包方式是使用 Electron Forge

Electron-forge 会创建 out 文件夹，您的软件包将在那里找到

// Example for macOS
out/
├── out/make/zip/darwin/x64/my-electron-app-darwin-x64-1.0.0.zip
├── ...
└── out/my-electron-app-darwin-x64/my-electron-app.app/Contents/MacOS/my-electron-app

架构设计

基础组成

进程模型

主进程：负责应用的生命周期、展示原生窗口、执行特殊操作和管理渲染进程，拥有完全的操作系统访问权限！

渲染进程(简称渲染器) ：负责展示图形内容。您可以将渲染的网页指向 web 地址或本地 HTML 文件。渲染器和常规的网页行为很相似，访问的 web API 也相同

与进程息息相关的各个模块，常见的 模块导入 方法如下：

const { app, BrowserWindow } = require('electron')

可以看到，示例中的两个模块 app 和 BrowserWindow 的命名规则，有所不同

《模块大写约定》

Electron 遵循 JavaScript 传统约定：

以大驼峰 (PascalCase) 命名可实例化的类 (如 BrowserWindow, Tray 和 Notification)
以小驼峰 (camelCase) 命名不可实例化的函数、变量等 (如 app, ipcRenderer, webContents)

特定控制器

通过检查 Node.js 的 process.platform 变量，您可以针对特定平台运行特定代码。

请注意，Electron 目前只支持三个平台（platform）：

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

上下文隔离

上下文隔离功能将确保您的预加载脚本和 Electron的内部逻辑运行在所加载的 webcontent网页之外的另一个独立的上下文环境里。这对安全性很重要，因为它有助于阻止网站访问 Electron 的内部组件和您的预加载脚本可访问的高等级权限的API 。

进程间通信

一名不愿透露姓名的路人说过：翻山越岭而来的讯息，总有一天会被收到~

预加载脚本

主进程： 是一个拥有着完全操作系统访问权限的 Node.js 环境！除了 Electron 模块外，还可以访问 Node.js 内置模块，以及所有通过 npm 安装的模块！

渲染进程：出于安全原因，渲染进程默认跑在网页页面上，而并非 Node.js里！

为了将 Electron 的不同类型的进程桥接在一起，我们需要使用被称为 预加载 的特殊脚本。

预加载脚本：运行在具有《HTML DOM》和《Node.js Electron API》的有限子集访问权限的环境中，其可访问 DOM 接口和 Node.js 环境，并且经常在其中使用 contextBridge 接口将特权接口暴露给渲染器。

从 Electron 20 开始，预加载脚本默认 沙盒化 ，不再拥有完整 Node.js 环境的访问权。

实际上，这意味着你只拥有一个 polyfilled 的 require 函数，这个函数只能访问一组有限的 API。

可用 API	详情
Electron 模块	渲染进程模块
Node.js 模块	events、timers、url
Polyfilled 的全局模块	Buffer、process、clearImmediate、setImmediate

预加载脚本在渲染器加载网页之前注入！为了将脚本附在渲染进程上，在 BrowserWindow 构造器中使用 webPreferences.preload 传入脚本的路径。

const { app, BrowserWindow } = require('electron')
const path = require('node:path')

const createWindow = () => {
  const win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      preload: path.join(__dirname, 'preload.js')
    }
  })

  win.loadFile('index.html')
}

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

IPC 通信

Electron 的主进程和渲染进程有着清楚的分工并且不可互换。这代表着无论是从渲染进程直接访问 Node.js 接口，亦或者是从主进程访问 HTML 文档对象模型 (DOM)，都是不可能的。

IPC 安全

你永远都不会想要通过预加载直接暴露整个 ipcRenderer 模块。这将使得你的渲染器能够直接向主进程发送任意的 IPC 信息，会使得其成为恶意代码最强有力的攻击媒介。

项目构建

安装指导

npm install electron --save-dev

为什么 ELECTRON 是 DEVDEPENDENCY（即仅在开发环境需要的额外依赖）?

您的应用需要运行 Electron API，因此这听上去可能有点反直觉。实际上，打包后的应用本身会包含 Electron 的二进制文件，因此不需要将 Electron 作为生产环境依赖。

开发方向

开发调试

Webstorm（推荐 IDE）

推荐使用 Webstorm 作为您的 IDE 的几点借口：

极其方便阅读项目中，如 electron 等任一 pkg 源码
极其方便查询任一 pkg 全量 API 及其完整定义
极其方便全局搜索关键字及其匹配次数等

本节将介绍如何在 WebStorm 中，调试你的 electron 项目代码。

调试主进程

创建 npm 运行配置

配置 npm 运行参数

Setting	Value	备注
Name	main	这里命名为 main，是为了标识，当前调试对象为主进程
Command	run	-
Scripts	dev	-
Arguments	-- --sourcemap --remote-debugging-port=9229	参数以 -- 开头是使参数生效的重要配置，勿漏

为主进程代码打断点

在主进程代码片段中，单击要调试的代码行行号，即可断点成功

开始正式调试主进程

Chrome DevTools

调试H5应用

👉 点我查看 👈

业务框架

www.kaka996.com/

数据存储

SQLite 便捷轻型数据库

www.sqlite.org/

www.cnblogs.com/niumoo/p/18…

常见问题

从 0 到 1 认识 Electron

桌面方案

方案

nw.js

neutralino.js

electron

对比

开源程度

开发难度

平台支持

性能体验

社区生态

总结

基础信息

官方文档

沙盒实测

构建工具

衍生产品

业务框架

目标计划

学习计划

快速入门

基本要求

创建步骤

1. 使用脚手架创建项目

2. 运行主进程

3. 创建页面

4. 在窗口中打开您的页面

5. 管理窗口的生命周期

6. 通过预加载脚本在渲染器中访问 Node.js

7. 将功能添加到你的网页内容中

打包分发

架构设计

基础组成

进程模型

特定控制器

上下文隔离

进程间通信

预加载脚本

IPC 通信

项目构建

安装指导

开发方向

开发调试

Webstorm（推荐 IDE）

调试主进程

创建 npm 运行配置

配置 npm 运行参数

为主进程代码打断点

开始正式调试主进程

Chrome DevTools

调试H5应用

业务框架

数据存储

常见问题

镜像获取失败

屏蔽安全警告

多系统类图标

多个页面入口