Guida allo sviluppo della guida

Sviluppa rapidamente applicazioni desktop

L'avvio di un'applicazione desktop in fibjs è molto veloce, basta digitare il seguente codice per aprire ed eseguire una finestra WebView:

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

Questo codice aprirà una finestra WebView integrata nel sistema operativo e accederà al sito Web fibjs.org.

Tuttavia, la visualizzazione Web integrata del sistema non può soddisfare il potente sviluppo di applicazioni desktop in termini di funzionalità dell'interfaccia o compatibilità. Pertanto, fibjs supporta anche lo sviluppo di applicazioni basate su cef.

Introduzione a cef

Il nome completo di cef è Chromium Embedded Framework, che è un progetto open source basato su Google Chromium. Il progetto Google Chromium è sviluppato principalmente per le applicazioni Google Chrome e l'obiettivo di cef è fornire supporto browser integrabile per applicazioni di terze parti. cef isola il codice complesso di Chromium e Blink sottostanti e fornisce un set di API stabili a livello di prodotto, rilascia branch che tengono traccia di specifiche versioni di Chromium e pacchetti binari. La maggior parte delle funzionalità di cef fornisce implementazioni predefinite complete, consentendo agli utenti di effettuare la minima personalizzazione possibile per soddisfare le proprie esigenze. Gli scenari applicativi tipici di cef includono:

  • Incorpora un controllo browser compatibile con HTML5 in un'applicazione locale esistente.
  • Crea un browser shell leggero per ospitare applicazioni sviluppate principalmente con tecnologia Web.
  • Alcune applicazioni dispongono di framework di disegno indipendenti e utilizzano cef per eseguire il rendering di contenuti Web offline.
  • Usa cef per eseguire test web automatizzati.

cef3 è il cef di nuova generazione basato sull'architettura multiprocesso Chomuim Content API e presenta i seguenti vantaggi:

  • Prestazioni e stabilità migliorate (JavaScript e plug-in vengono eseguiti in un processo separato).
  • Supporta il display Retina.
  • Supporta l'accelerazione GPU di WebGL e CSS 3D.
  • Funzionalità all'avanguardia come WebRTC e input vocale.
  • Fornisci migliori test automatizzati dell'interfaccia utente tramite il protocollo di debug remoto DevTools e ChromeDriver2.
  • La capacità di ottenere più velocemente funzionalità e standard Web attuali e futuri.

Preparare l'ambiente operativo

Il pacchetto binario di cef3 può essere scaricato da [ questa pagina ] La versione corrente di fibjs è la v90. Contiene tutti i file necessari per compilare una specifica versione di cef3 su una piattaforma specifica (Windows, Mac OS X e Linux). La struttura della directory delle diverse piattaforme non è molto diversa, è necessario riorganizzare la struttura della directory delle risorse dopo il download.

Sistema operativo Windows (Windows)

Sulla struttura delle cartelle della piattaforma Windows è la seguente, di solito è possibile all'interno di pacchetti binari Releasee Resourcestrovare tutti i file nella directory:

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)

Sulla struttura delle cartelle della piattaforma Linux è la seguente, di solito è possibile all'interno di pacchetti binari Releasee Resourcestrovare tutti i file nella directory:

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

Su Linux Server poiché non esiste supporto per l'ambiente desktop, è possibile --headlesseseguire la modalità solo durante l'esecuzione in modalità finestra quando non è necessario installare xorg:

1
apt install xorg

In alcune gpu il supporto per desktop Linux non è valido, ma è anche necessario aumentare l' --disable-gpuopzione di avvio è disabilitato il rendering della gpu.

Piattaforma Mac X (Mac OS X)

Sulla piattaforma Mac X la struttura delle cartelle è la seguente, di solito puoi trovare all'interno del pacchetto binario Release/Chromium Embedded Framework.frameworktutti i file nella directory, se scarichi il cefclient, allora devi aprire l'app dei Contenuti per trovare il file appropriato:

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

È inoltre possibile utilizzare le gui.configimpostazioni cef_pathper specificare il percorso binario cef e quindi una maggiore flessibilità per distribuire l'ambiente operativo. Quando non è impostata cef_pathl'ora, i binari cef devono essere distribuiti nella stessa directory del file eseguibile fibjs.

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

Preparare l'ambiente operativo, quindi eseguire il codice seguente

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

Vedrai anche una finestra del browser caricata con il sito web ufficiale di fibjs, ma il suo motore è già l'ultimo kernel di Chrome. Nota qui è necessario annullare l' typeopzione, altrimenti si aprirà la visualizzazione web del sistema operativo.

L'applicazione di base di gui è molto semplice e può essere realizzata rapidamente facendo riferimento al documento gui, quindi non la ripeterò. Successivamente, introduciamo principalmente alcuni metodi di applicazione speciali.

Docking del servizio front-end e back-end

Le applicazioni desktop basate sul Web di solito hanno due metodi di estensione, uno è l'estensione WebView e l'altro consiste nel separare localmente il front-end e il back-end. Nel primo metodo, WebView è esteso in modo invasivo e l'ambiente operativo non è più compatibile con i browser standard. Quest'ultimo metodo richiede l'apertura locale di un server http, che a sua volta fa sì che l'interfaccia del servizio venga esposta all'esterno.

fibjs per applicazioni desktop estese, basato su un protocollo di scalabilità cef sarà WebView e fibjs Handlerinsieme, in modo che il processo WebView possa essere collegato direttamente al Handlerprocessore corrispondente , pienamente compatibile con il paradigma B / S convenzionale sviluppato contemporaneamente front e posteriori , Per garantire sicurezza e portabilità. Allo stesso tempo, il codice front-end e back-end è completamente coerente con lo sviluppo standard B/S front-end e back-end, che può essere sviluppato e sottoposto a debug nel browser e quindi trapiantato direttamente nelle applicazioni locali.

fibjs modo configurato per il processore back-end, attraverso 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 } } });

Questo codice definisce due back-end, è un cefprotocollo di dominio di prova, statico che punta a una directory cef_files_pathe l'altro è httpil dominio cef_test, che punta a una route.

In cef, ci sono alcune restrizioni sull'elaborazione di protocolli non standard, come non supportare i dati di posta al server, quindi se vuoi una comunicazione front-end più compatibile, devi definire back-end http o https. Ovviamente questo back-end non passa Il protocollo di rete completa la comunicazione, ma è direttamente connesso all'interno del processo.

Per informazioni su come sviluppare il backend Handler, fare riferimento a:hello, world.

Modalità senza finestre

Negli scenari di test automatizzati o di automazione dei processi, il processo operativo aziendale non richiede l'interazione dell'utente, quindi può essere eseguito automaticamente sul server in modalità senza finestra. A questo punto, per l'esecuzione è necessaria la modalità headless.

fibjs supporta due modalità di headless, ovvero global headless e instance headless.

In modalità globale, tutte le finestre verranno eseguite in modalità headless, indipendentemente da come viene creata la finestra. Esegui un modello globale, è designato come --headlessopzioni di avvio.

1
fibjs --headless test.js

Anche la gui.configconfigurazione della chiamata all'avvio del programma può raggiungere lo stesso obiettivo:

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

Sotto Linux Server, sebbene la modalità headless non richieda il supporto desktop, il modulo di base cef necessita ancora del supporto di alcuni componenti di base, quindi xorg deve essere installato:

1
apt install xorg

In alcune applicazioni sono richieste contemporaneamente l'interazione dell'utente e l'elaborazione automatizzata.In questo momento, puoi specificare una finestra per utilizzare la modalità headless separatamente:

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

Va notato che poiché non c'è interazione dell'utente, l'istanza headless non può essere chiusa attivamente dall'utente, quindi il programma deve essere chiuso quando non è necessario, altrimenti il ​​processo non verrà chiuso automaticamente a causa dell'esistenza dell'istanza.

Interfaccia DevTools

Il protocollo Chrome DevTools consente agli strumenti di testare, ispezionare, eseguire il debug e configurare Chromium, Chrome e altri browser basati su Blink. Il protocollo Chrome DevTools è suddiviso in più domini (DOM, Debugger, Network e così via) e ciascun dominio definisce i corrispondenti comandi supportati e gli eventi correlati.

fibjs incapsula l'interfaccia di accesso di cdp, puoi sfruttare appieno l'interfaccia cdp integrata di cef per eseguire il debug diretto delle pagine Web in WebView. L'interfaccia utilizzata da WebView per accedere al servizio cdp è WebView.dev. Per la documentazione dettagliata di cdp, fare riferimento a: https://chromedevtools.github.io/devtools-protocol/

Di seguito sono elencati alcuni frammenti di codice comunemente usati per mostrare come utilizzare dev per manipolare gli elementi della pagina. È possibile fare riferimento alla dimostrazione di utilizzo dettagliata test/cef_test.js.

Interroga il 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; }

Simula il funzionamento 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); }

Simula il funzionamento della tastiera

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

Screenshot della pagina

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 agente utente

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

Ascolta gli eventi

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

Supporto multimediale

A causa di problemi di copyright, la distribuzione binaria di cef di solito non include la decodifica di mp4 e mp3. Ma cef contiene la decodifica webm open source.Per le applicazioni desktop indipendenti, si consiglia di utilizzare la codifica webm con licenza gratuita per elaborare audio e video.

sommario

Attraverso l'introduzione di questa sezione, possiamo sviluppare rapidamente le nostre applicazioni desktop, rendere HTML in immagini o PDF e utilizzare la potente interfaccia di cdp per stabilire un test di automazione front-end e un motore di automazione dei processi.

👉 [ Aggiornamento a caldo del modulo server ]