Qt杂谈2.快速体验Qt for WebAssembly（Windows平台）

1 什么是WebAssembly？

WebAssembly是一种新的编码方式，可以在现代的网络浏览器中运行，它是一种低级的类汇编语言，具有紧凑的二进制格式，可以接近原生的性能运行，并为诸如C/C++等语言提供一个编译目标，以便它们可以在Web上运行。它也被设计为可以与JavaScript共存，允许两者一起工作。

2 什么是Emscripten？

Emscripten是一个开源的编译器，可以将C/C++的代码编译后高效运行在现代浏览器上面。Emscripten的底层是基于 LLVM 编译器。

3 安装步骤

• 先安装Qt5.15.1并选中MinGW 8.1.0 64-bit和WebAssembly（这个是Qt编译好的WebAssembly桌面库，选了这个就不用编译源代码了，可以直接用）；
• 由于Qt5.15.1中WebAssembly是由emsdk 1.39.7版本编译的，所以我们也要安装emsdk 1.39.7，使编译器保持一致，这样才能正常使用；
• 将emsdk目录下的.emscripten文件复制到用户目录并用绝对路径替换里面的路径，这样QtCreator才能正确识别emsdk工具链；
• 配置MinGW环境变量，使mingw32-make.exe可识别；
• 设置QtCreator的WebAssembly套件编译器为Emscripten Compiler。

3.1 安装Qt5.15.1

下载在线安装工具，qt-unified-windows-x86-3.2.3-online，至少选中红框中的两项进行安装：

3.2 安装emsdk

1. 获取源码git clone https://github.com/emscripten-core/emsdk.git
   
2. 进入emsdk目录执行emsdk install 1.39.7
   
3. 安装完成后执行emsdk activate --embedded 1.39.7
   

3.3 使用前配置

1. 将emsdk目录下的.emscripten文件复制到C:\Users\Administrator目录下（即用户目录），并修改为：

import os
NODE_JS = 'd:/emsdk/node/12.18.1_64bit/bin/node.exe'
PYTHON = 'd:/emsdk/python/3.7.4-pywin32_64bit/python.exe'
JAVA = 'd:/emsdk/java/8.152_64bit/bin/java.exe'
LLVM_ROOT = 'd:/emsdk/upstream/bin'
BINARYEN_ROOT = 'd:/emsdk/upstream'
EMSCRIPTEN_ROOT = 'd:/emsdk/upstream/emscripten'
TEMP_DIR = 'd:/emsdk/tmp'
COMPILER_ENGINE = NODE_JS
JS_ENGINES = [NODE_JS]

这里主要是将地址改为实际的地址，用绝对路径替换，QtCreator会根据这个文件识别emsdk的配置信息，不然识别不到em编译器。

2. 将D:\Qt\Tools\mingw810_64\bin目录加入环境变量，有必要，Qt for WebAssembly构建过程会使用到mingw32-make工具，不配置的话无法正常构建；
3. 打开QtCreator配置下，我的在D:\Qt\Tools\QtCreator\bin\qtcreator.exe
   

4 简单使用

1. 启动QtCreator，随便打开一个项目：
   
2. 选择构建套件：
   
3. 构建项目：
   
4. 构建完成后，生成如下文件：
   
5. 在构建目录执行指令D:\emsdk\upstream\emscripten\emrun.bat --browser=firefox application.html在浏览器上运行一下：
   

5 有何不足？

看到上面那个图没有，我想输入中文，但是无法输入，算是支持的不够好吧，而且无法识别本地硬盘。多线程和数据库貌似也不行，这个我并未测试。

1. 当前支持的Qt模块

• qtbase
• qtdeclarative
• qtquickcontrols2
• qtwebsockets
• qtsvg
• qtcharts
• qtmqtt

2. 当前不支持的Qt模块：

• qtmultimedia
• qtwebview

其它模块未测试，可能行也可能不行。

6 离线包下载

鉴于安装过程过于缓慢，我将离线包上传了一份，点击下载 提取码：i5mj