Erstellen Sie eine Desktop -Anwendung mit Elektron und Winkel

bauen plattformübergreifende Desktop-Anwendungen: Die perfekte Kombination aus Elektronen und Winkel

Dieses Tutorial zeigt, wie Sie plattformübergreifende Desktop-Anwendungen mit Elektronen und Winkel erstellen. Electron.js ist eine beliebte Plattform zum Erstellen von Desktop -Anwendungen für Windows, Linux und MacOS mit JavaScript, HTML und CSS. Es nutzt leistungsstarke Plattformen wie Google Chromium und Node.js und bietet einen eigenen API -Satz für die Interaktion mit dem Betriebssystem.

Wir werden lernen, wie Sie die Angular -CLI installieren, ein neues Winkelprojekt erstellen und die neueste Elektronenversion von NPM als Entwicklungsabhängigkeit installieren. Das Tutorial umfasst auch das Erstellen eines GUI -Fensters und das Laden der Index.html -Datei, das Einstellen der Main.js -Datei als Haupteintragspunkt sowie das Hinzufügen eines Skripts, um die Elektronenanwendung nach dem Erstellen des Angular -Projekts zu starten.

Zusätzlich lernen wir, wie Sie die Elektronen -API mit IPC (Interprozesskommunikation) von Angular aufrufen, die die Kommunikation zwischen verschiedenen Prozessen ermöglicht. Wir werden demonstrieren, wie Sie die BrowserWindow -API aus einer Winkelanwendung aufrufen und wie Sie ein submodales Fenster erstellen, in dem die URL geladen wird, und es bei der Fertigstellung anzeigen.

Elektronenvorteile

Electron verwendet leistungsstarke Plattformen wie Google Chromium und Node.js und bietet gleichzeitig reichhaltige APIs, um mit dem zugrunde liegenden Betriebssystem zu interagieren. Es bietet einen nativen Container, um Webanwendungen zu verkapulieren, damit sie wie Desktop -Anwendungen aussehen und sich anfühlen und Zugriff auf Betriebssystemfunktionen (ähnlich wie Cordova für mobile Anwendungen). Dies bedeutet, dass wir jede JavaScript -Bibliothek oder jede JavaScript -Bibliothek oder jedes Framework verwenden können, um unsere Anwendungen zu erstellen. In diesem Tutorial werden wir Angular verwenden.

Vorsichtsmaßnahmen

Dieses Tutorial muss die folgenden Voraussetzungen erfüllen:

• Mit TypeScript und Angular vertraut.
• node.js und npm auf der Entwicklungsmaschine installieren.

Installation von Winkelcli

Installieren Sie zunächst die Angular CLI, das offizielle Werkzeug zum Erstellen und Verwenden von Winkelprojekten. Öffnen Sie ein neues Terminal und führen Sie den folgenden Befehl aus:

npm install -g @angular/cli

Wir werden die Winkel -CLI weltweit installieren. Wenn der Befehl aufgrund eines EACCESS -Fehlers fehlschlägt, fügen Sie Sudo vor dem Befehl unter Linux oder macOS hinzu oder führen Sie eine Eingabeaufforderung als Administrator in Windows aus.

Wenn die CLI erfolgreich installiert ist, navigieren Sie zu Ihrem Arbeitsverzeichnis und erstellen Sie ein neues Winkelprojekt mit dem folgenden Befehl:

cd ~
ng new electron-angular-demo

Warten auf die Erzeugung der Projektdatei und die Abhängigkeiten von NPM. Navigieren Sie als Nächst

npm install --save-dev electron@latest

Nach diesem Schreiben wird dieser Befehl Elektron v4.1.4 installiert.

erstellen main.js Datei

Erstellen Sie als nächstes eine Main.js -Datei und fügen Sie den folgenden Code hinzu:

npm install -g @angular/cli

Dieser Code erstellt lediglich ein GUI -Fenster und lädt die Index.html -Datei (die nach Erstellen der Angular -Anwendung im Ordner Dist verfügbar sein sollte). Dieser Beispielcode ist aus dem offiziellen Einführungs -Repository angepasst.

Konfigurationspaket.json

Öffnen Sie als Nächst

cd ~
ng new electron-angular-demo

Fügen Sie ein Startskript hinzu

Als nächstes müssen wir ein Skript hinzufügen, um die Elektronenanwendung nach dem Erstellen des Winkelprojekts problemlos zu starten:

npm install --save-dev electron@latest

Wir haben den Start: Electron Skript hinzugefügt, das NG Build--Base-href ./ && Electron ausführt:

Der NG Build--Base-href ./ Teil des Befehls

erstellt die Winkelanwendung und setzt Basis href auf ./.
• Der Elektronenabschnitt
.

Führen Sie jetzt in Ihrem Terminal den folgenden Befehl aus:

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

let mainWindow

function createWindow () {
  mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true
    }
  })

  mainWindow.loadURL(
    url.format({
      pathname: path.join(__dirname, `/dist/index.html`),
      protocol: "file:",
      slashes: true
    })
  );
  // 打开开发者工具
  mainWindow.webContents.openDevTools()

  mainWindow.on('closed', function () {
    mainWindow = null
  })
}

app.on('ready', createWindow)

app.on('window-all-closed', function () {
  if (process.platform !== 'darwin') app.quit()
})

app.on('activate', function () {
  if (mainWindow === null) createWindow()
})

öffnet ein Elektronen -GUI -Fenster, aber es wird leer sein. In der Konsole sehen Sie den Fehler "Lokale Ressourcen: /electron-angular-demo/dist/index.html".

Elektron kann die Datei nicht aus dem DIST -Ordner laden, da sie überhaupt nicht existiert. Wenn Sie sich den Ordner Ihres Projekts ansehen, werden Sie feststellen, dass die Winkel-CLI Ihre Anwendung im Ordner Dist/Electron-Angular-Demo, nicht im Ordner DIST erstellt.

In unserer Main.js -Datei sagen wir Electron, dass er die Datei idex.html im Ordner Dist ohne Unterordner finden soll:

{
  "name": "electron-angular-demo",
  "version": "0.0.0",
  "main": "main.js",
  // [...]
}

bezieht sich auf den aktuellen Ordner, in dem wir Elektron ausführen. __dirname

Wir verwenden die Methode path.join (), um den Pfad des aktuellen Ordners mit dem Pfad /dist/index.html zu verbinden.

Sie können den zweiten Teil des Pfades auf /dist/electron-angular-demo/index.html ändern oder noch besser die Winkelkonfiguration in die Ausgabe von Dateien im DIST-Ordner ohne Verwendung von Unterordnern ändern.

Öffnen Sie die Angular.json-Datei, finden Sie die Projekte → Architekt → Build → Optionen → Ausgangspathetast

Gehen Sie zurück zu Ihrem Terminal und führen Sie den folgenden Befehl erneut aus:

{
  "name": "electron-angular-demo",
  "version": "0.0.0",
  "main": "main.js",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e",
    "start:electron": "ng build --base-href ./ && electron ."
  },
  // [...]
}

Das Skript ruft den Befehl ng Build auf, um die Winkelanwendung im DIST -Ordner zu erstellen, und das Elektron aus dem aktuellen Ordner aufruft, um das Elektronenfenster zu starten, in dem die Winkelanwendung geladen wird.

npm run start:electron

Dies ist ein Screenshot unserer Desktop -Anwendung, die angular ausgeführt wird:

(Folgendes stimmt mit dem Originaltext überein, aber die Absätze und Titel wurden angepasst, um sie leichter zu lesen und zu verstehen.)

Aufrufen der Elektronen -API von Angular

Lassen Sie uns nun sehen, wie Sie die Elektronen -API von Angular anrufen.

Die Elektronenanwendung verwendet den Hauptprozess, der node.js ausgeführt wird, und den Renderer -Prozess, der den Chrombrowser ausführt. Wir können nicht auf alle Elektronen -APIs direkt aus der Winkelanwendung zugreifen.

Wir müssen die IPC- oder Inter-Process-Kommunikation verwenden. Dies ist ein Mechanismus des Betriebssystems, um die Kommunikation zwischen verschiedenen Prozessen zu ermöglichen.

Nicht alle Elektronen -APIs müssen aus dem Hauptprozess zugegriffen werden. Auf einige APIs kann aus dem Renderer -Prozess zugegriffen werden, und auf auf einige APIs können aus dem Hauptprozess und dem Renderer -Prozess zugegriffen werden.

BrowserWindow (zum Erstellen und Steuerungsbrowserfenster verwendet) ist nur im Hauptprozess verfügbar. Desktopcapturer -API (zum Aufnehmen von Audio und Videos vom Desktop mit Navigator.Mediadevices.getUlermedia API) ist nur im Renderer -Prozess verfügbar. In der Zwischenboard -API (zum Ausführen von Kopier- und Einfügen von Vorgängen in der Systemklemme) ist sowohl im Hauptprozess als auch im Renderer -Prozess erhältlich.

Sie können die vollständige Liste der APIs aus der offiziellen Dokumentation anzeigen.

Schauen wir uns ein Beispiel für das Aufrufen der BrowserWindow -API von einer Winkelanwendung an (nur im Hauptprozess verfügbar).

Öffnen Sie die Main.js -Datei und importieren Sie IPCMain:

npm install -g @angular/cli

Definieren Sie als nächstes die Funktion openModal ():

cd ~
ng new electron-angular-demo

Diese Methode erstellt ein submodales Fenster, in dem die https://www.php.cn/link/aeda4e5a3a22f1e1b0cfe7a8191fb21a url geladen und angezeigt wird, wenn es fertig ist.

Als nächstes hören Sie auf OpenModal -Nachricht, die aus dem Renderer -Prozess gesendet werden, und rufen Sie die Funktion openModal () an, wenn die Nachricht empfangen wird:

npm install --save-dev electron@latest

Öffnen Sie nun die Datei SRC/App/App.comPonent.ts und fügen Sie den folgenden Import hinzu:

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

let mainWindow

function createWindow () {
  mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true
    }
  })

  mainWindow.loadURL(
    url.format({
      pathname: path.join(__dirname, `/dist/index.html`),
      protocol: "file:",
      slashes: true
    })
  );
  // 打开开发者工具
  mainWindow.webContents.openDevTools()

  mainWindow.on('closed', function () {
    mainWindow = null
  })
}

app.on('ready', createWindow)

app.on('window-all-closed', function () {
  if (process.platform !== 'darwin') app.quit()
})

app.on('activate', function () {
  if (mainWindow === null) createWindow()
})

Definieren Sie als Nächst

Die Methode

{
  "name": "electron-angular-demo",
  "version": "0.0.0",
  "main": "main.js",
  // [...]
}

fordert () wird von Elektronen zur Laufzeit in den Renderer -Prozess injiziert, sodass sie nur beim Ausführen einer Webanwendung in Elektronen verfügbar ist.

Fügen Sie schließlich die folgende OpenModal () -Methode hinzu:

{
  "name": "electron-angular-demo",
  "version": "0.0.0",
  "main": "main.js",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e",
    "start:electron": "ng build --base-href ./ && electron ."
  },
  // [...]
}

Wir verwenden die Send () -Methode von ipcrenderer, um eine OpenModal -Nachricht an den Hauptprozess zu senden.

Öffnen Sie die Datei SRC/App/App.comPonent.html und fügen Sie eine Schaltfläche hinzu und binden Sie sie an die OpenModal () -Methode:

npm run start:electron

Führen Sie jetzt Ihre Desktop -Anwendung mit dem folgenden Befehl aus:

mainWindow.loadURL(
  url.format({
    pathname: path.join(__dirname, `/dist/index.html`),
    protocol: "file:",
    slashes: true
  })
);

Dies ist ein Screenshot des Hauptfensters mit Schaltflächen:

Wenn Sie auf die Schaltfläche "Modal öffnen" klicken, sollte ein Modal -Fenster mit der SitePoint -Website geöffnet:

Sie können den Quellcode für diese Demo aus diesem GitHub -Repository finden.

Schlussfolgerung

In diesem Tutorial haben wir uns untersucht, wie eine Webanwendung mit Angular als Desktop -Anwendung mit Elektronen ausführt. Wir hoffen, Sie haben gelernt, wie einfach es ist, Desktop -Anwendungen mit dem Web Development Kit zu erstellen!

(Der folgende Inhalt ist der ursprüngliche FAQs -Teil und ist leicht eingestellt, um es mehr mit den chinesischen Expressionsgewohnheiten in Einklang zu bringen.)

FAQs (FAQs)

Wie debugge ich Elektronen und Winkelanwendungen?

Debugging ist ein wichtiger Bestandteil des Entwicklungsprozesses. Für Elektronen- und Winkelanwendungen können Sie Chrome Developer Tools verwenden. Um das Entwickler -Tool zu öffnen, können Sie die Verknüpfungsschlüssel -Strg -Verschiebung I verwenden oder eine Codezeile zur Main.js -Datei hinzufügen: mainWindow.webContents.openDevTools(). Dadurch wird die Entwickler -Tools geöffnet, wenn die Anwendung startet. Sie können dann Elemente überprüfen, Konsolenprotokolle anzeigen und Code wie in Ihrer Webanwendung tun.

Wie packen Sie Elektronen- und Winkelanwendungen für die Verteilung?

Elektronen- und Winkelanwendungen können für die Verteilung mit Elektronenpaket oder Elektronenbauer verpackt werden. Diese Tools helfen Ihnen beim Verpacken Ihrer Anwendungen in ausführbare Dateien für verschiedene Betriebssysteme. Sie können den Namen, die Beschreibung, die Version und mehr der Anwendung anpassen. Sie müssen diese Pakete als DevDependencies installieren und dann ein Skript in die Datei package.json hinzufügen, um den Befehl Paket auszuführen.

Können Sie Winkelmaterial im Elektronen verwenden?

Ja. Winkelmaterial ist eine UI -Komponentenbibliothek, die das Materialdesign in Winkel implementiert. Es bietet eine Vielzahl von vorgefertigten Komponenten, mit denen Sie benutzerfreundliche und reaktionsschnelle Anwendungen erstellen können. Um Winkelmaterial zu verwenden, müssen Sie es mit NPM oder Garn installieren und dann die erforderlichen Module in die Anwendung importieren.

Wie kann ich Dateisystemvorgänge in Elektronen und Angular behandeln?

Electron bietet ein integriertes Modul mit dem Namen FS (Dateisystem), mit dem Sie Dateisystemvorgänge wie Lesen und Schreiben von Dateien verarbeiten können. Sie können es im Hauptprozess der Elektronenanwendung verwenden. Wenn Sie es jedoch in einem Renderer-Prozess (Angular) verwenden möchten, müssen Sie Electrons IPC (Inter-Process Communication) verwenden, um zwischen dem Hauptprozess und dem Renderer-Prozess zu kommunizieren.

Wie verwendet ich das Modul node.js in Elektronen und Winkelanwendungen?

Mit

Electron können Sie das Modul node.js in Ihrer Anwendung verwenden. Sie können sie direkt im Hauptprozess verwenden. Wenn Sie sie jedoch im Renderer -Prozess (angular) verwenden möchten, müssen Sie die NodeIntetegration in Ihrer Elektronenkonfiguration aktivieren. Beachten Sie, dass die Aktivierung der NodeIntegration ein Sicherheitsrisiko darstellt, wenn Ihre Anwendung Remote -Inhalte lädt. Daher wird empfohlen, sicherere Optionen wie Kontextisolation und Vorspannungsskripte zu verwenden.

Wie aktualisiert ich Elektronen- und Winkelanwendungen?

Elektronen und Winkelanwendungen können mit dem Autoupdater -Modul von Electron aktualisiert werden. Mit diesem Modul können Sie automatisch Updates im Hintergrund herunterladen und installieren. Sie können auch eine Benutzeroberfläche zur Verfügung stellen, damit Benutzer manuell nach Updates überprüfen können.

Können Sie Winkel -CLI mit Elektron verwenden?

Ja. Angular CLI ist Angulars Befehlszeilenschnittstelle, mit der Sie Winkelanwendungen erstellen, entwickeln und aufrechterhalten. Sie können es verwenden, um Komponenten, Dienste, Module und mehr zu generieren. Sie können es auch verwenden, um Winkelanwendungen vor dem Laufen mit Elektronen zu erstellen.

Wie schützt ich die Sicherheit von Elektronen- und Winkelanwendungen?

Schutz der Sicherheit von Elektronen- und Winkelanwendungen ist für den Schutz der Benutzerdaten von entscheidender Bedeutung. Electron bietet einige Sicherheitsvorschläge, z. B. die Aktivierung der Kontextisolation, die Deaktivierung der Knotenintegration, den Sandbox -Modus und mehr. Sie sollten auch die Best Practices der Angular Security befolgen, z. B. die Reinigung der Benutzereingaben, mithilfe des HTTPS -Protokolls und mehr.

Wie testet ich Elektronen und Winkelanwendungen?

Sie können Test -Frameworks wie Jasmin und Karma (für Angular) und Spektron (für Elektronen) verwenden, um Elektronen- und Winkelanwendungen zu testen. Mit diesen Frameworks können Sie Unit-Tests und End-to-End-Tests schreiben, um sicherzustellen, dass Ihre Anwendung wie erwartet funktioniert.

Kann Elektron mit anderen Frameworks oder Bibliotheken verwendet werden?

Ja. In Elektronen geht es nicht um Frameworks, was bedeutet, dass Sie es mit einem JavaScript -Framework oder einer Bibliothek verwenden können. Zusätzlich zu Angular können Sie es auch mit React, Vue.js, Sufle und mehr verwenden. Sie können es auch mit nativem JavaScript verwenden, wenn Sie es vorziehen.

Das obige ist der detaillierte Inhalt vonErstellen Sie eine Desktop -Anwendung mit Elektron und Winkel. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!