Guide de développement du guide

Développez rapidement des applications de bureau

Le lancement d'une application de bureau dans fibjs est très rapide. Tapez simplement le code suivant pour ouvrir et exécuter une fenêtre WebView :

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

Ce code ouvrira une fenêtre WebView intégrée au système d'exploitation et entrera sur le site Web fibjs.org.

Cependant, le WebView intégré du système ne peut pas satisfaire le développement d'applications de bureau puissantes en termes de fonction d'interface ou de compatibilité. Par conséquent, fibjs prend également en charge le développement d'applications basées sur cef.

Introduction au cef

Le nom complet de cef est Chromium Embedded Framework, qui est un projet open source basé sur Google Chromium. Le projet Google Chromium est principalement développé pour les applications Google Chrome, et l'objectif de cef est de fournir un support de navigateur intégrable pour les applications tierces. cef isole le code complexe de Chromium et Blink sous-jacents, et fournit un ensemble d'API stables au niveau du produit, des branches de versions qui suivent des versions spécifiques de Chromium et des packages binaires. La plupart des fonctionnalités de cef fournissent des implémentations par défaut riches, permettant aux utilisateurs de faire le moins de personnalisation possible pour répondre à leurs besoins. Les scénarios d'application typiques de cef incluent :

  • Intégrez un contrôle de navigateur compatible HTML5 dans une application locale existante.
  • Créez un navigateur shell léger pour héberger des applications principalement développées avec la technologie Web.
  • Certaines applications ont des cadres de dessin indépendants et utilisent cef pour rendre le contenu Web hors ligne.
  • Utilisez cef pour effectuer des tests Web automatisés.

cef3 est la prochaine génération de cef basée sur l'architecture multi-processus de Chomuim Content API et présente les avantages suivants :

  • Performances et stabilité améliorées (JavaScript et les plugins sont exécutés dans un processus séparé).
  • Prend en charge l'affichage Retina.
  • Prend en charge l'accélération GPU de WebGL et CSS 3D.
  • Des fonctionnalités d'avant-garde telles que WebRTC et la saisie vocale.
  • Fournir de meilleurs tests d'interface utilisateur automatisés via le protocole de débogage à distance DevTools et ChromeDriver2.
  • La possibilité d'obtenir plus rapidement les fonctionnalités et les normes Web actuelles et futures.

Préparer l'environnement d'exploitation

Le paquet binaire de cef3 peut être téléchargé à partir de [ cette page ] La version actuelle de fibjs est la v90. Il contient tous les fichiers nécessaires pour compiler une version spécifique de cef3 sur une plate-forme spécifique (Windows, Mac OS X et Linux). La structure des répertoires des différentes plates-formes n'est pas très différente, vous devez réorganiser la structure des répertoires des ressources après le téléchargement.

Système d'exploitation Windows (Windows)

Sur la plate-forme Windows, la structure des dossiers est la suivante, vous pouvez généralement dans les packages binaires Releaseet Resourcestrouver tous les fichiers dans le répertoire :

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

Système d'exploitation Linux (Linux)

Sur la plate-forme Linux, la structure des dossiers est la suivante, vous pouvez généralement dans les packages binaires Releaseet Resourcestrouver tous les fichiers dans le répertoire :

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

Sur Linux Server, car il n'y a pas de support pour l'environnement de bureau, vous ne pouvez --headlessexécuter le mode qu'en mode fenêtré lorsqu'il n'est pas nécessaire d'installer xorg :

1
apt install xorg

Dans certains gpu prennent en charge un mauvais bureau Linux, mais il faut également augmenter l' --disable-gpuoption de démarrage pour désactiver le rendu gpu.

Plateforme Mac X (Mac OS X)

Sur la plate-forme Mac X, la structure des dossiers est la suivante, vous pouvez généralement dans le binaire du package Release/Chromium Embedded Framework.frameworktrouver tous les fichiers du répertoire, si vous téléchargez le cefclient, vous devez alors ouvrir l'application Contents pour trouver le fichier approprié :

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

Vous pouvez également utiliser les gui.configparamètres cef_pathpour spécifier le chemin binaire cef, et donc plus de flexibilité pour déployer l'environnement d'exploitation. Lorsque cef_pathl'heure n'est pas définie , les binaires cef doivent être déployés dans le même répertoire que le fichier exécutable fibjs.

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

Préparez l'environnement d'exploitation, puis exécutez le code suivant

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

Vous verrez également une fenêtre de navigateur chargée du site officiel de fibjs, mais son moteur est déjà le dernier noyau Chrome. Notez ici qu'il faut annuler l' typeoption, sinon ouvrira la vue Web construite par l'os.

L'application de base de l'interface graphique est très simple et peut être rapidement réalisée en se référant au document gui, je ne la répéterai donc pas. Ensuite, nous introduisons principalement quelques méthodes d'application spéciales.

Station d'accueil de service front-end et back-end

Les applications de bureau Web ont généralement deux méthodes d'extension, l'une est l'extension WebView et l'autre consiste à séparer les extrémités avant et arrière localement. Dans la première méthode, WebView est étendu de manière invasive et l'environnement d'exploitation n'est plus compatible avec les navigateurs standard. Cette dernière méthode nécessite l'ouverture locale d'un serveur http, ce qui entraîne à son tour l'exposition de l'interface de service à l'extérieur.

fibjs pour les applications de bureau étendues, basé sur une évolutivité de protocole cef WebView et les fibjs Handlerensemble, de sorte que le processus WebView puisse être connecté directement au Handlerprocesseur correspondant , entièrement compatible avec le paradigme B/S conventionnel développé simultanément aux extrémités avant et arrière, pour assurer la sécurité et la portabilité. Dans le même temps, le code front-end et back-end est totalement cohérent avec le développement front-end et back-end B/S standard, qui peut être développé et débogué dans le navigateur, puis directement transplanté dans des applications locales.

processeur back-end fibjs configuré de manière, par le biais de gui.configfait.

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

Ce code définit deux back-end, est un cefprotocole de domaine de test, pointant statiquement vers un répertoire cef_files_path, et l'autre est httple domaine cef_test, pointant vers une route.

Dans cef, il existe certaines restrictions sur le traitement des protocoles non standard, telles que la non prise en charge des données de publication sur le serveur. Par conséquent, si vous souhaitez une meilleure communication frontale compatible, vous devez définir des back-ends http ou https. Bien entendu, ce back-end ne passe pas. Le protocole réseau complète la communication, mais est directement connecté au sein du processus.

Pour savoir comment développer le backend de Handler, veuillez vous référer à :hello, world.

Mode sans fenêtre

Dans les scénarios de test automatisé ou d'automatisation de processus, le processus d'exploitation commerciale ne nécessite pas d'interaction avec l'utilisateur, il peut donc être exécuté automatiquement sur le serveur en mode sans fenêtre. À ce stade, le mode sans tête est requis pour fonctionner.

fibjs prend en charge deux méthodes de headless, à savoir global headless et instance headless.

En mode global, toutes les fenêtres s'exécuteront en mode sans écran, quelle que soit la façon dont la fenêtre est créée. Exécuter un modèle global, est désigné --headlessoptions de démarrage.

1
fibjs --headless test.js

La gui.configconfiguration de l' appel au démarrage du programme peut également atteindre le même objectif :

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

Sous Linux Server, bien que le mode sans tête ne nécessite pas de support de bureau, le module de base cef a toujours besoin d'un support de composant de base, donc xorg doit être installé :

1
apt install xorg

Dans certaines applications, l'interaction de l'utilisateur et le traitement automatisé sont requis en même temps. À ce stade, vous pouvez spécifier séparément une fenêtre pour utiliser le mode sans écran :

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

Il convient de noter qu'en l'absence d'interaction avec l'utilisateur, l'instance sans tête ne peut pas être fermée activement par l'utilisateur. Le programme doit donc être fermé lorsqu'il n'est pas nécessaire, sinon le processus ne se terminera pas automatiquement en raison de l'existence de l'instance.

Interface DevTools

Le protocole Chrome DevTools permet aux outils de tester, inspecter, déboguer et configurer Chromium, Chrome et d'autres navigateurs basés sur Blink. Le protocole Chrome DevTools est divisé en plusieurs domaines (DOM, débogueur, réseau, etc.), et chaque domaine définit les commandes prises en charge correspondantes et les événements associés.

fibjs encapsule l'interface d'accès de cdp, vous pouvez utiliser pleinement l'interface cdp intégrée de cef pour déboguer directement les pages Web dans WebView. L'interface utilisée par WebView pour accéder au service cdp est WebView.dev. Pour une documentation détaillée de cdp, veuillez vous référer à : https://chromedevtools.github.io/devtools-protocol/

Vous trouverez ci-dessous quelques extraits de code couramment utilisés pour montrer comment utiliser dev pour manipuler des éléments de page. Vous pouvez vous référer à la démonstration d'utilisation détaillée test/cef_test.js.

Interroger le 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; }

Simuler le fonctionnement de la souris

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

Simuler le fonctionnement du clavier

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

Capture d'écran de la page

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

Simuler l'agent utilisateur

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

Écouter les événements

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

Prise en charge multimédia

En raison de problèmes de droits d'auteur, la distribution binaire de cef n'inclut généralement pas le décodage de mp4 et mp3. Mais cef contient un décodage webm open source.Pour les applications de bureau indépendantes, il est recommandé d'utiliser un codage webm sous licence libre pour traiter l'audio et la vidéo.

résumé

Grâce à l'introduction de cette section, nous pouvons rapidement développer nos propres applications de bureau, convertir du HTML en images ou PDF et utiliser la puissante interface de cdp pour établir un test d'automatisation frontal et un moteur d'automatisation des processus.

👉 [ Mise à jour à chaud du module serveur ]