Так это выглядит интересно, правда?

В части 1 Почему вам следует использовать Qt / QML для вашего следующего кроссплатформенного приложения мы упоминали Qt для WebAssembly. Это было около 10 месяцев назад.

В разработке программного обеспечения все движется быстро, и Qt for WebAssembly перешла от технологии предварительного просмотра на поддерживаемую платформу.

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

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

WebAssembly

WebAssembly (сокращенно Wasm) - это двоичный формат инструкций для виртуальной машины на основе стека. Wasm разработан как переносимая цель для компиляции языков высокого уровня, таких как C / C ++ / Rust, что позволяет развертывать в Интернете клиентские и серверные приложения.

Этот формат почти так же быстр, как собственный машинный код, и теперь поддерживается всеми основными веб-браузерами.

По сути, WebAssembly позволяет выполнять код, написанный на разных языках, в любой среде, в которой встроена виртуальная машина WebAssembly.

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

Настраивать

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

По сути, нам нужно сделать две вещи: настроить компилятор Emscripten и Qt для Webassembly.

Emscripten

В Linux это что-то вроде:

# fetch Emscripten SDK and install target version
git clone https://github.com/emscripten-core/emsdk.git
cd emsdk
./emsdk install sdk-1.38.30-64bit
./emsdk activate --embedded sdk-1.38.30-64bit
source emsdk_env.sh

Точные требования и инструкции можно найти в официальных документах Emscripten.
В конце концов, если все пойдет хорошо, на вашем пути окажется как минимум em++.

Обратите внимание, что рекомендуется сборка 1.38.30, которая также поддерживает многопоточность, поэтому пока не экспериментируйте с другими сборками, поскольку в них будут проблемы (проверено :)

источник emsdk_env.sh важен для настройки допустимой среды Emscripten, поэтому не забывайте запускать его (каждый раз, когда вы открываете новый терминал)

Qt WebAssembly

Это еще проще. Загрузите установщик Qt со страницы загрузки Qt или откройте существующий Инструмент обслуживания Qt, если он у вас уже установлен.

В обоих случаях вам просто нужно выбрать Qt для WebAssembly, в моем случае я использовал последнюю версию Qt на момент написания, 5.13.2.

После завершения установки мы готовы к нашему Hello World.

Привет, WebAssembly

Итак, начнем с очевидного примера.

Создайте новый проект Qt / Qml с базовым содержимым:

import QtQuick 2.13
import QtQuick.Window 2.13
Window {
    visible: true
    width: 640
    height: 480
    title: qsTr("Hello WebAssembly")
    Text {
        anchors.centerIn: parent
        text: qsTr("Hello WebAssembly")
        color: "black"
    }
}

Если мы соберем и запустим его на нашей родной платформе, мы получим:

Что ж, именно то, что мы хотели, и работает как положено.

А теперь продолжим работу с настоящей WebAssembly. Если вы этого не сделали, вам нужно было настроить среду Emscripten, как указано выше: source /path-to-emsdk/emsdk_env.sh

Перейдите в свой новый проект и создайте каталог build (или как вы хотите его вызвать, чтобы сделать сборку вне исходного кода - необязательно). Затем просто вызовите новый qmake с поддержкой WebAssembly:

cd /path-to-hello-webassembly-project
mkdir build && cd build
/path-to-qt-with-webassembly/5.13.2/wasm_32/bin/qmake ..
make

Это займет некоторое время, особенно при первом запуске. Последующие запуски немного улучшатся, но на данный момент на моем i7–7700 это все еще занимает около 2 минут 32 секунды.
Обратите внимание, что флаг make -j не так полезен, поскольку сборка Emscripten уже распараллелена.

После этого вы получите кучу файлов в каталоге сборки, и одним из них будет файл projectname.html. Для запуска в браузере нам, как обычно, нужен веб-сервер. Вы можете использовать все, что захотите, для обслуживания этих статических файлов, но есть также удобный инструмент командной строки emrun, который вы можете использовать для этой цели, поскольку он уже доступен как часть среды Emscripten.
Итак, чтобы открыть наше приложение в браузере Firefox, можно сделать следующее: emrun — browser=firefox *.html

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

«Настоящие» приложения

Было весело создать простое Hello WebAssembly, но было бы еще лучше, если бы оно могло справиться с реальным приложением. Для удобства мы можем использовать приложения, представленные в предыдущих статьях.

Приложение Todo

В части-2 серии Почему стоит использовать Qt / QML для кроссплатформенной разработки мы разработали небольшое приложение Todo. Давайте повторим процесс сборки и посмотрим, будет ли это работать как веб-приложение.

git clone https://github.com/pkoretic/Todo && cd Todo
mkdir build && cd build
/path-to-qt-with-webassembly/5.13.2/wasm_32/bin/qmake ..
make
emrun --browser=firefox *.html

Сначала попробуйте, и он работает и выглядит почти так, как мы его разработали!

Примечание: мы заменили наш юникод плюс / - тяжелые знаки, поскольку они не поддерживаются текущим шрифтом:

У приложений нет доступа к системным шрифтам. Файлы шрифтов должны распространяться вместе с приложением, например, в ресурсах Qt. Сам Qt for WebAssembly включает один такой шрифт.

Приложение для прогнозов

Переходим к чему-то еще более сложному.

В части-3 мы сделали ТВ-приложение. Этот больше, использует изображения и сетевые запросы.

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

QtCreator

Для подробностей потребуется отдельная статья, но добавить поддержку QtCreator так же просто, как создать новый комплект с помощью компилятора Emscripten.

Для этого требуется добавить собственный emcc / em++ компилятор в Инструменты - Параметры - Комплекты - Компиляторы и новые qmake версии Qt. Затем оставшаяся часть - это создание набора с использованием тех, что описаны в официальной документации, и создание вашего приложения.

Заключение

Несмотря на то, что это на удивление приятно, все же существуют важные ограничения, о которых вы можете прочитать в официальных примечаниях к платформе.

Время сборки также не самое быстрое, но имейте в виду, что это были оптимизированные сборки (-O3), и на самом деле нет необходимости компилировать приложение в HTML при каждом изменении, поскольку мы можем очень быстро протестировать его на нашей платформе по умолчанию.

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

В конце концов, это действительно хороший прогресс, который мы видим. Имейте в виду, что Qt 5.13.x - это первый выпуск с Qt для WebAssmbly в качестве поддерживаемой платформы, поэтому в будущем мы можем ожидать еще большего.

Удачного кодирования.