Qt：靠谱点了！基于WebAssembly开发网页端

序言

Qt for WebAssembly，是Qt在2018年发布的技术，于5.12加入到Qt，官方对此技术介绍如下：

https://www.qt.io/blog/2018/05/22/qt-for-webassembly

简单的说，这是一个让Qt程序可以直接跑在web中的一个方法，具体流程如下：

使用Emscripten作为platfrom静态编译Qt工程，把整个工程和Qt环境打包编译成wasm可执行文件，配合html套壳一起加载到浏览器中，然后浏览器会提供一个虚拟化环境运行wasm，程序运行起来后所有的图形结果通过一个canvas输出。

相比之前WebGL技术这样的远程运行技术，这一次WebAssembly是真的把Qt程序跑在了浏览器本地上，实现了性能，效果的保证。总体靠谱得多。

关于WebAssembly详细描述和资料，这里不再累述，请直接参考Qt官方文档：

如果你想真的通过WebAssembly开发程序，我也建议务必看完以下链接里所有资料，这会帮你节约很多时间

https://wiki.qt.io/Qt_for_WebAssembly

https://www.qt.io/cn/blog/2019/01/18/getting-started-qt-webassembly

https://www.youtube.com/watch?v=W3WC-VpKdGQ&t=1319s

作为一个面世2年的技术，这项技术已经被多位前辈介绍，但是大多都是草草带过没有涉及很多细节，因此本文会相对整体介绍，看完本文后可以构建一个比较满意的工程。

---

环境准备

系统：Ubuntu 18.04 64bit

注：我是在虚拟机里面安装的是原版系统，并且进行了常规更新（update/upgrade），我建议为了避免奇怪的环境问题，尽量使用虚拟机安装环境，虽然Qt支持Windows和macOS下使用WebAssembly，但是我不建议在这两个系统下操作。

注2：请不要过多担心系统问题，因为编译后的产物例如wasm、html，都是跨平台的，无所谓是通过哪个系统编译出来的。

Qt源码：qt-everywhere-src-5.14.2.tar.xz

源码下载地址：http://download.qt.io/archive/qt/5.14/5.14.2/single/

环境配置参数

sudo apt-get install vim git

sudo apt-get install gcc g++ make libgl1-mesa-dev libglu1-mesa-dev libssl1.0-dev

sudo apt-get install libssl-dev

sudo apt-get install libfontconfig1-dev libfreetype6-dev libx11-dev libxext-dev libxfixes-dev libxi-dev libxrender-dev libxcb1-dev libx11-xcb-dev libxcb-glx0-dev libxkbcommon-x11-dev libxcb-keysyms1-dev libxcb-image0-dev libxcb-shm0-dev libxcb-icccm4-dev libxcb-sync0-dev libxcb-xfixes0-dev libxcb-shape0-dev libxcb-randr0-dev libxcb-render-util0-dev

sudo apt-get install python

sudo apt-get install openjdk-8-jdk

Emscripten配置

git clone https://github.com/emscripten-core/emsdk.git
cd em