博文 | 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
小课堂 | 如何用Qt Design Studio打造汽车仪表盘(第五部分)
小课堂 | 如何用Qt Design Studio打造汽车仪表盘(第五部分)

用Qt Design Studio设计您的汽车仪表盘界面。 设计师与开发者之间的工作关系可能很复杂,他们总像在说两种不同的语言。这种情况将一去不复返了!Qt的工具让设计师和开发者之间的合作比以往任何时候都更加容易而...

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

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

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

免费试用