Guía de desarrollo de guías

Desarrolle rápidamente aplicaciones de escritorio

Iniciar una aplicación de escritorio en fibjs es muy rápido. Simplemente escriba el siguiente código para abrir y ejecutar una ventana de WebView:

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

Este código abrirá una ventana WebView integrada en el sistema operativo e ingresará al sitio web fibjs.org.

Sin embargo, el WebView integrado del sistema no puede satisfacer el poderoso desarrollo de aplicaciones de escritorio en términos de función de interfaz o compatibilidad. Por lo tanto, fibjs también admite el desarrollo de aplicaciones basadas en cef.

Introducción a cef

El nombre completo de cef es Chromium Embedded Framework, que es un proyecto de código abierto basado en Google Chromium. El proyecto Google Chromium está desarrollado principalmente para aplicaciones de Google Chrome, y el objetivo de cef es proporcionar soporte de navegador integrable para aplicaciones de terceros. cef aísla el código complejo de Chromium y Blink subyacentes, y proporciona un conjunto de API estables a nivel de producto, lanza ramas que rastrean versiones específicas de Chromium y paquetes binarios. La mayoría de las funciones de cef proporcionan ricas implementaciones predeterminadas, lo que permite a los usuarios realizar la menor personalización posible para satisfacer sus necesidades. Los escenarios de aplicación típicos de cef incluyen:

  • Inserte un control de navegador compatible con HTML5 en una aplicación local existente.
  • Cree un navegador de shell liviano para alojar aplicaciones desarrolladas principalmente con tecnología web.
  • Algunas aplicaciones tienen marcos de dibujo independientes y usan cef para renderizar contenido web sin conexión.
  • Utilice cef para realizar pruebas web automatizadas.

cef3 es el cef de próxima generación basado en la arquitectura multiproceso de Chomuim Content API y tiene las siguientes ventajas:

  • Rendimiento y estabilidad mejorados (JavaScript y los complementos se ejecutan en un proceso separado).
  • Soporte de pantalla Retina.
  • Admite la aceleración de GPU de WebGL y CSS 3D.
  • Funciones de vanguardia como WebRTC y entrada de voz.
  • Proporcione mejores pruebas de IU automatizadas a través del protocolo de depuración remota de DevTools y ChromeDriver2.
  • La capacidad de obtener características y estándares web actuales y futuros con mayor rapidez.

Prepare el entorno operativo

El paquete binario de cef3 se puede descargar desde [ esta página ] La versión actual de fibjs es v90. Contiene todos los archivos necesarios para compilar una versión específica de cef3 en una plataforma específica (Windows, Mac OS X y Linux). La estructura del directorio de las diferentes plataformas es diferente, debe reorganizar la estructura del directorio de recursos después de la descarga.

Sistema operativo Windows (Windows)

En la estructura de carpetas de la plataforma Windows es la siguiente, generalmente puede dentro de paquetes binarios Releasey Resourcesencontrar todos los archivos en el 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)

En la estructura de carpetas de la plataforma Linux es la siguiente, generalmente puede dentro de paquetes binarios Releasey Resourcesencontrar todos los archivos en el 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, debido a que no hay soporte para el entorno de escritorio, solo puede --headlessejecutar el modo cuando se ejecuta en modo de ventana cuando no es necesario instalar xorg:

1
apt install xorg

En algunos gpu, el soporte de escritorio Linux es incorrecto, pero también es necesario aumentar la --disable-gpuopción de inicio: la representación de gpu está deshabilitada.

Plataforma Mac X (Mac OS X)

En la estructura de carpetas de la plataforma Mac X es la siguiente, generalmente dentro del paquete binario puede Release/Chromium Embedded Framework.frameworkencontrar todos los archivos en el directorio, si descarga el cefclient, entonces necesita abrir la aplicación de Contenidos para encontrar el archivo apropiado:

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

También puede usar la gui.configconfiguración cef_pathpara especificar la ruta binaria cef y, por lo tanto, más flexibilidad para implementar el entorno operativo. Cuando no se establece cef_pathla hora, los binarios cef deben implementarse en el mismo directorio que el archivo ejecutable fibjs.

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

Prepare el entorno operativo y luego ejecute el siguiente código

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

También verá una ventana del navegador cargada con el sitio web oficial de fibjs, pero su motor ya es el último kernel de Chrome. Tenga en cuenta que aquí es necesario cancelar la typeopción; de lo contrario, se abrirá la vista web construida por el sistema operativo.

La aplicación básica de la interfaz gráfica de usuario es muy simple y se puede realizar rápidamente consultando el documento de la interfaz gráfica de usuario, por lo que no la repetiré. A continuación, presentamos principalmente algunos métodos de aplicación especiales.

Acoplamiento de servicio de front-end y back-end

Las aplicaciones de escritorio basadas en la web suelen tener dos métodos de extensión, uno es la extensión WebView y el otro es para separar el front-end y el back-end localmente. En el método anterior, WebView se amplía de forma invasiva y el entorno operativo ya no es compatible con los navegadores estándar. El último método requiere que se abra un servidor http localmente, lo que a su vez hace que la interfaz de servicio quede expuesta al exterior.

fibjs para aplicaciones de escritorio extendidas, basado en un protocolo de escalabilidad cef será WebView y los fibjs Handlerjuntos, de modo que el proceso WebView se pueda conectar directamente al Handlerprocesador correspondiente , totalmente compatible con el paradigma B / S convencional desarrollado simultáneamente en front- end y back-end. garantizar la seguridad y la portabilidad. Al mismo tiempo, el código de front-end y back-end es completamente consistente con el desarrollo estándar de front-end y back-end de B / S, que se puede desarrollar y depurar en el navegador, y luego trasplantarlo directamente a una aplicación local. .

procesador de back-end de fibjs configurado de manera, a través de gui.configdone.

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 dos back-end, es un cefprotocolo de dominio de prueba, estático apuntando a un directorio cef_files_pathy el otro es httpel dominio cef_test, apuntando a una ruta.

En cef, existen algunas restricciones en el procesamiento de protocolos no estándar, como no admitir datos de publicación en el servidor. Por lo tanto, si desea una mejor comunicación compatible entre el front-end y el back-end, debe definir http o https back Por supuesto, este back-end no pasa El protocolo de red completa la comunicación, pero está conectado directamente dentro del proceso.

Para saber cómo desarrollar el backend de Handler, consulte:hello, world.

Modo sin ventanas

En escenarios de pruebas automatizadas o automatización de procesos, el proceso de operación comercial no requiere la interacción del usuario, por lo que puede ejecutarse automáticamente en el servidor en un modo sin ventanas. En este momento, se requiere el modo sin cabeza para ejecutar.

fibjs admite dos formas de sin cabeza, a saber, sin cabeza global y sin cabeza de instancia.

En el modo global, todas las ventanas se ejecutarán en modo sin cabeza, independientemente de cómo se cree la ventana. Ejecutar un modelo global, se designan --headlessopciones de inicio.

1
fibjs --headless test.js

La gui.configconfiguración de llamada al inicio del programa también puede lograr el mismo objetivo:

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

En Linux Server, aunque el modo sin cabeza no requiere soporte de escritorio, el módulo básico cef aún necesita soporte de componentes básicos, por lo que es necesario instalar xorg:

1
apt install xorg

En algunas aplicaciones, se requiere la interacción del usuario y el procesamiento automatizado al mismo tiempo. En este momento, puede especificar una ventana para usar el modo sin cabeza por separado:

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

Cabe señalar que debido a que no hay interacción del usuario, el usuario no puede cerrar activamente la instancia sin cabeza, por lo que el programa debe cerrarse cuando no sea necesario, de lo contrario, el proceso no se cerrará automáticamente debido a la existencia de la instancia.

Interfaz de DevTools

El protocolo Chrome DevTools permite que las herramientas prueben, inspeccionen, depuren y configuren Chromium, Chrome y otros navegadores basados ​​en Blink. El protocolo Chrome DevTools se divide en varios dominios (DOM, depurador, red, etc.), y cada dominio define los correspondientes comandos compatibles y eventos relacionados.

fibjs encapsula la interfaz de acceso de cdp, puede hacer un uso completo de la interfaz cdp incorporada de cef para depurar páginas web directamente en WebView. La interfaz utilizada por WebView para acceder al servicio cdp es WebView.dev. Para obtener documentación detallada de cdp, consulte: https://chromedevtools.github.io/devtools-protocol/

A continuación se enumeran algunos fragmentos de código de uso común para mostrar cómo usar dev para manipular elementos de la página. Puede consultar la demostración de uso detallada test/cef_test.js.

Consultar 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 funcionamiento del mouse

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

Simular usuario-agente

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

Escuche los 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 derechos de autor, la distribución binaria de cef generalmente no incluye la decodificación de mp4 y mp3. Sin embargo, cef contiene decodificación webm de código abierto. Para aplicaciones de escritorio independientes, se recomienda utilizar codificación webm con licencia gratuita para procesar audio y video.

resumen

A través de la introducción de esta sección, podemos desarrollar rápidamente nuestras propias aplicaciones de escritorio, renderizar html en imágenes o PDF, y usar la poderosa interfaz de cdp para establecer una prueba de automatización de front-end y un motor de automatización de procesos.

👉 [ Actualización en caliente del módulo del servidor ]