Guía Guía de desenvolvemento

Desenvolve rapidamente aplicacións de escritorio

O lanzamento dunha aplicación de escritorio en fibjs é moi rápido. Escriba o seguinte código para abrir e executar unha xanela de WebView:

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

Este código abrirá unha xanela de WebView integrada no sistema operativo e entrará no sitio web fibjs.org.

Non obstante, a WebView integrada do sistema non pode satisfacer o potente desenvolvemento de aplicacións de escritorio en termos de función de interface ou compatibilidade. Polo tanto, fibjs tamén admite o desenvolvemento de aplicacións baseadas en cef.

Introdución ao cef

O nome completo de cef é Chromium Embedded Framework, que é un proxecto de código aberto baseado en Google Chromium. O proxecto Google Chromium desenvólvese principalmente para aplicacións de Google Chrome e o obxectivo de cef é proporcionar soporte para o navegador incrustable para aplicacións de terceiros. cef illa o complexo código dos subxacentes Chromium e Blink e proporciona un conxunto de API estables a nivel de produto, libera ramas que rastrexan versións específicas de Chromium e paquetes binarios. A maioría das funcións de cef ofrecen implementacións predeterminadas, que permiten aos usuarios facer a mínima personalización posible para satisfacer as súas necesidades. Os escenarios de aplicación típicos do cef inclúen:

  • Inserir un control do navegador compatible con HTML5 nunha aplicación local existente.
  • Crea un navegador de shell lixeiro para aloxar aplicacións desenvolvidas principalmente con tecnoloxía web.
  • Algunhas aplicacións teñen cadros de debuxo independentes e usan cef para renderizar contido web sen conexión.
  • Use cef para facer probas web automatizadas.

cef3 é a seguinte xeración de cef baseada na arquitectura multiproceso de API de contido Chomuim e ten as seguintes vantaxes:

  • Rendemento e estabilidade mellorados (JavaScript e complementos execútanse nun proceso separado).
  • Soporte de visualización Retina.
  • Soporta a aceleración GPU de WebGL e 3D CSS.
  • Funcións de vangarda como WebRTC e entrada de voz.
  • Proporciona probas de IU mellor automatizadas a través do protocolo de depuración remota de DevTools e ChromeDriver2.
  • A capacidade de obter características e estándares web actuais e futuros máis rápido.

Prepare o ambiente operativo

O paquete binario de cef3 pódese descargar desde [ esta páxina ]. A versión actual de fibjs é v90. Contén todos os ficheiros necesarios para compilar unha versión específica de cef3 nunha plataforma específica (Windows, Mac OS X e Linux). A estrutura de directorios de diferentes plataformas é diferente, cómpre reorganizar a estrutura de directorio de recursos despois da descarga.

Sistema operativo Windows (Windows)

Na estrutura de cartafoles da plataforma Windows é a seguinte, normalmente podes atopar paquetes binarios Releasee Resourcesatopar todos os ficheiros no directorio:

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 operativo Linux (Linux)

Na estrutura de cartafoles da plataforma Linux é a seguinte, normalmente podes atopar paquetes binarios Releasee Resourcesatopar todos os ficheiros no directorio:

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

En Linux Server porque non hai soporte para o ambiente de escritorio, só se pode --headlessexecutar o modo cando se executa en modo fiestra cando non é necesario instalar xorg:

1
apt install xorg

Nalgúns soportes de CPU de escritorio Linux malo, pero tamén hai que aumentar a --disable-gpuopción de inicio está desactivada a representación de GPU.

Plataforma Mac X (Mac OS X)

Na estrutura de cartafoles da plataforma Mac X é a seguinte, normalmente dentro do paquete binario podes Release/Chromium Embedded Framework.frameworkatopar todos os ficheiros do directorio, se descargas o cefclient, debes abrir a aplicación de contido para atopar o ficheiro adecuado:

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

Tamén pode usar a gui.configconfiguración cef_pathpara especificar o camiño binario cef e, polo tanto, máis flexibilidade para despregar o ambiente operativo. Se non se define cef_patha hora, os binarios cef deben despregarse no mesmo directorio que o ficheiro executable fibjs.

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

Prepare o contorno operativo e logo execute o seguinte código

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

Tamén verá unha ventá do navegador cargada co sitio web oficial de fibjs, pero o seu motor xa é o último núcleo de Chrome. Teña en conta que aquí hai que cancelar a typeopción, se non, abrirá a vista web integrada.

A aplicación básica de gui é moi sinxela e pódese realizar rapidamente facendo referencia ao documento gui, polo que non o vou repetir. A continuación, introducimos principalmente algúns métodos especiais de aplicación.

Acoplamiento de servizo front-end e back-end

As aplicacións de escritorio baseadas na web adoitan ter dous métodos de extensión, un é a extensión WebView e o outro é separar localmente os frontes e posteriores. No primeiro método, WebView amplíase de forma invasiva e o contorno operativo xa non é compatible cos navegadores estándar. Este último método require que se abra localmente un servidor http, o que á súa vez fai que a interface de servizo estea exposta ao exterior.

fibjs para aplicacións de escritorio estendidas, baseadas nun protocolo de escalabilidade cef farán que WebView e os fibjs Handlerxunten, de xeito que o proceso WebView poida conectarse directamente ao Handlerprocesador correspondente , totalmente compatible co paradigma convencional de B / S desenvolvido simultaneamente nos extremos dianteiro e traseiro. garantir a seguridade e a portabilidade. Ao mesmo tempo, o código front-end e back-end é completamente coherente co desenvolvemento frontal e back-end B / S estándar, que se pode desenvolver e depurar no navegador e despois transplantalo directamente nunha aplicación local. .

o procesador back-end fibjs configurouse de xeito gui.configfinalizado.

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

Este código define dous back-end, é un cefprotocolo de dominio de proba, estático que apunta a un directorio cef_files_pathe o outro é httpo dominio cef_test, que apunta a unha ruta.

En cef, hai algunhas restricións no procesamento de protocolos non estándar, como non soportar datos de publicación no servidor. Polo tanto, se desexa unha comunicación front-end e back-end mellor compatibles, ten que definir http ou https back Por suposto, este back-end non pasa. O protocolo de rede completa a comunicación, pero está directamente conectado dentro do proceso.

Para saber como desenvolver o backend Handler, consulte:hello, world.

Modo sen xanelas

En probas automatizadas ou escenarios de automatización de procesos, o proceso de operación empresarial non require a interacción do usuario, polo que pode executarse automaticamente no servidor en modo sen xanelas. Neste momento, é necesario o modo sen cabeza para executarse.

fibjs admite dúas formas de sen cabeza, a saber, global sen cabeza e instancia sen cabeza.

No modo global, todas as fiestras funcionarán en modo sen cabeza, independentemente de como se crea a xanela. Executar un modelo global, designado como --headlessopcións de inicio.

1
fibjs --headless test.js

Chamar á gui.configconfiguración do inicio do programa tamén pode acadar o mesmo obxectivo:

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

En Linux Server, aínda que o modo sen cabeza non require soporte de escritorio, o módulo básico cef aínda necesita un soporte de compoñentes básicos, polo que xorg necesita ser instalado:

1
apt install xorg

Nalgunhas aplicacións, a interacción do usuario e o procesamento automatizado son necesarios ao mesmo tempo. Neste momento, pode especificar unha xanela para usar o modo sen cabeza por separado:

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

Cómpre ter en conta que, debido a que non hai interacción do usuario, a instancia sen cabeza non pode ser pechada polo usuario polo que o programa debe pecharse cando non sexa necesario, se non, o proceso non sairá automaticamente por mor da existencia da instancia.

Interface DevTools

O protocolo Chrome DevTools permite ferramentas para probar, inspeccionar, depurar e configurar Chromium, Chrome e outros navegadores baseados en Blink. O protocolo Chrome DevTools divídese en varios dominios (DOM, depurador, rede, etc.) e cada dominio define os correspondentes comandos compatibles e os eventos relacionados.

fibjs encapsula a interface de acceso de cdp, podes facer un uso completo da interface cdp integrada de cef para depurar directamente páxinas web en WebView. A interface usada por WebView para acceder ao servizo cdp é WebView.dev. Para obter documentación detallada de cdp, consulte: https://chromedevtools.github.io/devtools-protocol/

Abaixo amósanse algúns fragmentos de código de uso común para amosar como usar o dev para manipular os elementos da páxina. Podes consultar a demostración detallada do uso test/cef_test.js.

Consulta o 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 o funcionamento do rato

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 o funcionamento do teclado

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 da páxina

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

Simular usuario-axente

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

Escoita os eventos

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

Soporte multimedia

Debido a problemas de copyright, a distribución binaria de cef normalmente non inclúe a descodificación de mp4 e mp3. Non obstante, cef contén descodificación webm de código aberto. Para aplicacións de escritorio independentes, recoméndase usar codificación webm con licenza libre para procesar audio e vídeo.

resumo

A través da introdución desta sección, podemos desenvolver rapidamente as nosas propias aplicacións de escritorio, converter HTML en imaxes ou PDF e usar a potente interface de cdp para establecer un motor de automatización de procesos e probas front-end.

👉 [ Actualización actualizada do módulo do servidor ]