Erstellen Sie Desktop-GUI-Anwendungen mit JavaScript und Electron.js

Im heutigen technologischen Zeitalter nehmen Desktop-Anwendungen in unserem täglichen Leben eine enorme Bedeutung ein, um ein verbessertes Benutzererlebnis zu bieten und die Funktionen Ihres lokalen Computers voll auszunutzen. Traditionell erforderte die Entwicklung von Desktop-Anwendungen Kenntnisse in plattformspezifischen Programmiersprachen und Frameworks, was für Webentwickler, die in die Desktop-Entwicklung einsteigen wollten, eine Herausforderung darstellte. Electron.js löst diese Herausforderung jedoch effektiv.

Electron.js, früher bekannt als Atom Shell, ist ein von GitHub abgeleitetes Open-Source-Framework. Es ermöglicht Entwicklern, plattformübergreifende Desktop-Anwendungen mit vertrauten Webtechnologien wie HTML, CSS und JavaScript zu erstellen. Durch die Überbrückung der Lücke zwischen Webentwicklung und Desktop-Anwendungsentwicklung schafft Electron.js neue Möglichkeiten für Entwickler, leistungsstarke und funktionsreiche Desktop-Anwendungen zu erstellen.

Electron.js-Architektur

Um zu verstehen, wie Electron.js funktioniert, werfen wir einen genaueren Blick auf seine Architektur. Electron.js kombiniert zwei Hauptkomponenten: die Chromium-Rendering-Engine und die Node.js-Laufzeit.

• Chromium Rendering Engine−Electron.js verwendet dieselbe Rendering-Engine – Chromium – wie der beliebte Webbrowser Google Chrome. Dadurch können Electron.js-Anwendungen Webinhalte mit der gleichen Funktionalität und Leistung wie ein Webbrowser rendern und anzeigen.

• Node.js-Laufzeit− span>Electron.js lässt sich in die Node.js-Laufzeit integrieren und bietet Zugriff auf das zugrunde liegende Betriebssystem und native APIs. Dies bedeutet, dass Entwickler die volle Leistungsfähigkeit von Node.js nutzen und sein umfangreiches Ökosystem an Modulen und Bibliotheken nutzen können, um Desktop-Anwendungen zu erstellen.

Electron.js nutzt eine Multiprozessarchitektur, bei der jede Electron.js-Anwendung aus zwei Hauptprozessen besteht: dem Hauptprozess und dem Renderer-Prozess.

• Hauptprozess− Der Hauptprozess läuft als unabhängiger Node.js-Prozess und ist für die Erstellung und Verwaltung von Browserfenstern verantwortlich. Es kommuniziert mit dem Renderer-Prozess, verarbeitet Ereignisse auf Systemebene und hat Zugriff auf native APIs. Der Hauptprozess steuert den Lebenszyklus der Anwendung und dient als Einstiegspunkt zur Electron.js-Anwendung.

• Renderer-Prozess − Jede Electron.js-Anwendung kann mehrere Renderer-Prozesse haben, wobei jeder Prozess einem separaten Browserfenster entspricht. Der Renderer-Prozess ist für das Rendern und Anzeigen von Webinhalten in jedem Browserfenster verantwortlich. Sie werden in einem separaten JavaScript-Kontext ausgeführt und bieten so ein gewisses Maß an Isolation und Sicherheit. Jeder Renderer-Prozess hat Zugriff auf die Electron.js-API und kann so mit dem Hauptprozess interagieren und Aufgaben wie die Manipulation des DOM, das Senden von Netzwerkanfragen und die Abwicklung der Benutzerinteraktion ausführen.

Erstellen Sie einfache Electron.js-Anwendungen

Da wir nun ein gutes Verständnis von Electron.js und seiner Architektur haben, wollen wir uns mit der Erstellung einer einfachen Electron.js-Anwendung mit JavaScript befassen. Wir erstellen eine Anwendung, die ein Fenster mit der Meldung „Hallo, Electron.js“ anzeigt.

Um zu beginnen, befolgen Sie diese Schritte -

Entwicklungsumgebung einrichten

Stellen Sie sicher, dass Node.js auf Ihrem Computer installiert ist, da Electron.js auf Node.js aufbaut. Sie können die neueste Version von Node.js von der offiziellen Website (https://nodejs.org) herunterladen und installieren.

Erstellen Sie ein neues Electron.js-Projekt

Erstellen Sie einen neuen Projektordner und navigieren Sie über die Befehlszeile zu dem Ordner. Initialisieren Sie ein neues Node.js-Projekt, indem Sie den folgenden Befehl ausführen -

npm init -y

Dieser Befehl initialisiert ein neues Node.js-Projekt mit Standardeinstellungen.

Installieren Sie Electron.js

Installieren Sie Electron.js als Entwicklungsabhängigkeit, indem Sie den folgenden Befehl ausführen -

npm install electron --save-dev

Dieser Befehl installiert das Electron.js-Paket in Ihrem Projekt.

Erstellen Sie den Haupteinstiegspunkt

Erstellen Sie eine neue Datei mit dem Namen index.js im Projektordner und fügen Sie den folgenden Code hinzu -

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();
});

Anleitung

In diesem Code importieren wir die erforderlichen Module aus dem Electron.js-Paket, definieren die Funktion „createWindow“ zum Erstellen des Browserfensters und richten die erforderlichen Ereignishandler für die Fenstererstellung und das Beenden der Anwendung ein.

HTML-Datei erstellen

Erstellen Sie eine neue Datei namens index.html im Projektordner und fügen Sie den folgenden Code hinzu -

示例

<!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 应用程序的过程。

Das obige ist der detaillierte Inhalt vonErstellen Sie Desktop-GUI-Anwendungen mit JavaScript und Electron.js. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!