前端必备：Electron基础全解析

06-01 1890阅读

文章目录

一、Electron 简介
二、Electron 优势剖析
- （一）跨平台特性
- （二）开发效率高
- （三）强大的生态系统
三、核心组件深入解读
- （一）Chromium
- （二）Node.js
- （三）Native API
四、进程模型详解
- （一）主进程
- （二）渲染进程
- （三）预加载脚本
五、快速上手实践
- （一）环境搭建
- - 1. 安装 Node.js
  - 2. 安装 Electron
  - 3. 解决安装过程中可能遇到的问题
  - 4. 配置开发环境的关键要点
- （二）创建第一个 Electron 应用
- - 1. 初始化工程
  - 2. 安装依赖
  - 3. 创建 HTML 页面
  - 4. 编写入口文件（main.js）
  - 5. 管理窗口生命周期
六、IPC 通信机制揭秘
- （一）渲染进程与主进程通信
- （二）应用场景举例
七、总结与展望

一、Electron 简介

Electron 是一个使用 JavaScript、HTML 和 CSS 构建桌面应用程序的框架，它嵌入了 Chromium 和 Node.js，允许开发者使用熟悉的前端技术栈创建跨平台的桌面应用，而无需具备本地开发经验。其前身是 Atom Shell，由 GitHub 的开发者在 2013 年创建，最初用于 GitHub 的 Atom 编辑器，2015 年 4 月更名为 Electron 并作为独立项目发布，如今已在众多领域得到广泛应用，如 Visual Studio Code、Slack、Discord、百度网盘、网易云音乐等知名软件都是基于 Electron 开发的，这充分彰显了其在桌面应用开发领域的强大实力和广泛适用性。

二、Electron 优势剖析

（一）跨平台特性

Electron 最大的优势之一就是其出色的跨平台能力。借助 Chromium 和 Node.js，开发者能够使用单一的代码库构建出可以在 Windows、Mac 和 Linux 系统上运行的桌面应用，而无需为每个平台单独编写代码，这大大节省了开发时间和成本。例如，一款基于 Electron 开发的文本编辑器，在 Windows 上的界面布局、操作方式与在 Mac 和 Linux 上几乎完全一致，用户可以在不同操作系统上无缝切换使用，而开发者也只需维护一份代码，极大地提高了开发效率和应用的可维护性。

（二）开发效率高

对于熟悉前端技术的开发者来说，Electron 的开发效率优势明显。它允许使用 HTML、CSS 和 JavaScript 进行桌面应用开发，这些前端技术的广泛应用使得开发者可以快速上手，无需深入学习复杂的原生桌面开发技术。同时，Node.js 的丰富模块生态系统也为 Electron 应用提供了强大的后端支持，无论是网络请求、文件系统操作还是数据库交互，都能轻松实现。以构建一个具有文件上传功能的应用为例，利用 Node.js 的文件处理模块和前端的 HTML 表单，结合 Electron 的进程间通信机制，能够迅速实现这一功能，而相比传统的桌面开发技术，可能需要编写大量的底层代码才能完成。

（三）强大的生态系统

Electron 拥有庞大且活跃的社区，这意味着开发者可以获取到丰富的工具、库和资源，以加速项目的开发进程。社区提供了各种各样的 UI 框架，如 React、Vue 和 Angular 等，这些框架可以帮助开发者构建出美观、交互性强的用户界面。此外，还有众多的打包工具、自动化测试框架和调试工具可供选择，如 Electron Forge 用于打包应用，Spectron 用于自动化测试，这些工具能够解决在开发过程中遇到的各种问题，提高开发的质量和效率。例如，在开发一个需要与后端 API 进行频繁数据交互的应用时，可以使用 Axios 这个流行的 HTTP 客户端库，轻松实现数据的获取和提交，而无需从头编写网络请求代码，从而专注于业务逻辑的实现。

三、核心组件深入解读

（一）Chromium

Chromium 为 Electron 提供了强大的 UI 能力。它是谷歌开源的浏览器项目，是 Chrome 浏览器的基础。Electron 基于 Chromium，使得开发者可以利用最新的 Web 标准来构建桌面应用的用户界面，无需担心浏览器兼容性问题。Chromium 具备高效的页面渲染引擎，能够快速加载和显示复杂的网页内容，为用户提供流畅的浏览体验。在开发一个数据可视化的桌面应用时，利用 Chromium 的 WebGL 技术，可以创建出高性能的交互式数据图表，通过硬件加速实现流畅的动画效果和实时数据更新，让用户能够直观地理解和分析数据。此外，Chromium 还支持丰富的前端交互功能，如触摸事件、手势识别等，使得应用的交互更加自然和便捷。

（二）Node.js

Node.js 赋予了 Electron 底层操作能力。它是一个基于 Chrome V8 引擎的 JavaScript 运行时，专注于异步 I/O 和事件驱动编程。在 Electron 应用中，Node.js 允许开发者使用其丰富的内置模块，如文件系统（fs）、网络（net）、进程（process）等，实现各种系统级功能。例如，通过 fs 模块，开发者可以轻松地进行文件的读写、删除、重命名等操作，实现应用数据的存储和管理；利用 net 模块，可以创建 TCP 或 UDP 服务器，实现与其他设备或服务的网络通信；process 模块则提供了有关当前进程的信息和控制方法，如获取进程 ID、退出进程等。在开发一个文件加密工具时，使用 Node.js 的加密模块（crypto），结合文件系统模块，能够读取用户选择的文件，对其内容进行加密处理，并将加密后的文件保存到指定位置，同时还可以通过进程模块来显示加密进度和处理结果。

（三）Native API

Native API 为 Electron 解决了跨平台问题，提供了统一的原生界面组件和系统能力调用。它封装了不同操作系统的底层接口，使得开发者可以使用相同的代码在 Windows、Mac 和 Linux 上创建原生风格的界面，如窗口、托盘、菜单、通知等。例如，使用 Native API 创建一个系统托盘应用，当用户点击托盘图标时，可以弹出一个包含常用操作的菜单，如打开主窗口、设置、退出等；同时，还可以接收系统通知，如应用的更新提醒、新消息通知等，并在托盘图标上显示相应的提示信息。此外，Native API 还提供了访问系统资源和功能的能力，如获取系统信息（屏幕分辨率、CPU 使用率等）、调用系统对话框（打开文件、保存文件、选择文件夹等）、注册全局快捷键等，丰富了应用的功能和用户体验。在开发一个图片编辑应用时，可以使用 Native API 调用系统的文件对话框，让用户方便地选择要编辑的图片文件；同时，利用系统的通知功能，在图片编辑完成后向用户发送通知，告知编辑结果。

四、进程模型详解

（一）主进程

在 Electron 应用中，主进程扮演着至关重要的角色，它是整个应用的入口点，通常对应的脚本文件为 main.js（当然也可以是其他类似命名的文件）。

主进程的职责众多，其中关键的一点就是创建和管理渲染进程。例如，当应用启动后，需要打开多个窗口展示不同的页面内容时，主进程就负责创建对应的渲染进程来加载并呈现这些页面，就如同一个总指挥，协调各个窗口对应的渲染进程的 “工作” 开展。

同时，主进程还需要处理各种各样的系统事件。像应用的启动、关闭操作，在不同操作系统下有着不同的行为规范，主进程要依据相应的规则来妥善处理。比如在 Windows 和 Linux 系统上，当关闭应用的所有窗口后，主进程会执行相应代码让应用退出；而在 macOS 系统中，即便所有窗口都关闭了，应用通常还是会继续运行，直到用户明确使用相应快捷键（如 Cmd + Q）来退出应用，这些行为的实现都依赖主进程的管控。

此外，主进程还承担着与操作系统进行交互的重任。它能够调用操作系统的原生功能，像访问文件系统实现文件的读写、复制、删除等操作，创建系统托盘、菜单以及发送系统通知等，还可以注册全局快捷键，方便用户操作应用。例如，要实现一个功能，当用户按下特定组合键时，应用弹出一个提示框，那就需要主进程去注册这个全局快捷键，并关联对应的操作逻辑。
以下是一个简单的主进程基本结构的代码示例，展示了创建窗口等关键操作：

const {
    app, BrowserWindow } = require('electron');
const path = require('path');
function createWindow() {
   
    const win = new BrowserWindow({
   
        width: 800,
        height: 600,
        // 这里可以配置一些窗口相关的偏好设置，比如预加载脚本等
        webPreferences: {
   
            // 后续会提到的预加载脚本路径配置示例
            preload: path.join(__dirname, 'preload.js')
        }
    });
    win.loadFile('index.html');
}
app.on('ready', () => {
   
    createWindow();
    app.on('activate', () => {
   
        if (BrowserWindow.getAllWindows().length === 0) {
   
            createWindow();
        }
    });
});
app.on('window-all-closed', () => {
   
    if (process.platform!== 'darwin') {
   
        app.quit();
    }
});

在上述代码中，首先引入了app和BrowserWindow模块，app模块用于控制应用的事件生命周期，BrowserWindow则负责创建和管理窗口。然后通过createWindow函数创建了一个窗口实例，设置了窗口的宽度、高度，并指定了预加载脚本的路径（后续会详细介绍预加载脚本的作用），接着让窗口加载index.html文件。同时，通过监听app模块的不同事件，比如ready（应用准备就绪）、activate（激活应用，常用于 macOS 系统下窗口管理）以及window-all-closed（所有窗口关闭时的处理，区分不同操作系统）来实现符合不同操作系统规范的应用窗口行为。

（二）渲染进程

渲染进程与前端开发联系十分紧密，它可以看作是前端开发成果在 Electron 应用中的承载者，主要负责页面的加载和渲染工作。具体来说，就是将我们编写的 HTML、CSS 和 JavaScript 代码转化为用户可以直观看到和交互的界面，显示在对应的应用窗口当中。

每个应用窗口都有自己独立的渲染进程，这些渲染进程之间相互隔离，彼此不能直接进行通信。不过，渲染进程可以通过特定的机制与主进程进行通信，以此来实现一些更复杂的功能，比如获取系统相关信息或者让主进程执行一些底层操作等。

但出于安全方面的考虑，渲染进程默认运行在网页页面的环境下，并非直接运行在 Node.js 环境中，所以它对 Node.js API 的访问是有限制的，只有在进行了相应配置（比如启用nodeIntegration等相关设置，但在新版本中更推荐使用安全的预加载脚本等方式来进行功能扩展）后，才能使用部分 Node.js API。

这里举例说明一下如何在渲染进程中进行页面开发以及与主进程协同工作。假设我们有一个需求，在页面中有一个按钮，点击按钮后获取应用当前所在操作系统的信息并显示出来。
首先，在 HTML 页面（例如index.html）中创建一个按钮元素：



    
    示例页面


    获取操作系统信息

免责声明：我们致力于保护作者版权，注重分享，被刊用文章因无法核实真实出处，未能及时与作者取得联系，或有版权异议的，请联系管理员，我们会立即处理! 部分文章是来自自研大数据AI进行生成,内容摘自(百度百科,百度知道,头条百科,中国民法典,刑法,牛津词典,新华词典,汉语词典,国家院校,科普平台)等数据,内容仅供学习参考,不准确地方联系删除处理! 图片声明：本站部分配图来自人工智能系统AI生成,觅知网授权图片,PxHere摄影无版权图库和百度，360，搜狗等多加搜索引擎自动关键词搜索配图，如有侵权的图片，请第一时间联系我们。