CodeNodeX AI
Sign upWrite

Learning Path

Electron tutorials

Browse tutorials and chapters for Electron.

Mobile & cross-platform

iOS, Android, Flutter, Ionic, Electron, and cross-platform clients.

Tutorials

22

TAXONOMYMobile & cross-platformFetched/Electron

Electron 教程

Electron 教程 Electron（原名 Atom Shell） 是由 GitHub 开发的一个 开源跨平台桌面应用开发框架。 Electron 是一个开源的框架，专门用于使用 Web 技术（HTML、CSS 和 JavaScript）来构建跨平台的桌面应用程序。 Electron 让我们可以像写网页一样写桌面应用，比如 Windows 的 .exe、macOS 的 .app、Linux 的可执行文件。 Electron..

TUTORIALMobile & cross-platformFetched/Electron

Electron 进阶主题

Electron 进阶主题 Electron 不仅能构建跨平台桌面应用，还支持深度系统集成和进阶功能扩展。掌握这些进阶技巧，可以让应用更专业、功能更强大。 Native Node 模块集成 node-gyp 使用 node-gyp 是 Node.js 原生模块编译工具，支持 C/C++ 模块编译 安装：npm install -g node-gyp 初始化项目：node-gyp configure nod..

TUTORIALMobile & cross-platformFetched/Electron

Electron API 速查与配置模板

Electron API 速查与配置模板 主进程 API 速查表 模块 功能描述 常用方法 说明 app 控制应用生命周期 app.on('ready')、app..

TUTORIALMobile & cross-platformFetched/Electron

Electron 架构

Electron 架构 可以把 Electron 看成是： 一个多进程的应用容器，内置了一个浏览器引擎 (Chromium) 和一个 Node.js 运行时，通过进程间通信（IPC）协同运行，实现“网页 + 系统能力”的桌面应用。 它的核心组成是： 角色 说明 类比 ..

TUTORIALMobile & cross-platformFetched/Electron

Electron 核心概念

Electron 核心概念 Electron 的本质是一个多进程桌面应用框架，它结合了 Chromium（渲染层） 和 Node.js（系统层），通过独立的进程模型实现界面显示、逻辑控制和安全通信。 下面是 Electron 核心架构，展示了主进程、渲染进程、IPC 通信、以及 Preload 的关系。 主进程（A）： 运行 Node.js，控制窗口与系统交互。 使用 BrowserWindow 创建渲染进程。 ..

TUTORIALMobile & cross-platformFetched/Electron

Electron 调试与测试

Electron 调试与测试 Electron 应用涉及 主进程与渲染进程 两个运行环境，因此调试和测试策略需要针对不同进程设计。良好的调试与测试流程可以提升开发效率和应用稳定性。 调试主进程 使用 Chrome DevTools 调试 Electron 主进程可以通过 --inspect 或 --inspect-brk 启动，用 Chrome DevTools 调试。 启动示例：electron --inspe..

TUTORIALMobile & cross-platformFetched/Electron

Electron 打包与分发

Electron 打包与分发 Electron 应用开发完成后，需要将应用打包为桌面可执行文件，并发布给用户。打包与分发流程涉及工具选择、配置、签名和更新策略等多个环节。 打包工具介绍 electron-builder 高度自动化，支持 Windows、macOS、Linux 支持自动更新功能 配置简单，适合生产环境 可生成 .exe、.dmg、.AppImage 等格式 electron-pack..

TUTORIALMobile & cross-platformFetched/Electron

Electron 文件系统与数据存储

Electron 文件系统与数据存储 在 Electron 中，由于它基于 Node.js，你可以直接访问文件系统、数据库以及本地存储。 这让桌面应用能够像传统软件一样读写文件、保存配置，甚至实现复杂的数据管理。 文件系统操作 Electron 允许你在渲染进程或主进程中使用 Node.js 的内置 fs 模块进行文件操作。 Node.js fs 模块的使用 fs 模块提供了多种文件系统操作，如读取、写入、重命名、删除等。 实例 ..

TUTORIALMobile & cross-platformFetched/Electron

Electron 开发工具

Electron 开发工具 Electron 开发工具推荐使用 VS Code，如果你还不熟悉 VS Code 可以参考我们的 VS Code 教程。 VS Code 下载地址：https://code.visualstudio.com/。 VS Code 本身就是用 Electron 构建的，因此它对 Electron 开发有天然的支持优势： 内置终端集成 强大的调试功能 丰富的插件生态 Git 集成 Intelli..

TUTORIALMobile & cross-platformFetched/Electron

Electron 安装

Electron 安装 在安装 Electron 之前，需要准备两个基础环境： 1、Node.js Electron 是基于 Node.js 的框架，因此必须先安装 Node.js。 检查是否已安装： node -v npm -v 如果输出版本号，说明已安装。若没有，请前往 Node.js 官网 下载 LTS（长期支持版）。 安装完成后，系统会自动附带 npm（Node 包管理器）。 如果不熟悉 Node.js，可以参考： Node...

TUTORIALMobile & cross-platformFetched/Electron

Electron 简介

Electron 简介 Electron 是一个开源框架，把 Chromium（浏览器内核）＋ Node.js（服务器/系统能力） 包裹进一个桌面应用壳，让你用 HTML/CSS/JS 写跨平台的桌面程序（Windows、macOS、Linux）。 关键点： 前端负责界面（Renderer 进程：像浏览器标签页）。 主进程（Main）负责应用生命周期、窗口、原生 API 调用。 两者通过 IPC（进程间通信）..

TUTORIALMobile & cross-platformFetched/Electron

Electron 原生功能集成

Electron 原生功能集成 Electron 之所以强大，是因为它不仅能写前端，还能访问系统的原生功能，比如菜单、对话框、托盘、通知和全局快捷键等。 本章节我们来看看如何通过主进程模块调用这些功能。 菜单系统 Electron 提供 Menu 模块用于创建菜单栏、上下文菜单和系统托盘菜单。 应用菜单（Menu） 应用菜单是显示在窗口顶部（macOS）或应用窗口中的菜单栏。 实例 [mycode4 type='js&..

TUTORIALMobile & cross-platformFetched/Electron

Electron 网络与外部通信

Electron 网络与外部通信 Electron 应用不仅可以操作本地资源，也可以与外部网络服务进行交互。无论是发起 HTTP 请求、建立实时 WebSocket 连接，还是使用 Node.js 的原生 net 模块，你都可以像在浏览器或服务器上一样进行网络通信。 HTTP 请求 Electron 同时支持 浏览器 API（fetch） 和 第三方库（axios），并且可以处理跨域与认证问题。 fetch API 使用 fetch..

TUTORIALMobile & cross-platformFetched/Electron

Electron 性能优化

Electron 性能优化 Electron 应用功能强大，但同时可能存在启动慢、内存占用高、包体积大等性能问题。 通过合理优化，可以显著提升用户体验和应用效率。 启动性能优化 延迟加载 将非必要模块或组件延迟加载，避免启动时一次性加载过多内容。 示例：在用户第一次操作时才加载特定功能模块。 document.getElementById('loadFeature').addEventLis..

TUTORIALMobile & cross-platformFetched/Electron

Electron 实战项目

Electron 实战项目 通过实战项目，可以加深对 Electron 各种特性的理解，包括窗口管理、IPC 通信、文件操作、数据存储和界面优化。 项目一：桌面笔记应用 功能设计 创建、编辑、删除笔记 自动保存与本地存储 支持多窗口同时编辑 界面简洁，提供 Markdown 渲染 技术选型 前端框架：Vue 或 React 渲染进程：展示笔记内容，支持富文本 / Markdown ..

TUTORIALMobile & cross-platformFetched/Electron

Electron 发布与部署

Electron 发布与部署 Electron 应用开发完成并打包后，需要将应用发布到用户端。发布方式主要分为 应用商店 和 独立分发，同时需要考虑更新服务和版本管理策略。 应用商店发布 Microsoft Store 发布 打包要求：使用 electron-windows-store 工具将 .exe 或 .msix 转换为 Store 包 签名：需要 Microsoft Developer 账号并申请代码签名证书..

TUTORIALMobile & cross-platformFetched/Electron

Electron 安全性

Electron 安全性 Electron 结合了 Node.js 与浏览器环境，这让桌面应用功能非常强大，但也带来一定的安全风险。正确的安全策略可以降低 XSS、远程代码执行（RCE）和数据泄露的风险。 安全检查清单与常见隐患 安全检查清单 启用 上下文隔离（contextIsolation） 使用 预加载脚本（preload.js）暴露安全 API 不在渲染进程中直接使用 Node.js 模块 ..

TUTORIALMobile & cross-platformFetched/Electron

Electron 入门实例

Electron 入门实例 在上一章节我们已经学会了如何安装 Electron。 本章节我们将一步步介绍如何创建一个简单的 Electron 实例。 1、创建项目目录 打开终端，依次执行： mkdir my-electron-app cd my-electron-app npm init -y npm install electron --save-dev 生成结构如下： my-electron-demo/ ├─ pac..

TUTORIALMobile & cross-platformFetched/Electron

Electron 教程

Electron 教程 Electron（原名 Atom Shell） 是由 GitHub 开发的一个 开源跨平台桌面应用开发框架。 Electron 是一个开源的框架，专门用于使用 Web 技术（HTML、CSS 和 JavaScript）来构建跨平台的桌面应用程序。 Electron 让我们可以像写网页一样写桌面应用，比如 Windows 的 .exe、macOS 的 .app、Linux 的可执行文件。 Electron..

TUTORIALMobile & cross-platformFetched/Electron

Electron 创建和管理窗口

Electron 创建和管理窗口 在 Electron 中，窗口（Window）是应用与用户交互的核心载体。 所有可视界面都运行在 渲染进程（Renderer Process） 中，而这些窗口的创建与控制则由 主进程（Main Process） 负责。 创建和管理窗口 Electron 通过 BrowserWindow 类来创建窗口。 主进程中通过以下方式定义一个新窗口： 实例 [mycode4 type='js'..

TUTORIALMobile & cross-platformFetched/Electron

React + Electron 实战项目

React + Electron 实战项目 本章节我们将使用 React + Electron 制作一个笔记应用，这个实战项目名为 ReactElectronNotes，功能涵盖多窗口、托盘、文件操作和 IPC 通信，是初学者练手非常合适的项目。 如果你还不了解 React，可以先参考：React 教程。 ReactElectronNotes 项目将教你从零开始构建一个 跨平台桌面笔记应用，包含以下特性： React 前端渲..

TUTORIALMobile & cross-platformFetched/Electron

Vue + Electron 实战项目

Vue + Electron 实战项目 本章节我们将使用 Vue + Electron 制作一个笔记应用，这个实战项目名为 VueElectronNotes，功能涵盖多窗口、托盘、文件操作和 IPC 通信，是初学者练手非常合适的项目。 如果你还不了解 Vue，可以先参考：Vue 教程。 一、项目功能 桌面笔记应用（Notes） 主窗口显示笔记列表 新建笔记弹出子窗口 系统托盘图标，最小化到托盘 ..