使用 JavaScript 和 Electron.js 构建桌面 GUI 应用程序-js教程-PHP中文网

首页

web前端

js教程

使用 JavaScript 和 Electron.js 构建桌面 GUI 应用程序

王林

Sep 14, 2023 am 09:57 AM

使用 JavaScript 和 Electron.js 构建桌面 GUI 应用程序

在当今的技术时代，桌面应用程序在我们的日常生活中具有巨大的意义，可以提供增强的用户体验并充分利用本地计算机的功能。传统上，开发桌面应用程序需要特定于平台的编程语言和框架方面的专业知识，这对希望涉足桌面开发的 Web 开发人员构成了挑战。然而，Electron.js 有效地解决了这一挑战。

Electron.js 以前称为 Atom Shell，是一个源自 GitHub 的开源框架。它使开发人员能够使用熟悉的 Web 技术（例如 HTML、CSS 和 JavaScript）构建跨平台桌面应用程序。通过弥合 Web 开发和桌面应用程序开发之间的差距，Electron.js 为开发人员创造了创建强大且功能丰富的桌面应用程序的新机会。

Electron.js 的架构

为了了解 Electron.js 的工作原理，让我们仔细看看它的架构。 Electron.js 结合了两个主要组件：Chromium 渲染引擎和 Node.js 运行时。

Chromium 渲染引擎 − Electron.js 使用与流行的网络浏览器 Google Chrome 相同的渲染引擎 — Chromium。这使得 Electron.js 应用程序能够以与 Web 浏览器相同的功能和性能来渲染和显示 Web 内容。
Node.js 运行时 − span>Electron.js 集成了 Node.js 运行时，提供对底层操作系统的访问和本机 API。这意味着开发人员可以充分利用 Node.js 的全部功能，并利用其广泛的模块和库生态系统来构建桌面应用程序。

Electron.js 利用多进程架构，其中每个 Electron.js 应用程序由两个主要进程组成：主进程和渲染器进程。

主要流程 − 主进程作为独立的 Node.js 进程运行，负责创建和管理浏览器窗口。它与渲染器进程通信，处理系统级事件，并可以访问本机 API。主进程控制应用程序的生命周期，并充当 Electron.js 应用程序的入口点。
渲染器进程 − 每个 Electron.js 应用程序可以有多个渲染器进程，每个进程对应一个单独的浏览器窗口。渲染器进程负责在每个浏览器窗口中渲染和显示 Web 内容。它们在单独的 JavaScript 上下文中运行，提供一定程度的隔离和安全性。每个渲染器进程都可以访问 Electron.js API，使其能够与主进程交互并执行操作 DOM、发出网络请求和处理用户交互等任务。

构建简单的 Electron.js 应用程序

现在我们已经很好地了解了 Electron.js 及其架构，接下来让我们深入使用 JavaScript 构建一个简单的 Electron.js 应用程序。我们将创建一个应用程序，该应用程序显示一个带有“Hello, Electron.js”消息的窗口。

要开始使用，请按照以下步骤操作 -

设置开发环境

确保您的计算机上安装了 Node.js，因为 Electron.js 是构建在 Node.js 之上的。您可以从官方网站（https://nodejs.org）下载并安装最新版本的Node.js。

创建一个新的 Electron.js 项目

创建一个新的项目文件夹并使用命令行导航到该文件夹。通过运行以下命令初始化一个新的 Node.js 项目 -

npm init -y

此命令使用默认设置初始化一个新的 Node.js 项目。

安装 Electron.js

通过执行以下命令安装 Electron.js 作为开发依赖项 -

npm install electron --save-dev

此命令会在您的项目中安装 Electron.js 包。

创建主入口点

在项目文件夹中创建一个名为index.js的新文件并添加以下代码 -

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

function createWindow() {
   // Create the browser window
   const mainWindow = new BrowserWindow({
      width: 800,
      height: 600,
      webPreferences: {
         nodeIntegration: true,
      },
   });

   // Load the index.html file
   mainWindow.loadFile('index.html');
}

// When Electron has finished initialising and is ready to create browser windows
app.whenReady().then(() => {
   createWindow();

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

// Quit the application when all windows are closed
app.on('window-all-closed', function () {
   if (process.platform !== 'darwin') app.quit();
});

说明

在此代码中，我们从 Electron.js 包中导入必要的模块，定义 createWindow 函数来创建浏览器窗口，并为窗口创建和应用程序退出设置必要的事件处理程序。

创建 HTML 文件

在项目文件夹中创建一个名为index.html的新文件并添加以下代码 -

示例

<!DOCTYPE html>
<html>
   <head>
      <meta charset="UTF-8">
      <title>Electron.js Application</title>
   </head>
   <body>
      <h1 id="Hello-Electron-js">Hello, Electron.js</h1>
   </body>
</html>

此 HTML 文件将显示在 Electron.js 应用程序的窗口中。

运行 Electron.js 应用程序

npx electron.

结论

Electron.js 彻底改变了开发人员使用 Web 技术构建桌面应用程序的方式。它提供了一个强大的框架，结合了 Chromium 渲染引擎和 Node.js 运行时，使开发人员能够使用 HTML、CSS 和 JavaScript 创建跨平台桌面应用程序。凭借其丰富的插件和工具生态系统，Electron.js 使开发人员能够构建功能丰富、高性能且具有视觉吸引力的桌面应用程序。

在本文中，我们探讨了 Electron.js 的基础知识，并学习了如何使用 JavaScript 构建简单的 Electron.js 应用程序。我们讨论了 Electron.js 的架构、它的主要进程以及主进程和渲染进程的作用。我们还逐步完成了设置开发环境和构建 Electron.js 应用程序的过程。

以上是使用 JavaScript 和 Electron.js 构建桌面 GUI 应用程序的详细内容。更多信息请关注PHP中文网其他相关文章！

声明

本文转载于：tutorialspoint。如有侵权，请联系admin@php.cn删除

在JavaScript中替换字符串字符Mar 11, 2025 am 12:07 AM

JavaScript字符串替换方法详解及常见问题解答本文将探讨两种在JavaScript中替换字符串字符的方法：在JavaScript代码内部替换和在网页HTML内部替换。在JavaScript代码内部替换字符串最直接的方法是使用replace()方法： str = str.replace("find","replace"); 该方法仅替换第一个匹配项。要替换所有匹配项，需使用正则表达式并添加全局标志g： str = str.replace(/fi

自定义Google搜索API设置教程Mar 04, 2025 am 01:06 AM

本教程向您展示了如何将自定义的Google搜索API集成到您的博客或网站中，提供了比标准WordPress主题搜索功能更精致的搜索体验。令人惊讶的是简单！您将能够将搜索限制为Y

构建您自己的Ajax Web应用程序Mar 09, 2025 am 12:11 AM

因此，在这里，您准备好了解所有称为Ajax的东西。但是，到底是什么？ AJAX一词是指用于创建动态，交互式Web内容的一系列宽松的技术。 Ajax一词，最初由Jesse J创造

示例颜色json文件Mar 03, 2025 am 12:35 AM

本文系列在2017年中期进行了最新信息和新示例。在此JSON示例中，我们将研究如何使用JSON格式将简单值存储在文件中。使用键值对符号，我们可以存储任何类型的

8令人惊叹的jQuery页面布局插件Mar 06, 2025 am 12:48 AM

利用轻松的网页布局：8个基本插件 jQuery大大简化了网页布局。本文重点介绍了简化该过程的八个功能强大的JQuery插件，对于手动网站创建特别有用

什么是这个＆＃x27;在JavaScript？Mar 04, 2025 am 01:15 AM

核心要点 JavaScript 中的 this 通常指代“拥有”该方法的对象，但具体取决于函数的调用方式。没有当前对象时，this 指代全局对象。在 Web 浏览器中，它由 window 表示。调用函数时，this 保持全局对象；但调用对象构造函数或其任何方法时，this 指代对象的实例。可以使用 call()、apply() 和 bind() 等方法更改 this 的上下文。这些方法使用给定的 this 值和参数调用函数。 JavaScript 是一门优秀的编程语言。几年前，这句话可