Qt中搭建WebAssembly

Qt适合emsdk的版本，参考官网: Qt for WebAssembly | Qt 5.15

【踩过的坑】

1.  Qt5.15.2的目录下已经包含了wasm编译所需要的库和环境，默认路径在 5.15.2/wasm_32下，但是wasm对应的emscripten版本是1.39.7，可以通过输入命令行（先cd到你的pro工程目录下）的方式来获取版本信息，所以你需要下载并安装emscripten1.39.7版本。下文有介绍安装方式。

D:\Qt\Qt5.15.2\5.15.2\wasm_32\bin\qmake 你的项目.pro CONFIG+=wasm

 

2. Qt官网告诉我们Qt5.15.XXXX搭配emscripten1.39.8版本最合适，奈何我们的项目中使用了

EM_ASYNC_JS这个宏，而这个宏是在更高版本的emscripten中才有的。在GitHub上我也找到这个宏的前世今生 Add EM_ASYNC_JS for native async function support · Issue #9709 · emscripten-core/emscripten · GitHub ，它是EM_JS的升级版。于是我尝试将项目中的EM_ASYNC_JS 替换为 EM_JS，并且搭配1.39.8的版本去编译，最后编译报错，不支持新的js语法。

 3. 再三思量后，还原项目代码，并决定使用最新版的emscripten，目前最新版是3.1.1

 4. 另外我在实际操作中，发现Debug版本的很多问题，Release就没有这种坑。

【安装emscripten】

1. 将代码克隆到本地，我的存放在D:\emsdk\emsdk-latest

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

如果没有安装git工具，可以直接下载并解压即可。

2. 打开cmd并cd到 D:\emsdk\emsdk-latest

   输入安装命令 emsdk install latest 如果这条命令不行，

  就用 emsdk install --global latest

   输入激活命令 emsdk activate latest

   执行 emsdk_env.bat 脚本，配置临时环境变量

   检查一下是否配置成功  em++ --version ，能看到版本信息表示成功了。

如果需要安装其他版本的emscripten，则在2步骤替换为 emsdk install 1.39.8 和

emsdk activate --embedded 1.39.8 这两条命令即可

小小建议：因为emsdk依赖python，Java，node等等工具，而emsdk内部已经集成了这些工具。而为了防止与其他版本工具和库发生冲突，尽量采用emsdk临时环境变量的方式来执行各种操作，因为临时环境变量中配置了自己目录下的python，Java，node等等工具。 

【安装Qt5.15.2】

步骤1. 先下载安装器 Index of /official_releases/online_installers 因为之后的高版本都需要通过安装器的方式才可以安装。

选择Qt5.15.2，并至少要勾选WebAssembly和源码。

我的安装路径是：D:\Qt\Qt5.15.2

 

步骤2. 打开cmd，并cd到 D:\Qt\Qt5.15.2\5.15.2\Src

步骤3. 运行 D:\emsdk\emsdk-latest\emsdk_env.bat 配置emscripten的临时环境变量。

运行以下命令，配置Qt源代码编译的临时环境变量：(注意这是1条命令)

set PATH=D:\Qt\Qt5.15.2\5.15.2\mingw81_64\bin;D:\Qt\Qt5.15.2\Tools\mingw810_64\bin;%PATH%

步骤4. 在qt的src目录下执行如下命令（请注意这是一条命令，不是2条），最好先备份src源码

configure -xplatform wasm-emscripten -nomake examples -feature-thread -prefix D:/Qt/Qt5.15.2/5.15.2/wasm

-prefix 是安装目录，可以修改成自己的目录

如出现以下错误：

原因及对应操作：没有配置mingw成系统环境变量或临时变量，即使配置了也使用默认的msvc环境，此时应使用如下命令-platform win32-g++指定编译平台： 

configure -no-warnings-are-errors -xplatform wasm-emscripten -platform win32-g++ -nomake examples -feature-thread -prefix D:/Qt/Qt5.15.2/5.15.2/wasm

步骤5. 编译qt源代码: mingw32-make –j4       j4表示用4线程cpu去编译

步骤6. 安装: mingw32-make install

上面5、6步骤实际上就是D:\Qt\Qt5.15.2\Tools\mingw810_64\bin\ mingw32-make.exe –j4 只是因为在第3步骤的时候设置了环境变量，所以才可以省略路径。

做好心理准备：编译和安装过程是十分漫长的。

若一切正常，则在安装目录可以看到安装后的文件。

【在命令行中编译项目】

1. 打开cmd。（此处最好是打开Qt-Mingw的命令行，否则可能出错）

2. cd到你的pro所在的项目目录：E:\lfworkspace\project\gitlab\你的项目路径

3. 配置临时环境变量，在上面的cmd中执行

   D:\emsdk\emsdk-latest\emsdk_env.bat

4.  qmake工程，执行

D:\Qt\Qt5.15.2\5.15.2\wasm\bin\qmake 你的项目.pro CONFIG+=wasm

5. 编译工程，执行

   D:\Qt\Qt5.15.2\Tools\mingw810_64\bin\mingw32-make.exe -j4

6. 没报错就会生成以下文件

 

【在QtCreator中编译项目】

1. 打开Qt5.15.2自带的QtCreator6.0.1

2. 菜单—>工具—>选项—>Kits—>编译器—>添加—>Custom—>C，添加Emscripten C编译器的配置，配置如下：

3. 按照2的步骤添加Emscripten C++的编译器，配置如下：

 4. 配置QtVersion，新增自定义的WebAssembly版本，如下图：

我们发现，在手动配置的上方，Qt默认自带了WebAssembly配置，就是文档上述中所说的wasm_32这个目录下的编译环境，它是Emscripten1.39.7版本的，不满足当前项目要求，所以要重新配置。

5. 配置Kits项，新增自定义的编译器。

我们也发现有一个默认的WebAssembly编译器，不要使用，仍然选择自定义的版本。

6. 修改工程配置，打开 你的项目.pro工程，选择配置如下图：

7. 设置编译参数，如下图：

注意qmake.exe是不是5.15.2/wasm目录下的，不要选5.15.2/wasm_32目录下的那个。

8. 配置设备

9. 编译。

10. 发布。