Learning Path
浏览 Electron 相关教程与章节。
iOS、Android、Flutter、Ionic、Electron 与跨平台客户端。
教程
22
Electron 教程 Electron（原名 Atom Shell） 是由 GitHub 开发的一个 开源跨平台桌面应用开发框架。 Electron 是一个开源的框架，专门用于使用 Web 技术（HTML、CSS 和 JavaScript）来构建跨平台的桌面应用程序。 Electron 让我们可以像写网页一样写桌面应用，比如 Windows 的 .exe、macOS 的 .app、Linux 的可执行文件。 Electron..
Electron 进阶主题 Electron 不仅能构建跨平台桌面应用，还支持深度系统集成和进阶功能扩展。掌握这些进阶技巧，可以让应用更专业、功能更强大。 Native Node 模块集成 node-gyp 使用 node-gyp 是 Node.js 原生模块编译工具，支持 C/C++ 模块编译 安装：npm install -g node-gyp 初始化项目：node-gyp configure nod..
Electron API 速查与配置模板 主进程 API 速查表 模块 功能描述 常用方法 说明 app 控制应用生命周期 app.on('ready')、app..
Electron 架构 可以把 Electron 看成是： 一个多进程的应用容器，内置了一个浏览器引擎 (Chromium) 和一个 Node.js 运行时，通过进程间通信（IPC）协同运行，实现“网页 + 系统能力”的桌面应用。 它的核心组成是： 角色 说明 类比 ..
Electron 核心概念 Electron 的本质是一个多进程桌面应用框架，它结合了 Chromium（渲染层） 和 Node.js（系统层），通过独立的进程模型实现界面显示、逻辑控制和安全通信。 下面是 Electron 核心架构，展示了主进程、渲染进程、IPC 通信、以及 Preload 的关系。 主进程（A）： 运行 Node.js，控制窗口与系统交互。 使用 BrowserWindow 创建渲染进程。 ..
Electron 调试与测试 Electron 应用涉及 主进程与渲染进程 两个运行环境，因此调试和测试策略需要针对不同进程设计。良好的调试与测试流程可以提升开发效率和应用稳定性。 调试主进程 使用 Chrome DevTools 调试 Electron 主进程可以通过 --inspect 或 --inspect-brk 启动，用 Chrome DevTools 调试。 启动示例：electron --inspe..
Electron 打包与分发 Electron 应用开发完成后，需要将应用打包为桌面可执行文件，并发布给用户。打包与分发流程涉及工具选择、配置、签名和更新策略等多个环节。 打包工具介绍 electron-builder 高度自动化，支持 Windows、macOS、Linux 支持自动更新功能 配置简单，适合生产环境 可生成 .exe、.dmg、.AppImage 等格式 electron-pack..
Electron 文件系统与数据存储 在 Electron 中，由于它基于 Node.js，你可以直接访问文件系统、数据库以及本地存储。 这让桌面应用能够像传统软件一样读写文件、保存配置，甚至实现复杂的数据管理。 文件系统操作 Electron 允许你在渲染进程或主进程中使用 Node.js 的内置 fs 模块进行文件操作。 Node.js fs 模块的使用 fs 模块提供了多种文件系统操作，如读取、写入、重命名、删除等。 实例 ..
Electron 开发工具 Electron 开发工具推荐使用 VS Code，如果你还不熟悉 VS Code 可以参考我们的 VS Code 教程。 VS Code 下载地址：https://code.visualstudio.com/。 VS Code 本身就是用 Electron 构建的，因此它对 Electron 开发有天然的支持优势： 内置终端集成 强大的调试功能 丰富的插件生态 Git 集成 Intelli..
Electron 安装 在安装 Electron 之前，需要准备两个基础环境： 1、Node.js Electron 是基于 Node.js 的框架，因此必须先安装 Node.js。 检查是否已安装： node -v npm -v 如果输出版本号，说明已安装。若没有，请前往 Node.js 官网 下载 LTS（长期支持版）。 安装完成后，系统会自动附带 npm（Node 包管理器）。 如果不熟悉 Node.js，可以参考： Node...
Electron 简介 Electron 是一个开源框架，把 Chromium（浏览器内核）＋ Node.js（服务器/系统能力） 包裹进一个桌面应用壳，让你用 HTML/CSS/JS 写跨平台的桌面程序（Windows、macOS、Linux）。 关键点： 前端负责界面（Renderer 进程：像浏览器标签页）。 主进程（Main）负责应用生命周期、窗口、原生 API 调用。 两者通过 IPC（进程间通信）..
Electron 原生功能集成 Electron 之所以强大，是因为它不仅能写前端，还能访问系统的原生功能，比如菜单、对话框、托盘、通知和全局快捷键等。 本章节我们来看看如何通过主进程模块调用这些功能。 菜单系统 Electron 提供 Menu 模块用于创建菜单栏、上下文菜单和系统托盘菜单。 应用菜单（Menu） 应用菜单是显示在窗口顶部（macOS）或应用窗口中的菜单栏。 实例 [mycode4 type='js&..
Electron 网络与外部通信 Electron 应用不仅可以操作本地资源，也可以与外部网络服务进行交互。无论是发起 HTTP 请求、建立实时 WebSocket 连接，还是使用 Node.js 的原生 net 模块，你都可以像在浏览器或服务器上一样进行网络通信。 HTTP 请求 Electron 同时支持 浏览器 API（fetch） 和 第三方库（axios），并且可以处理跨域与认证问题。 fetch API 使用 fetch..
Electron 性能优化 Electron 应用功能强大，但同时可能存在启动慢、内存占用高、包体积大等性能问题。 通过合理优化，可以显著提升用户体验和应用效率。 启动性能优化 延迟加载 将非必要模块或组件延迟加载，避免启动时一次性加载过多内容。 示例：在用户第一次操作时才加载特定功能模块。 document.getElementById('loadFeature').addEventLis..
Electron 实战项目 通过实战项目，可以加深对 Electron 各种特性的理解，包括窗口管理、IPC 通信、文件操作、数据存储和界面优化。 项目一：桌面笔记应用 功能设计 创建、编辑、删除笔记 自动保存与本地存储 支持多窗口同时编辑 界面简洁，提供 Markdown 渲染 技术选型 前端框架：Vue 或 React 渲染进程：展示笔记内容，支持富文本 / Markdown ..
Electron 发布与部署 Electron 应用开发完成并打包后，需要将应用发布到用户端。发布方式主要分为 应用商店 和 独立分发，同时需要考虑更新服务和版本管理策略。 应用商店发布 Microsoft Store 发布 打包要求：使用 electron-windows-store 工具将 .exe 或 .msix 转换为 Store 包 签名：需要 Microsoft Developer 账号并申请代码签名证书..
Electron 安全性 Electron 结合了 Node.js 与浏览器环境，这让桌面应用功能非常强大，但也带来一定的安全风险。正确的安全策略可以降低 XSS、远程代码执行（RCE）和数据泄露的风险。 安全检查清单与常见隐患 安全检查清单 启用 上下文隔离（contextIsolation） 使用 预加载脚本（preload.js）暴露安全 API 不在渲染进程中直接使用 Node.js 模块 ..
Electron 入门实例 在上一章节我们已经学会了如何安装 Electron。 本章节我们将一步步介绍如何创建一个简单的 Electron 实例。 1、创建项目目录 打开终端，依次执行： mkdir my-electron-app cd my-electron-app npm init -y npm install electron --save-dev 生成结构如下： my-electron-demo/ ├─ pac..
Electron 创建和管理窗口 在 Electron 中，窗口（Window）是应用与用户交互的核心载体。 所有可视界面都运行在 渲染进程（Renderer Process） 中，而这些窗口的创建与控制则由 主进程（Main Process） 负责。 创建和管理窗口 Electron 通过 BrowserWindow 类来创建窗口。 主进程中通过以下方式定义一个新窗口： 实例 [mycode4 type='js'..
React + Electron 实战项目 本章节我们将使用 React + Electron 制作一个笔记应用，这个实战项目名为 ReactElectronNotes，功能涵盖多窗口、托盘、文件操作和 IPC 通信，是初学者练手非常合适的项目。 如果你还不了解 React，可以先参考：React 教程。 ReactElectronNotes 项目将教你从零开始构建一个 跨平台桌面笔记应用，包含以下特性： React 前端渲..
Vue + Electron 实战项目 本章节我们将使用 Vue + Electron 制作一个笔记应用，这个实战项目名为 VueElectronNotes，功能涵盖多窗口、托盘、文件操作和 IPC 通信，是初学者练手非常合适的项目。 如果你还不了解 Vue，可以先参考：Vue 教程。 一、项目功能 桌面笔记应用（Notes） 主窗口显示笔记列表 新建笔记弹出子窗口 系统托盘图标，最小化到托盘 ..