博文 | Qt for WebAssembly入门

January 18, 2019 Richard Lin

 

本文翻译自: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源代码,可以使用在线安装程序进行安装:

qtmaintenancetoolsources

从源代码编译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.html Qt HTML container
qtloader.js Qt JS API for loading Qt apps
app.js emscripten app runtime and JS API
app.wasm emscripten app binary

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

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

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

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

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

Qt 模块 gzip brotli
Core Gui 2.8MB 2.1MB
Core Gui Widgets 4.3MB 3.2MB
Core Gui Widgets Quick Charts 8.6MB 6.3MB


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

Slate

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

slate-wasm

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

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

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

The post Qt for WebAssembly入门 appeared first on Qt Chinese blog.

 

Previous
Built with Qt | Qtz助力MerlinCryption保护加密信息
Built with Qt | Qtz助力MerlinCryption保护加密信息

选择Qt之后,MerlinCryption从用C#编写基于软件的解决方案,转变为用C++编写更安全、基于硬件的应用程序。

Next Article
Built with Qt | Zühlke
Built with Qt | Zühlke

Zühlke选用Qt应用开发框架的一个重要原因在于Qt Quick技术能让用户在使用可靠的Qt API的同时,快速开发现代多点触控的用户界面。

下载Qt商业试用版,创建流畅、高性能、直观的UI、应用及嵌入式设备

免费试用