Руководство по развитию

Быстро разрабатывать настольные приложения

Настольное приложение в fibjs запускается очень быстро. Просто введите следующий код, чтобы открыть и запустить окно WebView:

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

Этот код откроет окно WebView, встроенное в операционную систему, и перейдет на сайт fibjs.org.

Однако встроенный WebView системы не может удовлетворить потребности разработки мощных настольных приложений с точки зрения функции интерфейса или совместимости. Следовательно, fibjs также поддерживает разработку приложений на основе cef.

Введение в cef

Полное название cef - Chromium Embedded Framework, это проект с открытым исходным кодом, основанный на Google Chromium. Проект Google Chromium в основном разработан для приложений Google Chrome, а цель cef - обеспечить поддержку встраиваемого браузера для сторонних приложений. cef изолирует сложный код базовых Chromium и Blink и предоставляет набор стабильных API на уровне продукта, выпускает ветки, которые отслеживают определенные версии Chromium, и бинарные пакеты. Большинство функций cef предоставляют широкие возможности реализации по умолчанию, позволяя пользователям выполнять минимальную настройку для удовлетворения своих потребностей. Типичные сценарии применения cef включают:

  • Встраивайте элемент управления браузера, совместимый с HTML5, в существующее локальное приложение.
  • Создайте облегченный браузер-оболочку для размещения приложений, в основном разработанных с использованием веб-технологий.
  • Некоторые приложения имеют независимые фреймворки для рисования и используют cef для отрисовки веб-контента в автономном режиме.
  • Используйте cef для автоматического веб-тестирования.

cef3 - это cef следующего поколения, основанный на многопроцессорной архитектуре Chomuim Content API и обладающий следующими преимуществами:

  • Повышена производительность и стабильность (JavaScript и плагины выполняются в отдельном процессе).
  • Поддержка дисплея Retina.
  • Поддерживает GPU-ускорение WebGL и 3D CSS.
  • Авангардные функции, такие как WebRTC и голосовой ввод.
  • Обеспечьте лучшее автоматическое тестирование пользовательского интерфейса с помощью протокола удаленной отладки DevTools и ChromeDriver2.
  • Возможность быстрее получать текущие и будущие веб-функции и стандарты.

Подготовьте операционную среду

Бинарный пакет cef3 можно скачать с [ этой страницы ] Текущая версия fibjs - v90. Он содержит все файлы, необходимые для компиляции конкретной версии cef3 на определенной платформе (Windows, Mac OS X и Linux). Структура каталогов на разных платформах не сильно отличается, вам необходимо реорганизовать структуру каталогов ресурсов после загрузки.

Операционная система Windows (Windows)

На структуре папок платформы Windows , заключается в следующем, вы можете , как правило , в пределах бинарных пакетов Releaseи Resourcesнайти все файлы в каталоге:

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

Операционная система Linux (Linux)

На структуру папок платформы Linux выглядит следующим образом , вы можете , как правило , в пределах бинарных пакетов Releaseи Resourcesнайти все файлы в каталоге:

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

На Linux Server из-за отсутствия поддержки среды рабочего стола вы можете --headlessзапускать режим только при работе в оконном режиме, когда нет необходимости устанавливать xorg:

1
apt install xorg

У некоторых графических процессоров плохая поддержка Linux Desktop, но также необходимо увеличить параметр --disable-gpuзапуска, отключен рендеринг графических процессоров.

Платформа Mac X (Mac OS X)

На платформе Mac X структура папок выглядит следующим образом, обычно вы можете в двоичном пакете Release/Chromium Embedded Framework.frameworkнайти все файлы в каталоге, если вы загружаете cefclient, вам нужно открыть приложение Contents, чтобы найти соответствующий файл:

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

Вы также можете использовать gui.configнастройки, cef_pathчтобы указать двоичный путь cef, и, таким образом, большую гибкость для развертывания операционной среды. Если время не установлено cef_path, двоичные файлы cef должны быть развернуты в том же каталоге, что и исполняемый файл fibjs.

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

Подготовьте операционную среду, а затем запустите следующий код

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

Вы также увидите окно браузера, в котором загружен официальный сайт fibjs, но его движок уже является последним ядром Chrome. Обратите внимание, что здесь нужно отменить typeопцию, иначе откроется веб-просмотр, встроенный в ОС.

Основное применение графического интерфейса очень простое, и его можно быстро реализовать, обратившись к документу графического интерфейса, поэтому я не буду повторять его. Далее мы в основном представляем некоторые специальные методы применения.

Док-станция для внешних и внутренних сервисов

Настольные веб-приложения обычно имеют два метода расширения: один - это расширение WebView, а другой - для локального разделения внешней и внутренней частей. В первом методе WebView инвазивно расширяется, и операционная среда больше не совместима со стандартными браузерами. Последний метод требует, чтобы http-сервер был открыт локально, что, в свою очередь, заставляет интерфейс службы открываться извне.

fibjs для расширенных настольных приложений, основанный на масштабируемости протокола, cef объединяет WebView и fibjs Handlerвместе, так что процесс WebView может быть подключен непосредственно к соответствующему Handlerпроцессору, полностью совместим с традиционной парадигмой B / S, разработанной одновременно на передней и задней сторонах. обеспечить безопасность и портативность. В то же время внешний и внутренний код полностью соответствует стандартной интерфейсной и внутренней разработке B / S, которые можно разрабатывать и отлаживать в браузере, а затем напрямую переносить в локальные приложения.

Внутренний процессор fibjs настроен способом, через gui.configготово.

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

Этот код определяет два бэкэнда : это cefпротокол тестового домена, статический указывающий на каталог cef_files_path, а другой - httpдомен cef_test, указывающий на маршрут.

В cef есть некоторые ограничения на обработку нестандартных протоколов, такие как отсутствие поддержки отправки данных на сервер. Поэтому, если вам нужна более совместимая интерфейсная связь, вам необходимо определить внутренние серверы http или https. Конечно, этот бэкэнд не проходит. Сетевой протокол завершает обмен данными, но напрямую подключается к процессу.

О том, как разработать бэкэнд Handler, см. Здесь:hello, world.

Безоконный режим

В сценариях автоматического тестирования или автоматизации процессов процесс бизнес-операций не требует взаимодействия с пользователем, поэтому его можно автоматически запускать на сервере в безоконном режиме. В это время для работы требуется безголовый режим.

fibjs поддерживает два способа без заголовка, а именно глобальный без заголовка и экземпляр без заголовка.

В глобальном режиме все окна будут работать в режиме без заголовка, независимо от того, как окно создано. Запускаем глобальную модель, обозначены --headlessварианты запуска.

1
fibjs --headless test.js

Вызов gui.configконфигурации при запуске программы также может достичь той же цели:

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

В Linux Server, хотя безголовый режим не требует поддержки рабочего стола, базовый модуль cef по-прежнему нуждается в некоторой базовой поддержке компонентов, поэтому необходимо установить xorg:

1
apt install xorg

В некоторых приложениях одновременно требуется взаимодействие с пользователем и автоматическая обработка. В настоящее время можно отдельно указать окно для использования режима без заголовка:

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

Следует отметить, что из-за отсутствия взаимодействия с пользователем безголовый экземпляр не может быть активно закрыт пользователем, поэтому программа должна быть закрыта, когда она не нужна, иначе процесс не будет автоматически завершен из-за существования экземпляра.

DevTools интерфейс

Протокол Chrome DevTools позволяет инструментам тестировать, проверять, отлаживать и настраивать Chromium, Chrome и другие браузеры на основе Blink. Протокол Chrome DevTools разделен на несколько доменов (DOM, Debugger, Network и т. Д.), И каждый домен определяет соответствующие поддерживаемые команды и связанные события.

fibjs инкапсулирует интерфейс доступа cdp, вы можете в полной мере использовать встроенный интерфейс cdp cef для прямой отладки веб-страниц в WebView. Интерфейс, используемый WebView для доступа к службе cdp, - это WebView.dev. Подробную документацию по cdp см. По адресу : https://chromedevtools.github.io/devtools-protocol/

Ниже перечислены несколько часто используемых фрагментов кода, чтобы показать, как использовать dev для управления элементами страницы. Вы можете обратиться к подробной демонстрации использования test/cef_test.js.

Запросить 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; }

Имитация работы мыши

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

Имитация работы с клавиатурой

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

Скриншот страницы

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

Имитация User-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'); });

Слушайте события

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

Мультимедийная поддержка

Из-за проблем с авторским правом двоичный дистрибутив cef обычно не включает декодирование mp4 и mp3. Но cef содержит декодирование webm с открытым исходным кодом. Для независимых настольных приложений рекомендуется использовать свободно лицензированное кодирование webm для обработки аудио и видео.

резюме

Благодаря введению в этот раздел мы можем быстро разрабатывать наши собственные настольные приложения, преобразовывать html в изображения или PDF, а также использовать мощный интерфейс cdp для создания интерфейса автоматизации тестирования и механизма автоматизации процессов.

👉 [ Горячее обновление серверного модуля ]