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 incorporable 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 shell lixeiro para aloxar aplicacións desenvolvidas principalmente con tecnoloxía web.
  • Algunhas aplicacións teñen marcos 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 de procesos múltiples 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 as funcións e estándares web actuais e futuros máis rápido.

Prepare o contorno 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 non é moi 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 malo Linux Desktop, 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 front end e posterior. 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 front-end e back-end estándar B / S, que se pode desenvolver e depurar no navegador e despois transplantalo directamente a aplicacións locais.

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 frontal mellor compatible, cómpre definir back-end http ou https. 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 comercial non require 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, sen cabeza global 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 de uso detallada 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. Pero 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

Mediante a 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 ]