Guia Guia de desenvolupament

Desenvolupeu ràpidament aplicacions d'escriptori

El llançament d’una aplicació d’escriptori a fibjs és molt ràpid. Només cal que escriviu el codi següent per obrir i executar una finestra de WebView:

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

Aquest codi obrirà una finestra de WebView integrada al sistema operatiu i entrarà al lloc web fibjs.org.

Tanmateix, la WebView integrada del sistema no pot satisfer el potent desenvolupament d'aplicacions d'escriptori en termes de funció d'interfície o compatibilitat. Per tant, fibjs també admet el desenvolupament d'aplicacions basades en cef.

Introducció al cef

El nom complet de cef és Chromium Embedded Framework, que és un projecte de codi obert basat en Google Chromium. El projecte Google Chromium es desenvolupa principalment per a aplicacions de Google Chrome i l’objectiu de cef és proporcionar suport per al navegador incrustable per a aplicacions de tercers. cef aïlla el complex codi de Chromium i Blink subjacents i proporciona un conjunt d’APIs estables a nivell de producte, allibera branques que fan un seguiment de versions específiques de Chromium i paquets binaris. La majoria de les funcions de cef ofereixen implementacions predeterminades, que permeten als usuaris fer la menor personalització possible per satisfer les seves necessitats. Els escenaris d’aplicació típics de cef inclouen:

  • Inseriu un control del navegador compatible amb HTML5 en una aplicació local existent.
  • Creeu un navegador de shell lleuger per allotjar aplicacions desenvolupades principalment amb tecnologia web.
  • Algunes aplicacions tenen marcs de dibuix independents i utilitzen cef per representar contingut web fora de línia.
  • Utilitzeu cef per fer proves web automatitzades.

cef3 és el cef de nova generació basat en l'arquitectura multiprocés de l'API de contingut de Chomuim i té els següents avantatges:

  • Rendiment i estabilitat millorats (JavaScript i connectors s’executen en un procés separat).
  • Suporta pantalla Retina.
  • Admet l'acceleració GPU de WebGL i CSS 3D.
  • Funcions avantguardistes com WebRTC i entrada de veu.
  • Proporcioneu una prova d’interfície d’usuari millor automatitzada mitjançant el protocol de depuració remota de DevTools i ChromeDriver2.
  • La possibilitat d'obtenir funcions i estàndards web actuals i futurs més ràpidament.

Prepareu l’entorn operatiu

El paquet binari de cef3 es pot descarregar des de [ aquesta pàgina ]. La versió actual de fibjs és v90. Conté tots els fitxers necessaris per compilar una versió específica de cef3 en una plataforma específica (Windows, Mac OS X i Linux). L'estructura de directoris de les diferents plataformes és diferent, heu de reorganitzar l'estructura de directoris de recursos després de descarregar-la.

Sistema operatiu Windows (Windows)

A la plataforma de Windows, l'estructura de carpetes és la següent, normalment podeu incloure paquets binaris Releasei Resourcestrobar tots els fitxers al directori:

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

Sistema operatiu Linux (Linux)

A la plataforma de Linux, l'estructura de carpetes és la següent: normalment podeu trobar paquets binaris Releasei Resourcestrobar tots els fitxers al directori:

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

Al servidor Linux, perquè no hi ha compatibilitat amb l'entorn d'escriptori, només podeu --headlessexecutar el mode quan s'executa en mode finestra quan no cal instal·lar xorg:

1
apt install xorg

En alguns gpu suporten Linux Desktop malament, però també cal augmentar l' --disable-gpuopció d'inici que està desactivada la representació gpu.

Plataforma Mac X (Mac OS X)

A l'estructura de carpetes de la plataforma Mac X Release/Chromium Embedded Framework.framework, seguiu aquests passos: normalment, dins del paquet binari, podeu trobar tots els fitxers del directori; si descarregueu el cefclient, heu d'obrir l'aplicació Contents per trobar el fitxer adequat:

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

També podeu utilitzar la gui.configconfiguració cef_pathper especificar el camí binari cef i, per tant, més flexibilitat per desplegar l'entorn operatiu. Quan no s'estableix cef_pathl'hora, els fitxers binaris cef s'han de desplegar al mateix directori que el fitxer executable fibjs.

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

Prepareu l’entorn operatiu i executeu el codi següent

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

També veureu una finestra del navegador carregada amb el lloc web oficial de fibjs, però el seu motor ja és l’últim nucli de Chrome. Tingueu en compte que aquí heu de cancel·lar l' typeopció, en cas contrari s'obrirà la vista web integrada.

L'aplicació bàsica del gui és molt senzilla i es pot realitzar ràpidament fent referència al document gui, de manera que no el repetiré. A continuació, introduïm principalment alguns mètodes especials d'aplicació.

Acoblament de servei frontal i posterior

Les aplicacions d'escriptori basades en web solen tenir dos mètodes d'extensió, un és l'extensió WebView i l'altre és separar localment els extrems anteriors i posteriors. En el mètode anterior, WebView s'amplia de forma invasiva i l'entorn operatiu ja no és compatible amb els navegadors estàndard. Aquest darrer mètode requereix que s’obri localment un servidor http, cosa que provoca que la interfície de servei quedi exposada a l’exterior.

fibjs per a aplicacions d'escriptori ampliades, basades en un protocol d'escalabilitat del protocol, cef de WebView i fibjs Handlerjunts, de manera que el procés WebView pugui connectar-se directament al Handlerprocessador corresponent , totalment compatible amb el paradigma convencional de B / S desenvolupat simultàniament als extrems frontals i posteriors, garantir la seguretat i la portabilitat. Al mateix temps, el codi frontal i posterior és completament compatible amb el desenvolupament estàndard B / S frontal i posterior, que es pot desenvolupar i depurar al navegador i després trasplantar-lo directament a una aplicació local. .

El processador back-end fibjs s'ha configurat de manera configurada, a través del gui.configfet.

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

Aquest codi defineix dos back-end, és un cefprotocol de domini de prova, que apunta estàtic a un directori cef_files_pathi l’altre és httpel domini cef_test, que apunta a una ruta.

A cef, hi ha algunes restriccions en el processament de protocols no estàndards, com ara no admetre dades de publicació al servidor. Per tant, si voleu una comunicació frontal i posterior millor compatibles, heu de definir http o https Per descomptat, aquest back-end no passa El protocol de xarxa completa la comunicació, sinó que està directament connectat dins del procés.

Per obtenir informació sobre com desenvolupar el backend Handler, consulteu:hello, world.

Mode sense finestres

En els escenaris de proves automatitzades o d’automatització de processos, el procés d’operació empresarial no requereix la interacció de l’usuari, de manera que es pot executar automàticament al servidor en mode sense finestres. En aquest moment, cal executar el mode sense cap.

fibjs admet dues maneres de cap sense cap, és a dir, global sense cap i instància sense cap.

En mode global, totes les finestres funcionaran en mode sense cap, independentment de com es creï la finestra. Executar un model global, es designa com --headlessa opcions d'inici.

1
fibjs --headless test.js

La trucada a la gui.configconfiguració d’ inici del programa també pot assolir el mateix objectiu:

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

A Linux Server, tot i que el mode sense cap no requereix suport per a escriptori, el mòdul bàsic cef encara necessita una compatibilitat amb components bàsics, de manera que cal instal·lar xorg:

1
apt install xorg

En algunes aplicacions, la interacció de l'usuari i el processament automatitzat són necessaris alhora. En aquest moment, podeu especificar una finestra per utilitzar el mode sense cap per separat:

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

Cal tenir en compte que, com que no hi ha interacció de l'usuari, l'usuari no pot tancar la instància sense cap, de manera que el programa s'ha de tancar quan no sigui necessari, en cas contrari el procés no sortirà automàticament a causa de l'existència de la instància.

Interfície DevTools

El protocol Chrome DevTools permet eines per provar, inspeccionar, depurar i configurar Chromium, Chrome i altres navegadors basats en Blink. El protocol Chrome DevTools es divideix en diversos dominis (DOM, depurador, xarxa, etc.) i cada domini defineix les ordres compatibles corresponents i els esdeveniments relacionats.

fibjs encapsula la interfície d'accés del cdp, podeu fer un ús complet de la interfície cdp integrada del cef per depurar directament pàgines web a WebView. La interfície que utilitza WebView per accedir al servei cdp és WebView.dev. Per obtenir documentació detallada de cdp, consulteu: https://chromedevtools.github.io/devtools-protocol/

A continuació s’enumeren alguns fragments de codi que s’utilitzen habitualment per mostrar com utilitzar el dev per manipular els elements de la pàgina. Podeu consultar la demostració d’ús detallada test/cef_test.js.

Consulteu el 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; }

Simular el funcionament del ratolí

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

Simular el funcionament del teclat

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

Captura de pantalla de la pàgina

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

Simula l'usuari-agent

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

Escolta els esdeveniments

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

Suport multimèdia

A causa de problemes de drets d'autor, la distribució binària de cef normalment no inclou la descodificació de mp4 i mp3. Tot i això, cef conté una descodificació webm de codi obert. Per a aplicacions d'escriptori independents, es recomana utilitzar codificació webm amb llicència lliure per processar àudio i vídeo.

resum

Mitjançant la introducció d’aquesta secció, podem desenvolupar ràpidament les nostres pròpies aplicacions d’escriptori, convertir HTML en imatges o PDF i utilitzar la potent interfície de cdp per establir una prova d’automatització frontal i un motor d’automatització de processos.

👉 [ Actualització actualitzada del mòdul de servidor ]