使用 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删除

Python vs. JavaScript：开发环境和工具Apr 26, 2025 am 12:09 AM

Python和JavaScript在开发环境上的选择都很重要。1)Python的开发环境包括PyCharm、JupyterNotebook和Anaconda，适合数据科学和快速原型开发。2)JavaScript的开发环境包括Node.js、VSCode和Webpack，适用于前端和后端开发。根据项目需求选择合适的工具可以提高开发效率和项目成功率。

JavaScript是用C编写的吗？检查证据Apr 25, 2025 am 12:15 AM

是的，JavaScript的引擎核心是用C语言编写的。1）C语言提供了高效性能和底层控制，适合JavaScript引擎的开发。2）以V8引擎为例，其核心用C 编写，结合了C的效率和面向对象特性。3）JavaScript引擎的工作原理包括解析、编译和执行，C语言在这些过程中发挥关键作用。

JavaScript的角色：使网络交互和动态Apr 24, 2025 am 12:12 AM

JavaScript是现代网站的核心，因为它增强了网页的交互性和动态性。1)它允许在不刷新页面的情况下改变内容，2)通过DOMAPI操作网页，3)支持复杂的交互效果如动画和拖放，4)优化性能和最佳实践提高用户体验。

C和JavaScript：连接解释Apr 23, 2025 am 12:07 AM

C 和JavaScript通过WebAssembly实现互操作性。1）C 代码编译成WebAssembly模块，引入到JavaScript环境中，增强计算能力。2）在游戏开发中，C 处理物理引擎和图形渲染，JavaScript负责游戏逻辑和用户界面。

从网站到应用程序：JavaScript的不同应用Apr 22, 2025 am 12:02 AM

JavaScript在网站、移动应用、桌面应用和服务器端编程中均有广泛应用。1)在网站开发中，JavaScript与HTML、CSS一起操作DOM，实现动态效果，并支持如jQuery、React等框架。2)通过ReactNative和Ionic，JavaScript用于开发跨平台移动应用。3)Electron框架使JavaScript能构建桌面应用。4)Node.js让JavaScript在服务器端运行，支持高并发请求。

Python vs. JavaScript：比较用例和应用程序Apr 21, 2025 am 12:01 AM

Python更适合数据科学和自动化，JavaScript更适合前端和全栈开发。1.Python在数据科学和机器学习中表现出色，使用NumPy、Pandas等库进行数据处理和建模。2.Python在自动化和脚本编写方面简洁高效。3.JavaScript在前端开发中不可或缺，用于构建动态网页和单页面应用。4.JavaScript通过Node.js在后端开发中发挥作用，支持全栈开发。