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 MagicDevicePlugin.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\DobotLink\dobotlinkpro\DobotLinkPro\Plugins\MagicDevicePlugin
3. 配置临时环境变量，在上面的cmd中执行
D:\emsdk\emsdk-latest\emsdk_env.bat
4. qmake工程，执行
D:\Qt\Qt5.15.2\5.15.2\wasm\bin\qmake MagicDevicePlugin.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. 修改工程配置，打开Plugin/ MagicDevicePlugin /MagicDevicePlugin.pro工程，选择配置如下图：
7. 设置编译参数，如下图：
注意qmake.exe是不是5.15.2/wasm目录下的，不要选5.15.2/wasm_32目录下的那个。
8. 配置设备
9. 编译。
10. 发布。
标签：WebAssembly,Qt5.15,emscripten,Qt,编译,wasm,搭建,emsdk 来源： https://blog.csdn.net/c1s2d3n4cs/article/details/122739295