Qt for WebAssembly入门

本文翻译自：Getting Started With Qt for WebAssembly
原文作者：Morten Johan Sørvig
校审：Richard Lin

我们曾去年的一篇博文中介绍了Qt for WebAssembly的部分功能。本篇我们将介绍如何快速入门：编译Qt库，编译应用程序以及最后部署应用程序。

Emscripten

第一步是安装emscripten。具体操作步骤，请参阅emscripten文档，同时请注意Qt需要一个类Unix宿主系统：GNU/Linux、MacOS或Windows的Linux子系统。完成后，您的系统路径中会存在一个能运行的em ++编译器：

$ em++ --version
emcc (Emscripten gcc/clang-like replacement) 1.38.16
(commit 7a0e27441eda6cb0e3f1210e6837cae4b080ab4c)

Qt for WebAssembly的应用程序也是基于Emscripten的应用程序。Qt利用了它的许多功能特性，应用程序的代码中也可以利用它们。

Qt

接下来，下载Qt 5.12源代码，可以使用在线安装程序进行安装：

从源代码编译Qt，并指定使用emscripten向wasm进行交叉编译：

$ ~/Qt/5.12.0/Src/configure -xplatform wasm-emscripten -nomake examples -prefix $PWD/qtbase
$ make module-qtbase module-qtdeclarative [other modules]

这种Qt编译与标准桌面编译有两点不同：它是静态编译，并且不支持多线程。取决于具体应用程序的框架和使用的功能，这里可能会产生一些问题。一种解决方法是利用“-static -no-feature-thread”进行一个独立的桌面Qt编译，然后基于它进行调试和修复问题。这种方式非常有效，因为在桌面平台上进行编译和调试的速度更快，而且您有一个高效的调试器。

您的应用

最后，编译应用程序。Qmake是当前可用的编译系统。

$ /path/to/qt-wasm/qtbase/bin/qmake
$ make

这将产生几个输出文件：

这里，app.wasm包含大部分（如果不是全部）应用程序和Qt代码，而.js文件则提供了加载和运行时的支持。

.html文件提供html页面结构，其中包含了作为<canvas>元素的应用程序。默认版本会在加载和解释阶段显示Qt的logo，并包含一个简单的HTML页面结构来保证应用程序能够使用整个浏览器视口。您可以将其替换为特定应用程序的商标，并与现有的html内容集成。

对于qtloader.js，我们的目标是拥有一个公共且稳定的API来加载Qt-based的应用程序，但我们暂时还实现该目标，因此该文件中的API是可能改变的。

这些文件是普通数据文件，可以从任何http服务器提供; 不需要安装任何特殊的服务器组件或插件。请注意，现在的浏览器不支持从本地文件系统加载。我使用Python http.server进行开发，效果很好。

部署应用程序时，我们建议使用支持压缩的服务器。下表给出了预期文件大小（对于主.wasm文件）：

gzip是一个很好的默认选择的压缩器，大多数Web服务器都提供支持。brotli提供了很好的压缩比，所有支持wasm的浏览器都支持它。

Slate

所有这些步骤的最终结果是在Web浏览器中运行您的应用程序，下面是由我的同事Mitch创建的Slate应用程序的实例。Slate是基于Qt Quick Controls 2的图像编辑器。

我们还提供了一个实时演示版本。如果您在这个博客前看过这个演示，它现在应该可以实际使用：可以进行本地文件访问，基本没有明显的问题。

对于那些下个月在柏林参加Qt世界峰会的人们：我期待着在那里见到您们。如果您不去现场，那么请点击此链接再次进入到网络研讨会中去。

更新：在编译指令中修改了配置字符串以包含-nomake examples，因为目前在在线程示例中它会崩溃，正如在注释中所提到的那样。这将在Qt 5.12.1中修复。