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

王林转载: 2023-09-14 09:57:03 961浏览

在当今的技术时代，桌面应用程序在我们的日常生活中具有巨大的意义，可以提供增强的用户体验并充分利用本地计算机的功能。传统上，开发桌面应用程序需要特定于平台的编程语言和框架方面的专业知识，这对希望涉足桌面开发的 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>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中文网其它相关文章！

PHP课程 HTML视频教程 CSS视频 JS视频教程 Vue视频教程

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

上一条：如何在 HTML 中调用 JavaScript 函数？下一条：使用 Mocha.js 进行自动化 Javascript 测试