Leitfaden-Entwicklungsleitfaden

Desktop-Anwendungen schnell entwickeln

Das Starten einer Desktop-Anwendung in fibjs ist sehr schnell. Geben Sie einfach den folgenden Code ein, um ein WebView-Fenster zu öffnen und auszuführen:

1 2 3 4 5
var gui = require("gui"); gui.open("https://fibjs.org", { "type": "native" });

Dieser Code öffnet ein in das Betriebssystem integriertes WebView-Fenster und betritt die Website fibjs.org.

Allerdings kann das eingebaute WebView des Systems der leistungsstarken Desktop-Anwendungsentwicklung in Bezug auf Schnittstellenfunktion oder Kompatibilität nicht gerecht werden. Daher unterstützt fibjs auch die cef-basierte Anwendungsentwicklung.

Einführung in cef

Der vollständige Name von cef ist Chromium Embedded Framework, ein Open-Source-Projekt basierend auf Google Chromium. Das Google Chromium-Projekt wurde hauptsächlich für Google Chrome-Anwendungen entwickelt, und das Ziel von cef besteht darin, eine einbettbare Browserunterstützung für Anwendungen von Drittanbietern bereitzustellen. cef isoliert den komplexen Code des zugrunde liegenden Chromiums und Blinks und stellt eine Reihe stabiler APIs auf Produktebene bereit, veröffentlicht Branches, die bestimmte Chromium-Versionen verfolgen, und Binärpakete. Die meisten Funktionen von cef bieten umfangreiche Standardimplementierungen, die es Benutzern ermöglichen, so wenig Anpassungen wie möglich an ihre Bedürfnisse vorzunehmen. Typische Anwendungsszenarien von cef sind:

  • Betten Sie ein HTML5-kompatibles Browsersteuerelement in eine vorhandene lokale Anwendung ein.
  • Erstellen Sie einen schlanken Shell-Browser zum Hosten von Anwendungen, die hauptsächlich mit Webtechnologie entwickelt wurden.
  • Einige Anwendungen verfügen über unabhängige Zeichnungsframeworks und verwenden cef, um Webinhalte offline zu rendern.
  • Verwenden Sie cef, um automatisierte Webtests durchzuführen.

cef3 ist das cef der nächsten Generation, das auf der Multi-Prozess-Architektur der Chomuim Content API basiert und folgende Vorteile bietet:

  • Verbesserte Leistung und Stabilität (JavaScript und Plugins werden in einem separaten Prozess ausgeführt).
  • Unterstützt Retina-Display.
  • Unterstützt die GPU-Beschleunigung von WebGL und 3D-CSS.
  • Avantgardistische Funktionen wie WebRTC und Spracheingabe.
  • Bieten Sie bessere automatisierte UI-Tests durch das DevTools-Remote-Debugging-Protokoll und ChromeDriver2.
  • Die Möglichkeit, aktuelle und zukünftige Webfunktionen und -standards schneller zu erhalten.

Bereiten Sie die Betriebsumgebung vor

Das Binärpaket von cef3 kann von [ dieser Seite ] heruntergeladen werden Die aktuelle Version von fibjs ist v90. Es enthält alle Dateien, die zum Kompilieren einer bestimmten Version von cef3 auf einer bestimmten Plattform (Windows, Mac OS X und Linux) erforderlich sind. Die Verzeichnisstruktur der verschiedenen Plattformen ist unterschiedlich, Sie müssen die Ressourcenverzeichnisstruktur nach dem Herunterladen neu organisieren.

Windows-Betriebssystem (Windows)

Auf der Plattform Ordnerstruktur von Windows wie folgt, können Sie in der Regel innerhalb von Binärpaketen Releaseund Resourcesalle Dateien in dem Verzeichnis finden:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20
Application ├── fibjs.exe ├── chrome_100_percent.pak ├── chrome_200_percent.pak ├── chrome_elf.dll ├── d3dcompiler_47.dll ├── icudtl.dat ├── libEGL.dll ├── libGLESv2.dll ├── libcef.dll ├── locales │ ├── am.pak │ ├── ...... │ └── zh-TW.pak ├── resources.pak ├── snapshot_blob.bin ├── swiftshader │ ├── libEGL.dll │ └── libGLESv2.dll └── v8_context_snapshot.bin

Linux-Betriebssystem (Linux)

Auf der Ordnerstruktur Linux - Plattform wie folgt ist, können Sie in der Regel Binärpakete innerhalb Releaseund Resourcesalle Dateien in dem Verzeichnis finden:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18
Application ├── fibjs ├── chrome_100_percent.pak ├── chrome_200_percent.pak ├── icudtl.dat ├── libEGL.so ├── libGLESv2.so ├── libcef.so ├── locales │ ├── am.pak │ ├── ...... │ └── zh-TW.pak ├── resources.pak ├── snapshot_blob.bin ├── swiftshader │ ├── libEGL.so │ └── libGLESv2.so └── v8_context_snapshot.bin

Da es auf Linux Server keine Unterstützung für Desktop-Umgebungen gibt, können Sie den --headlessModus nur ausführen, wenn Sie im Fenstermodus ausgeführt werden, wenn keine Installation von xorg erforderlich ist:

1
apt install xorg

In einigen GPUs unterstützt ein schlechter Linux-Desktop, aber auch die --disable-gpuStartoption muss erhöht werden, wenn das GPU-Rendering deaktiviert ist.

Mac X-Plattform (Mac OS X)

Auf der Mac X-Plattform ist die Ordnerstruktur wie folgt, Sie können normalerweise innerhalb der Paket-Binärdatei Release/Chromium Embedded Framework.frameworkalle Dateien im Verzeichnis finden. Wenn Sie den cefclient herunterladen, müssen Sie die App von Contents öffnen, um die entsprechende Datei zu finden:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15
Application ├── fibjs ├── Chromium Embedded Framework ├── Libraries │ ├── libEGL.dylib │ ├── libGLESv2.dylib │ ├── libswiftshader_libEGL.dylib │ ├── libswiftshader_libGLESv2.dylib │ ├── libvk_swiftshader.dylib │ └── vk_swiftshader_icd.json └── Resources ├── Info.plist ├── ...... └── zh_TW.lproj └── locale.pak

Sie können die gui.configEinstellungen auch verwenden cef_path, um den cef-Binärpfad anzugeben und damit mehr Flexibilität bei der Bereitstellung der Betriebsumgebung zu erzielen. Wenn cef_pathdie Zeit nicht festgelegt ist, müssen cef-Binärdateien im selben Verzeichnis wie die ausführbare Datei fibjs bereitgestellt werden.

1 2 3
gui.config({ "cef_path": cef_path });

Bereiten Sie die Betriebsumgebung vor und führen Sie dann den folgenden Code aus

1 2 3 4 5
var gui = require("gui"); gui.open("https://fibjs.org", { // "type": "native" });

Sie sehen auch ein Browserfenster, das mit der offiziellen Website von fibjs geladen ist, aber seine Engine ist bereits der neueste Chrome-Kernel. Beachten Sie, dass hier die typeOption abgebrochen werden muss , andernfalls wird die erstellte Webansicht des Betriebssystems geöffnet.

Die grundlegende Anwendung von gui ist sehr einfach und lässt sich durch Bezugnahme auf das GUI-Dokument schnell realisieren, daher werde ich es nicht wiederholen. Als nächstes stellen wir hauptsächlich einige spezielle Anwendungsmethoden vor.

Andocken von Front-End- und Back-End-Diensten

Webbasierte Desktopanwendungen haben normalerweise zwei Erweiterungsmethoden, eine ist die WebView-Erweiterung und die andere besteht darin, Front- und Backend lokal zu trennen. Bei der erstgenannten Methode wird WebView invasiv erweitert und die Betriebsumgebung ist nicht mehr mit Standardbrowsern kompatibel. Die letztere Methode erfordert, dass ein http-Server lokal geöffnet wird, wodurch wiederum die Dienstschnittstelle nach außen exponiert wird.

fibjs für erweiterte Desktop-Anwendungen, basierend auf einer Protokollskalierbarkeit cef wird WebView und die fibjs Handlerzusammenführen, so dass der Prozess WebView direkt an den entsprechenden HandlerProzessor angebunden werden kann , voll kompatibel mit dem konventionellen B/S-Paradigma gleichzeitig entwickelt Front- und Rear-Ends, To sorgen für Sicherheit und Mobilität. Gleichzeitig ist der Frontend- und Backend-Code vollständig konsistent mit der Standard-B/S-Frontend- und Backend-Entwicklung, die im Browser entwickelt und debuggt und dann direkt in eine lokale Anwendung übertragen werden kann .

fibjs Back-End-Prozessor konfiguriert, bis gui.configfertig.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17
gui.config({ "backend": { "cef://test/": cef_files_path, "http://cef_test/": { "/mock/:act": (r, a) => { if (a == 'header') { r.response.write(r.firstHeader('test')); r.response.addHeader("test", "world"); } else if (a == 'post') { r.response.write(`[${r.firstHeader("Content-type")}]`); r.response.write(r.body.readAll()); } }, "/*": cef_files_path } } });

Dieser Code definiert zwei Back-Ends, ist ein Testdomänenprotokoll cef, das statisch auf ein Verzeichnis zeigt cef_files_path, und das andere ist httpdie cef_test-Domäne, die auf eine Route zeigt.

In cef gibt es einige Einschränkungen bei der Verarbeitung von nicht standardmäßigen Protokollen, wie z -ends Dieses Back-End passiert natürlich nicht Das Netzwerkprotokoll vervollständigt die Kommunikation, sondern wird direkt in den Prozess eingebunden.

Informationen zur Entwicklung des Handler-Backends finden Sie unter:hello, world.

Fensterloser Modus

In automatisierten Test- oder Prozessautomatisierungsszenarien erfordert der Geschäftsbetriebsprozess keine Benutzerinteraktion, sodass er automatisch im fensterlosen Modus auf dem Server ausgeführt werden kann. Zu diesem Zeitpunkt muss der Headless-Modus ausgeführt werden.

fibjs unterstützt zwei Arten von Headless, nämlich Global Headless und Instance Headless.

Im globalen Modus werden alle Fenster im Headless-Modus ausgeführt, unabhängig davon, wie das Fenster erstellt wurde. Führen Sie ein globales Modell aus, wird als --headlessStartoptionen bezeichnet.

1
fibjs --headless test.js

gui.configDas gleiche Ziel kann auch mit Aufruf bei der Programmstartkonfiguration erreicht werden :

1 2 3
gui.config({ "headless": true });

Unter Linux Server benötigt der Headless-Modus zwar keine Desktop-Unterstützung, das cef-Basismodul benötigt jedoch dennoch einige grundlegende Komponentenunterstützung, sodass xorg installiert werden muss:

1
apt install xorg

In einigen Anwendungen sind Benutzerinteraktion und automatisierte Verarbeitung gleichzeitig erforderlich. Zu diesem Zeitpunkt können Sie ein Fenster angeben, um den Headless-Modus separat zu verwenden:

1 2 3
var win = gui.open("https://fibjs.org", { "headless": true });

Es ist zu beachten, dass die Headless-Instanz vom Benutzer nicht aktiv geschlossen werden kann, da keine Benutzerinteraktion stattfindet, sodass das Programm geschlossen werden muss, wenn es nicht benötigt wird, andernfalls wird der Prozess aufgrund der Existenz der Instanz nicht automatisch beendet.

DevTools-Schnittstelle

Das Chrome DevTools Protocol ermöglicht Tools zum Testen, Prüfen, Debuggen und Konfigurieren von Chromium, Chrome und anderen Blink-basierten Browsern. Das Chrome DevTools-Protokoll ist in mehrere Domänen (DOM, Debugger, Netzwerk usw.) unterteilt, und jede Domäne definiert die entsprechenden unterstützten Befehle und zugehörigen Ereignisse.

fibjs kapselt die Zugriffsschnittstelle von cdp, Sie können die eingebaute cdp-Schnittstelle von cef vollständig nutzen, um Webseiten direkt in WebView zu debuggen. Die von WebView für den Zugriff auf den cdp-Dienst verwendete Schnittstelle ist WebView.dev. Eine ausführliche Dokumentation von cdp finden Sie unter: https://chromedevtools.github.io/devtools-protocol/

Im Folgenden sind einige häufig verwendete Code-Snippets aufgeführt, um zu zeigen, wie dev verwendet wird, um Seitenelemente zu manipulieren. Sie können sich auf die detaillierte Verwendungsdemonstration beziehen test/cef_test.js.

Fragen Sie das DOM

1 2 3 4 5 6 7 8 9 10 11 12 13
function getOuterHTML(win, selector) { var doc = win.dev.DOM.getDocument(); var e = win.dev.DOM.querySelector({ "nodeId": doc.root.nodeId, "selector": selector }); var html = win.dev.DOM.getOuterHTML({ "nodeId": e.nodeId }); return html.outerHTML; }

Mausbedienung simulieren

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24
function click(win, selector) { var doc = win.dev.DOM.getDocument(); var e = win.dev.DOM.querySelector({ "nodeId": doc.root.nodeId, "selector": selector }); var box = win.dev.DOM.getBoxModel({ "nodeId": e.nodeId }); var mi = { "x": box.model.content[0] + 1, "y": box.model.content[1] + 1, "button": 'left', "clickCount": 1 } mi.type = "mousePressed"; win.dev.Input.dispatchMouseEvent(mi); mi.type = "mouseReleased"; win.dev.Input.dispatchMouseEvent(mi); }

Tastaturbedienung simulieren

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24
function type(win, text) { for (char of text) { win.dev.Input.dispatchKeyEvent({ "type": "char", "text": char }); } } function press(win, key) { var code = key_code[key]; var ki = { "key": key, "code": key, "windowsVirtualKeyCode": code, "nativeVirtualKeyCode": code }; ki.type = "keyDown"; win.dev.Input.dispatchKeyEvent(ki); ki.type = "keyUp"; win.dev.Input.dispatchKeyEvent(ki); }

Screenshot der Seite

1 2 3 4 5 6 7 8 9 10 11
var ret = win.dev.Page.captureScreenshot({ clip: { "x": 0, "y": 0, "width": 100, "height": 100, "scale": 1 } }); var img = gd.load(encoding.base64.decode(ret.data));

Benutzer-Agent simulieren

1 2 3 4 5 6 7 8 9
var win = gui.open(); win.on('open', () => { win.dev.Network.setUserAgentOverride({ userAgent: 'Mozilla/5.0 (iPhone; CPU iPhone OS 10_0_1 like Mac OS X) AppleWebKit/602.1.50 (KHTML, like Gecko) Version/10.0 Mobile/14A403 Safari/602.1', }); win.loadUrl('https://fibjs.org'); });

Auf Ereignisse achten

1 2 3 4 5 6 7 8 9
var win = gui.open(); win.on('open', () => { win.dev.Page.enable(); win.dev.Page.on("frameNavigated", ev => { console.log(ev.frame.url); win.close(); }); });

Multimedia-Unterstützung

Aus urheberrechtlichen Gründen beinhaltet die binäre Distribution von cef normalerweise nicht die Dekodierung von mp4 und mp3. cef enthält jedoch Open-Source-Webm-Dekodierung.Für unabhängige Desktop-Anwendungen wird empfohlen, die frei lizenzierte Webm-Kodierung zur Verarbeitung von Audio und Video zu verwenden.

Zusammenfassung

Durch die Einführung dieses Abschnitts können wir schnell unsere eigenen Desktop-Anwendungen entwickeln, HTML in Bilder oder PDF rendern und die leistungsstarke Schnittstelle von cdp verwenden, um eine Front-End-Automatisierungstest- und Prozessautomatisierungs-Engine aufzubauen.

👉 [ Hot-Update des Servermoduls ]