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

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

Настольное приложение в 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 обратно. -ends Конечно, этот бэкэнд не проходит Сетевой протокол завершает обмен данными, но напрямую подключается к процессу.

Информацию о том, как разработать бэкэнд обработчика, см. В следующих разделах: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 для создания интерфейса автоматизации тестирования и механизма автоматизации процессов.

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