suchen
HeimWeb-Frontendjs-TutorialErstellen einer plattformübergreifenden Desktop-App mit NW.js

nw.js: Ein Framework zum Erstellen native Anwendungen mithilfe von Webtechnologie

Building a Cross-platform Desktop App with NW.js

nw.js ist ein leistungsstarkes Framework, mit dem Entwickler native Anwendungen mithilfe von Webtechnologien wie HTML, JavaScript und CSS erstellen können, um Hybridanwendungen zu generieren, die erhebliche Vorteile gegenüber normalen Webanwendungen haben.

Im Vergleich zu einem anderen Hybridanwendungs-Framework hat Electron, NW.js die folgenden Vorteile: Unterstützung für Chrome.* APIs, Chrome-Anwendungen, NaCl- und PNACL-Anwendungen, V8-Snapshot-Quellcodeschutz, eingebauter PDF-Viewer, Druckvorschau, Druckvorschau, Druckvorschau, Druckvorschau, Druckvorschau, Print-Vorschau, und integrieren Sie Node.js in Webarbeiter.

Der Prozess des Erstellens einer Hybridanwendung mithilfe von NW.js umfasst das Einrichten der Projektstruktur, das Erstellen von Manifestdateien und das Erstellen einer Hauptansicht. Sie können sich auf die Beispielanwendung auf GitHub beziehen.

nw.js können mit nw bzw. nw-builder Paketen entwickelt und hergestellt und installiert werden. Der Verpackungs- und Verteilungsprozess kann vereinfacht werden, indem NPM -Skripte zur package.json -Datei hinzugefügt werden.

Tests und Debuggen von NW.JS -Anwendungen können manuell durchgeführt werden, da NW.js auf Chrom basiert. Automatisierte Unit-Tests können mit dem NW.JS-Launcher-Plug-In von Karma (z. B. Karma-Nodewebkit-Launcher) implementiert werden.

Dieser Artikel wurde von Tim Severien und Joan Yin überprüft. Vielen Dank an alle Peer -Rezensenten von SitePoint für die perfekte Erstellung von SitePoint -Inhalten!

Building a Cross-platform Desktop App with NW.js

nw.js ist ein Framework zum Erstellen native Anwendungen mithilfe von Webtechnologien wie HTML, JavaScript und CSS. Einfach ausgedrückt, verwenden Sie normale Prozesse, um Webanwendungen zu entwickeln. Am Ende des Prozesses führen Sie einen Generator aus, der alles in eine native Anwendung kompiliert, und die Anwendung zeigt Ihre Webanwendung wie ein Browser an. Diese Anwendungen werden als "Hybridanwendungen" bezeichnet.

Hybridanwendungen sind nicht nur, weil sie in Sprachen geschrieben sind, mit denen Sie bereits vertraut sind (HTML, JavaScript und CSS), sondern auch, weil sie die folgenden wichtigen Vorteile gegenüber regulären Webanwendungen haben:

  • Kontrolle der Browser- und Browserversionen (Sie wissen, welcher Browser Ihre Anwendung aufgerufen wird). Die NW.JS -Hybridanwendung wird unter Verwendung von Chrom (einem Open -Source -Browser, der hinter Google Chrome läuft) angezeigt wird. Daher sollten Anwendungen, die in Chrome ausgeführt werden, auch mit NW.Js.
  • Ansichtsfensterkontrolle. Beispielsweise können Sie ein festes oder minimales/maximales Ansichtsfenster definieren.
  • Aufgrund lokaler Dateien gibt es keine gleichorientierte Richtlinienbeschränkung. Wenn Sie eine lokale Datei aus dem Dateisystem öffnen, blockiert der Browser XMLHTTPrequest -Anforderungen für Dateien, die sich nicht im selben Verzeichnis befinden. Dieses Verhalten kann in NW.JS -Anwendungen deaktiviert werden.

Sie bieten auch benutzerdefinierte APIs, die die folgenden Vorteile bringen:

  • node.js Integration
  • Clipboard Access
  • Zugriff auf das Dateisystem
  • Hardwarezugriff (z. B. eine Druckerliste abrufen)
  • Palettensymbol
  • Dialogfeld Benutzerdefinierte Dateiauswahl
  • Shell -Integration (Datei oder URL im Standarddateibrowser oder Browser öffnen)
  • Optionen zum Anpassen des gesamten Fensters (Schließen von Schaltflächen, Menüleisten) und Kontextmenüs
  • Die Fähigkeit, Zoomlevel zu setzen und zu erhalten.

klingt gut? Dann fangen wir an. In diesem Artikel erfahren wir tatsächlich etwas über NW.js und lernen, wie man Hybridanwendungen erstellt. Sie können Beispielanwendungen finden, die mit den Anweisungen in diesem Artikel auf GitHub erstellt wurden.

Vorteile von NW.js im Vergleich zu Elektronen

Zunächst einmal: NW.js ist nicht das einzige Rahmen für Hybridanwendungen. Ein anderer Wettbewerber heißt Electron. Es wurde 2013 ins Leben gerufen, zwei Jahre hinter NW.JS, aber es wurde schnell bekannt, weil es von Github stammte. Jetzt interessieren Sie sich vielleicht für den Unterschied zwischen ihnen. Hier sind die Vorteile von NW.js im Vergleich zu Elektronen:
  • Chrome unterstützen.* APIs. Diese APIs können verwendet werden, um mit dem Browser zu interagieren. (Weitere verwandte Informationen finden Sie in der NW.JS -Dokumentation.)
  • Unterstützen Sie Chrome -Apps. Chrome -Apps sind verpackte Anwendungen in der Websprache. (Weitere Informationen finden Sie in der Chrome Developer -Dokumentation.) Diese Anwendungen unterscheiden sich von NW.js, da sie keine Node.js -Integration haben und mit dem Chrome -Webladen veröffentlicht werden. (Chromium wird seine Unterstützung bis August 2018 stornieren (siehe ihren Blog -Beitrag). Laut diesem Beitrag wird NW.js jedoch weiterhin Chrome -Apps unterstützen.)
  • unterstützt NaCl (native Client) und PNACL (tragbare native Client) Anwendungen. Sie konzentrieren sich auf die Leistung, so dass sie hauptsächlich in C und C geschrieben sind (Siehe dieses Tutorial, wie Sie sie in NW.JS. verwenden können.)
  • hat V8 Snapshot -Quellcodeschutz zum Schutz des Quellcodes der Anwendung. Mit dem NWJC -Tool wird Ihr Code in nativen Code zusammengestellt. (Weitere Informationen finden Sie in diesem Artikel.)
  • hat einen integrierten PDF-Viewer.
  • Bitte drucken Sie Vorschau.
  • unterstützt die Integration von Node.js in Webarbeiter. Sie werden verwendet, um Multithread -Anwendungen zu schreiben.

Elektron hat jedoch auch einige Vorteile, die erwähnenswert sind:
  • integriertes automatisches Update-Programm (Sie können Fragen zum automatischen Update-Programm NW.JS befolgen).
  • Senden Sie automatisch Absturzberichte an Remote -Server. NW.js schreibt nur in lokale Dateien und kann dann manuell eingereicht werden.

Es gibt einen weiteren grundlegenden Unterschied. NW.JS -Anwendungen geben ihren Einstiegspunkt als HTML -Dateien an. Diese HTML -Datei wird direkt in der GUI geöffnet.

Andererseits gibt die Elektronenanwendung eine JavaScript -Datei als Einstiegspunkt an. Diese JavaScript -Datei wird in einem separaten Hauptprozess geöffnet, und die HTML -Datei kann dann in der GUI geöffnet werden. Dies bedeutet, dass Sie theoretisch Elektronenanwendungen ohne GUI ausführen können. Das Schließen der GUI schließt den Hauptprozess nicht.

Während Electron die Tür für Desktop-Anwendungen öffnet, die in JavaScript geschrieben wurden, und ohne GUI sind NW.JS-Anwendungen möglicherweise einfacher zu errichten, wenn Sie nur HTML-basierte Anwendungen anzeigen möchten.

Hinweis: Wenn Sie die Vorteile von Elektronen wirklich mögen, lesen Sie den aktuellen Artikel von SitePoint zum Erstellen von Desktop -Anwendungen mit Elektronen.

Erstellen Sie eine Demo -Anwendung

Lassen Sie uns Anwendungen erstellen, die später in native Anwendungen zusammengestellt werden. Da es viele Möglichkeiten gibt, eine Webanwendung einzurichten - unter Verwendung verschiedener JS -Sprachen (TypeScript, Coffeescript usw.), Modullader (RequiredJs, Webpack, SystemJs usw.), Frameworks (AngularJs, React, Vue.js, usw.) und Präprozessoren (SCSS, weniger, Haml usw.) - und jeder hat seine eigenen Vorlieben, wir verwenden nur grundlegende HTML-, CSS- und JS -Technologien (ES6 Standard).

Es gibt keine NW.JS -Boilerplate (Start -Projekt) für Einstellungen. All dies ist für einen bestimmten Framework, einen Modullader oder ein Präprozessor erstellt. Wir werden also eine einfache Anwendung von NW.JS von Grund auf neu implementieren. Es ist leicht zu verstehen und Sie können es später leicht an Ihre Anforderungen anpassen oder auf die Kesselplatte wechseln.

Projektstruktur

Erstens müssen wir unsere Projektstruktur und Datei erstellen:

<code>nw.js-example/
├── src/
│   ├── app/
│   │  └── main.js
│   ├── assets/
│   │  └── icon.png
│   ├── styles/
│   │  └── common.css
│   ├── views/
│   │  └── main.html
│   └── package.json
└── package.json</code>

Anweisungen:

  • src/enthält die Quelldatei der Anwendung.
  • src/ app/ enthält unsere JavaScript -Dateien.
  • src/ assets/ enthält Bilder. In unserem Beispiel sollte nur das Datei -Symbol.png (das als Fenstersymbol angezeigt wird) quadratisch sein.
  • src/ styles/ enthält normalerweise scss oder weniger Dateien - in unserem Beispiel handelt es sich nur um eine einfache CSS -Datei.
  • src/ views/ enthält HTML -Ansichtsdateien.
  • src/package.json ist eine Manifestdatei für NW.JS -Anwendungen (siehe Manifestformat). Wir geben hier auch die Abhängigkeiten der Anwendung an.
  • package.json ist eine NPM -Paketdatei, die wir für den Build -Workflow durchführen und Abhängigkeiten angeben müssen, die in der tatsächlichen NW.JS -Anwendung (z. B. Abhängigkeiten bauen) nicht benötigt werden.

liste erstellen

Jetzt, da wir die Projektstruktur und die Dateien erstellt haben, können wir mit der nw.js Manifest -Datei src/package.json beginnen. Gemäß der Dokumentation benötigt die Datei nur zwei Eigenschaften, den Namen (Anwendungsname) und den Hauptverkehr (Pfad zur HTML -Datei, die als Einstiegspunkt verwendet wird). Wir haben jedoch weitere Informationen hinzugefügt, z. B. den Pfad des Fenstersymbols sowie die Mindestbreite und Höhe, um sicherzustellen, dass der Benutzer nichts Unerwartetes sieht:

<code>{
  "name":"nw.js-example",
  "main":"views/main.html",
  "window":{
    "min_width":400,
    "min_height":400,
    "icon":"assets/icon.png"
  }
}</code>
Das ist es! Die Anwendung öffnet später SRC/Views/main.html beim Start, da der Hauptpfad relativ zur Manifestdatei ist.

Home View

erstellen

Zu diesem Zeitpunkt können wir eine To-Do-Anwendung schreiben. Aber wir wollen uns auf NW.JS und seine Funktionen konzentrieren. Dazu lieber ich

Sie entscheiden, was die App tut. Ich habe ein Beispiel-Projekt NW.JS-Examples auf GitHub erstellt, um mehrere NW.JS-Funktionen wie Node.js-Integration und Clipboard-Zugriff zu demonstrieren. Versuchen Sie es in Ihrer Bewerbung. Sie können aber auch andere Inhalte verwenden.

Für alles, was Sie entscheiden, müssen Sie zumindest die SRC/Views/main.html -Datei erstellen, da sie der Anwendungseintragspunkt ist. Es könnte so aussehen:

<code>nw.js-example/
├── src/
│   ├── app/
│   │  └── main.js
│   ├── assets/
│   │  └── icon.png
│   ├── styles/
│   │  └── common.css
│   ├── views/
│   │  └── main.html
│   └── package.json
└── package.json</code>

In einer realen Anwendung haben Sie möglicherweise mehrere andere Ansichtsdateien und laden sie mit AJAX. Der Einfachheit halber können Sie auch native Hyperlinks erstellen und auf andere HTML -Dateien verweisen. Zum Beispiel:

<code>{
  "name":"nw.js-example",
  "main":"views/main.html",
  "window":{
    "min_width":400,
    "min_height":400,
    "icon":"assets/icon.png"
  }
}</code>

Erstellen Sie dann die https://www.php.cn/link/58c1dbad4977b4c106bca8015477757e -Datei in src/views/. So mache ich es im Beispielprojekt.

Installieren Sie NW.js

Wir haben jetzt ein NW.JS -Projekt erstellt, einschließlich Manifests und Hauptansicht. Wir benötigen endlich eine Möglichkeit, NW.js direkt auf unserer Entwicklungsmaschine für die Entwicklung auszuführen und einen Build -Prozess zu implementieren, der native Anwendungen für mehrere Betriebssysteme generiert.

Um dies zu tun, brauchen wir die folgenden zwei Pakete:

  • nW (Entwicklung)
  • NW-Builder (Produktion)

Da sie nicht mit unserer tatsächlichen Anwendung zusammenhängen (sie werden nur für Entwicklungszwecke und Produktionsergebnisse verwendet), erstellen wir sie als DevDependencies im zweiten Paket.json im Stammordner zusammen mit den erforderlichen Namen und Versionsfeldern:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>NW.js-example | main</title>
    <link rel="stylesheet" href="../styles/common.css">
</head>
<body>
    <h1 id="Hello-World">Hello World :-)</h1>
    <🎜>
</body>
</html>

Jetzt müssen wir nur den folgenden Befehl im Stammordner des Projekts ausführen, um DevDependenzen zu installieren:

<a href="https://www.php.cn/link/58c1dbad4977b4c106bca8015477757e">Something</a>

fertig! Lass uns bauen.

Verpackung und Verteilung

Um die Verpackung zu vereinfachen, fügen wir NPM -Skripten zu unserer Paket.json -Datei hinzu. Sie ermöglichen es uns, CLI -Befehle auszuführen, rechts definiert und mit NPM -Ausführen links mithilfe von Verknüpfungen definiert. Wir haben zwei Skripte hinzugefügt, eine für die Entwicklung und eine für die Produktion:

{
  "name":"nw.js-example",
  "version":"1.0.0",
  "devDependencies":{
    "nw":"^0.18.2",
    "nw-builder":"^3.1.2"
  }
}

NW.js direkt ausführen

Um die NW.JS -Anwendung direkt zu starten, führen Sie einfach aus:

$ npm install

Diese Verknüpfung ruft den Befehl auf, den wir in Skripten unter Dev mit dem NW -Paket definiert haben. Ein neues Fenster sollte direkt auf Ihrer Entwicklungsmaschine geöffnet werden, in der SRC/Views/main.html angezeigt wird.

Produktionskonstruktion

Produktionsergebnisse verwenden NW-Builder, das die Ausgabe von Windows, Linux und MacOS unterstützt. In unserem Beispiel haben wir ein Paket für alle diese Plattformen erstellt, einschließlich 32-Bit- und 64-Bit-Versionen. Für macOS können derzeit nur 32-Bit im alten Versionsmodus eingebaut werden. (Siehe diese Frage zu Github.) Also wird nur 64-Bit gebaut.

Um unseren Produktionsbau auszuführen, rennen Sie einfach:

{
  "name":"nw.js-example",
  "version":"1.0.0",
  "devDependencies":{
    "nw":"^0.18.2",
    "nw-builder":"^3.1.2"
  },
  "scripts":{
    "dev":"nw src/",
    "prod":"nwbuild --platforms win32,win64,osx64,linux32,linux64 --buildDir dist/ src/"
  }
}

Wie beim direkten Ausführen von NW.js verwendet dies die CLI -Befehle, die wir in Skripten definiert haben.

Es wird eine Weile dauern ...

Building a Cross-platform Desktop App with NW.js

Überprüfen Sie nach Abschluss Ihren Dist/Ordner. Es sollte so aussehen:

$ npm run dev

Großartig, wir sind fast fertig!

testen und debuggen

Handbuch

Da NW.js auf Chrom basiert, ist manuelle Tests so einfach wie in Chrom. Wenn Sie auf einen Fehler (visuell oder funktional) stoßen, können Sie das Entwickler -Tool mit der Tastaturverknüpfung F12 oder programmgesteuert öffnen:

<code>nw.js-example/
├── src/
│   ├── app/
│   │  └── main.js
│   ├── assets/
│   │  └── icon.png
│   ├── styles/
│   │  └── common.css
│   ├── views/
│   │  └── main.html
│   └── package.json
└── package.json</code>

Building a Cross-platform Desktop App with NW.js

Bitte beachten Sie, dass dies einen SDK -Build -Stil erfordert. Wenn Sie Entwickler -Tools in der Produktion deaktivieren möchten, können Sie NW.js in einem anderen Stil erstellen oder F12 -Events deaktivieren.

Automatisierung

automatisierte Unit -Tests (zum Glück) wird häufig verwendet, um sicherzustellen, dass sie in verschiedenen Implementierungen ordnungsgemäß funktioniert, ohne dass kontinuierliche manuelle Tests erforderlich sind.

Building a Cross-platform Desktop App with NW.js

Wenn Ihre Anwendung keine NW.JS-spezifischen API-Methoden verwendet, können Sie Ihre üblichen Webanwendungs-Workflows theoretisch aufbewahren-beispielsweise mit Karma als Spezifikationsläufer in Kombination mit Jasmine als Testframework.

Wenn Sie jedoch NW.JS -spezifische API -Methoden verwenden, müssen Sie die Tests in Ihrer NW.JS -Anwendung ausführen, um sicherzustellen, dass die API -Methoden definiert sind. Eine Möglichkeit besteht darin, Karas NW.js Launcher-Plugin wie Karma-Nodewebkit-Launcher zu verwenden. Es funktioniert genauso wie jedes andere Browser -Launcher -Plugin in Karma: Es öffnet die Anwendung im NW.JS -Container, um eine Prüfung durchzuführen, und schließt sie dann automatisch.

Da NW.js jedoch nicht kopflos ist (im Gegensatz zu Phantomjs usw.), erfordert es immer eine physische Anzeige. Dies bedeutet, dass es unmöglich ist, Tests auf einem reinen CLI -Server auszuführen. Glücklicherweise können Sie in diesem Fall XVFB verwenden, um das Display zu emulieren. Dies funktioniert beispielsweise auf Travis CI. Für Jenkins müssen Sie das XVFB -Plugin installieren. Weitere Informationen finden Sie in dieser Frage zu GitHub.

Schlussfolgerung

Ich hoffe, dieser Artikel wird Ihnen ein detailliertes Verständnis der Vorteile und Anwendungsfälle von NW.Js. Es gibt viele Gründe, warum die Verwendung einer Hybridanwendung besser ist, als einen .zip -Ordner mit HTML -Dateien zu verteilen (und dann aus dem Dateisystem auszuführen). NW.js können auch als Ersatz für native Anwendungen verwendet werden, da Sie sich nicht auf komplexe GUIs konzentrieren müssen und viele integrierte Funktionen wie Videotreiber haben. Da Sie die Umgebung erkennen können, können Sie auch eine Anwendung entwickeln, die auf einem normalen Webserver und Client -Computer mit NW.JS. ausgeführt werden kann. Mit einigen Tricks und dank der leistungsstarken Chrom -Engine können Benutzer kaum den Unterschied zu nativen Anwendungen spüren.

Bestimmen Sie beim Erstellen eines neuen NW.JS -Projekts zuerst, welches Framework, der Modullader und ein Präprozessor Sie verwenden möchten - abhängig von dem, was Sie kennen - oder starten Sie direkt von vorne. Nachdem Sie diese Entscheidungen getroffen haben, finden Sie NW.JS -Boilerplate, die Ihren Anforderungen entsprechen. Wenn es keine geeignete Kesselplatte gibt, können Sie eine Anwendung basierend auf diesem Tutorial als Grundlage verwenden.

Was ist Ihr bevorzugtes Modell? Oder welche Technologien entwickeln Sie NW.JS -Anwendungen? Ist es effektiv, das Beispiel von NW.JS anstelle der TO-DO-Anwendungsimplementierung in diesem Artikel zu verwenden? Bitte lassen Sie es mich in den Kommentaren wissen.

FAQs (FAQs) über plattformübergreifende Desktop-Anwendungen unter Verwendung von NW.JS

Was ist der Hauptunterschied zwischen NW.js und anderen plattformübergreifenden Desktop-Anwendungs-Frameworks?

nw.js ist ein leistungsstarkes Tool zur Entwicklung von plattformübergreifenden Desktop-Anwendungen. Im Gegensatz zu anderen Frameworks ermöglicht NW.JS Entwicklern, Code in HTML, CSS und JavaScript zu schreiben, die häufig in der Webentwicklung verwendet werden. Dies erleichtert Webentwicklern, um zur Entwicklung der Desktop -Anwendungsentwicklung umzusteigen. Darüber hinaus verfügt NW.js über eine eindeutige Funktion, die den direkten Zugriff auf die Node.js -API im DOM ermöglicht und komplexere und leistungsfähigere Merkmale ermöglicht.

Wie kann man mit NW.js beginnen?

Um mit NW.JS zu beginnen, müssen Sie es zunächst herunterladen und auf der offiziellen Website installieren. Sobald die Installation abgeschlossen ist, können Sie ein neues Projektverzeichnis erstellen, Ihre HTML-, CSS- und JavaScript -Dateien hinzufügen und Ihre Anwendung dann mithilfe der ausführbaren Datei nw.js ausführen. Die NW.JS -Dokumentation bietet einen detaillierten Leitfaden zum Einstieg.

Kann ich NW.js für kommerzielle Projekte verwenden?

Ja, Sie können NW.js für kommerzielle Projekte verwenden. NW.JS ist Open Source und kostenlos erhältlich. Damit ist es eine kostengünstige Lösung für die Entwicklung von plattformübergreifenden Desktop-Anwendungen. Es ist jedoch zu beachten, dass ein verwendete Modul eines Drittanbieters seine eigenen Lizenzanforderungen hat.

Wie kann ich meine NW.js -Anwendung verpacken und verteilen?

Verpacken und Verteilen von NW.JS -Anwendungen beinhaltet das Erstellen von eigenständigen ausführbaren Dateien, die auf der Zielplattform ausgeführt werden können. Dies kann mit Tools wie NW-Builder oder Webpack erfolgen. Nach dem Verpacken kann die Anwendung über verschiedene Kanäle verteilt werden, z. B. direkte Downloads oder App -Stores.

Welche Plattformen werden von NW.js unterstützt?

nw.js unterstützt verschiedene Plattformen. Es kann verwendet werden, um Anwendungen für Windows, Mac und Linux zu entwickeln. Diese plattformübergreifende Unterstützung ist einer der wichtigsten Vorteile der Verwendung von NW.JS, da Entwickler gleichzeitig Code schreiben und auf mehreren Plattformen ausführen können.

Wie kann ich meine NW.js -Anwendung debuggen?

Debugging NW.JS -Anwendungen ähnelt der Debugging -Webanwendungen. Sie können Chrome Developer -Tools debuggen, die von NW.js Bundle bereitgestellt werden. Diese Tools bieten viele Funktionen zum Überprüfen und Debuggencode.

Kann ich das Node.js -Modul in meiner NW.JS -Anwendung verwenden?

Ja, eines der wichtigsten Merkmale von NW.js ist die Möglichkeit, das Node.js -Modul direkt im DOM zu verwenden. Auf diese Weise können komplexere und leistungsfähigere Funktionen in Ihrer Anwendung implementiert werden. Sie können jeden der Tausenden von Modulen verwenden, die auf NPM in Ihrer NW.JS -Anwendung verfügbar sind.

Wie aktualisiere ich meine NW.js -Anwendung?

Aktualisierung der Anwendung NW.JS beinhaltet das Ersetzen der alten Version der Anwendung durch die neue Version der Anwendung. Dies kann vom Benutzer manuell durchgeführt werden, oder Sie können Module wie NW-Updater verwenden, um automatische Updates in der Anwendung zu implementieren.

Kann ich mit nw.js auf native API zugreifen?

Ja, NW.js ermöglicht den direkten Zugriff auf native APIs über node.js. Dies bedeutet, dass Sie native Funktionen wie Dateisysteme, Netzwerke, Geräte usw. in Ihrer Anwendung verwenden können. Dies ist ein wesentlicher Vorteil von NW.js gegenüber herkömmlichen Webtechnologien.

Wie optimieren Sie die Leistung meiner NW.JS -Anwendung?

Optimierung der Leistung von NW.JS -Anwendungen umfasst verschiedene Technologien wie das Minimieren und Verbinden von JavaScript -Dateien, die Optimierung von Bildern und die Verwendung effizienter Algorithmen und Datenstrukturen. Darüber hinaus können Sie Chrome Developer Tools verwenden, um Leistungsprobleme zu analysieren und zu debuggen.

Diese überarbeitete Ausgabe behält die Original -Bildplatzierung und das Format auf, setzt Sätze und Absätze für Originalität auf und erhalten Sie die Kernbedeutung und verwendet eine prägnantere und wirkungsvolle Sprache.

Das obige ist der detaillierte Inhalt vonErstellen einer plattformübergreifenden Desktop-App mit NW.js. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Ersetzen Sie Stringzeichen in JavaScriptErsetzen Sie Stringzeichen in JavaScriptMar 11, 2025 am 12:07 AM

Detaillierte Erläuterung der Methode für JavaScript -Zeichenfolge und FAQ In diesem Artikel werden zwei Möglichkeiten untersucht, wie String -Zeichen in JavaScript ersetzt werden: Interner JavaScript -Code und interne HTML für Webseiten. Ersetzen Sie die Zeichenfolge im JavaScript -Code Die direkteste Möglichkeit ist die Verwendung der Ersatz () -Methode: str = str.replace ("find", "ersetzen"); Diese Methode ersetzt nur die erste Übereinstimmung. Um alle Übereinstimmungen zu ersetzen, verwenden Sie einen regulären Ausdruck und fügen Sie das globale Flag G hinzu:: STR = Str.Replace (/fi

Erstellen Sie Ihre eigenen AJAX -WebanwendungenErstellen Sie Ihre eigenen AJAX -WebanwendungenMar 09, 2025 am 12:11 AM

Hier sind Sie also bereit, alles über dieses Ding namens Ajax zu lernen. Aber was genau ist das? Der Begriff AJAX bezieht sich auf eine lose Gruppierung von Technologien, mit denen dynamische, interaktive Webinhalte erstellt werden. Der Begriff Ajax, ursprünglich von Jesse J geprägt

Wie erstelle ich meine eigenen JavaScript -Bibliotheken?Wie erstelle ich meine eigenen JavaScript -Bibliotheken?Mar 18, 2025 pm 03:12 PM

In Artikel werden JavaScript -Bibliotheken erstellt, veröffentlicht und aufrechterhalten und konzentriert sich auf Planung, Entwicklung, Testen, Dokumentation und Werbestrategien.

Wie optimiere ich den JavaScript -Code für die Leistung im Browser?Wie optimiere ich den JavaScript -Code für die Leistung im Browser?Mar 18, 2025 pm 03:14 PM

In dem Artikel werden Strategien zur Optimierung der JavaScript -Leistung in Browsern erörtert, wobei der Schwerpunkt auf die Reduzierung der Ausführungszeit und die Minimierung der Auswirkungen auf die Lastgeschwindigkeit der Seite wird.

Wie debugge ich den JavaScript -Code effektiv mithilfe von Browser -Entwickler -Tools?Wie debugge ich den JavaScript -Code effektiv mithilfe von Browser -Entwickler -Tools?Mar 18, 2025 pm 03:16 PM

In dem Artikel werden effektives JavaScript -Debuggen mithilfe von Browser -Entwickler -Tools, der Schwerpunkt auf dem Festlegen von Haltepunkten, der Konsole und der Analyse der Leistung erörtert.

JQuery MatrixeffekteJQuery MatrixeffekteMar 10, 2025 am 12:52 AM

Bringen Sie Matrix -Filmeffekte auf Ihre Seite! Dies ist ein cooles JQuery -Plugin, das auf dem berühmten Film "The Matrix" basiert. Das Plugin simuliert die klassischen grünen Charakter-Effekte im Film und wählen Sie einfach ein Bild aus, und das Plugin verwandelt es in ein mit numerischer Zeichen gefüllte Bild im Matrix-Stil. Komm und probiere es aus, es ist sehr interessant! Wie es funktioniert Das Plugin lädt das Bild auf die Leinwand und liest die Pixel- und Farbwerte: Data = ctx.getImagedata (x, y, setting.grainize, setting.grainesize) .data Das Plugin liest geschickt den rechteckigen Bereich des Bildes und berechnet JQuery, um die durchschnittliche Farbe jedes Bereichs zu berechnen. Dann verwenden Sie

So bauen Sie einen einfachen JQuery SliderSo bauen Sie einen einfachen JQuery SliderMar 11, 2025 am 12:19 AM

In diesem Artikel werden Sie mit der JQuery -Bibliothek ein einfaches Bildkarousel erstellen. Wir werden die BXSLIDER -Bibliothek verwenden, die auf JQuery basiert und viele Konfigurationsoptionen zum Einrichten des Karussells bietet. Heutzutage ist Picture Carousel zu einem Muss auf der Website geworden - ein Bild ist besser als tausend Wörter! Nachdem Sie sich entschieden haben, das Bild -Karussell zu verwenden, ist die nächste Frage, wie Sie es erstellen. Zunächst müssen Sie hochwertige, hochauflösende Bilder sammeln. Als nächstes müssen Sie ein Bildkarousel mit HTML und einem JavaScript -Code erstellen. Es gibt viele Bibliotheken im Web, die Ihnen helfen können, Karussell auf unterschiedliche Weise zu erstellen. Wir werden die Open -Source -BXSLIDER -Bibliothek verwenden. Die BXSLIDER -Bibliothek unterstützt reaktionsschnelles Design, sodass das mit dieser Bibliothek gebaute Karussell an alle angepasst werden kann

So laden und herunterladen Sie CSV -Dateien mit Angular hoch und laden Sie sie herunterSo laden und herunterladen Sie CSV -Dateien mit Angular hoch und laden Sie sie herunterMar 10, 2025 am 01:01 AM

Datensätze sind äußerst wichtig für den Aufbau von API -Modellen und verschiedenen Geschäftsprozessen. Aus diesem Grund ist das Import und Exportieren von CSV eine häufig benötigte Funktionalität. In diesem Tutorial lernen Sie, wie Sie eine CSV-Datei in einem Angular herunterladen und importieren.

See all articles

Heiße KI -Werkzeuge

Undresser.AI Undress

Undresser.AI Undress

KI-gestützte App zum Erstellen realistischer Aktfotos

AI Clothes Remover

AI Clothes Remover

Online-KI-Tool zum Entfernen von Kleidung aus Fotos.

Undress AI Tool

Undress AI Tool

Ausziehbilder kostenlos

Clothoff.io

Clothoff.io

KI-Kleiderentferner

AI Hentai Generator

AI Hentai Generator

Erstellen Sie kostenlos Ai Hentai.

Heiße Werkzeuge

mPDF

mPDF

mPDF ist eine PHP-Bibliothek, die PDF-Dateien aus UTF-8-codiertem HTML generieren kann. Der ursprüngliche Autor, Ian Back, hat mPDF geschrieben, um PDF-Dateien „on the fly“ von seiner Website auszugeben und verschiedene Sprachen zu verarbeiten. Es ist langsamer und erzeugt bei der Verwendung von Unicode-Schriftarten größere Dateien als Originalskripte wie HTML2FPDF, unterstützt aber CSS-Stile usw. und verfügt über viele Verbesserungen. Unterstützt fast alle Sprachen, einschließlich RTL (Arabisch und Hebräisch) und CJK (Chinesisch, Japanisch und Koreanisch). Unterstützt verschachtelte Elemente auf Blockebene (wie P, DIV),

SublimeText3 chinesische Version

SublimeText3 chinesische Version

Chinesische Version, sehr einfach zu bedienen

Dreamweaver Mac

Dreamweaver Mac

Visuelle Webentwicklungstools

EditPlus chinesische Crack-Version

EditPlus chinesische Crack-Version

Geringe Größe, Syntaxhervorhebung, unterstützt keine Code-Eingabeaufforderungsfunktion

Sicherer Prüfungsbrowser

Sicherer Prüfungsbrowser

Safe Exam Browser ist eine sichere Browserumgebung für die sichere Teilnahme an Online-Prüfungen. Diese Software verwandelt jeden Computer in einen sicheren Arbeitsplatz. Es kontrolliert den Zugriff auf alle Dienstprogramme und verhindert, dass Schüler nicht autorisierte Ressourcen nutzen.