win10&&Qt搭建WebAssembly环境

QtCreator上自带WebAssembly环境

勾选安装WebAssembly即可使用，如果想使用最新版的可看下面相关操作。

自己搭建emsdk最新版本在QtCreator上的WebAssembly环境

1. 安装emscripten编译器

使用对应版本编译：github官网源码
以最新版本为例子下载或git clone源码，执行如下命令：需要了解更详细的步骤可查看仓库相关文档。

emsdk install latest //安装最新版emsdk
emsdk activate latest //激活
emsdk_env.bat  //临时环境变量提供运行环境
em++ --version //查看安装版本

2. 安装Qt并编译Qt源码

Qt5.15.2需要通过在线安装器的方式才可以安装。
官方：http://download.qt.io/official_releases/online_installers/
中国科学技术大学：http://mirrors.ustc.edu.cn/qtproject/
清华大学：https://mirrors.tuna.tsinghua.edu.cn/qt/
中国互联网络信息中心：https://mirrors.cnnic.cn/qt/

必须安装WebAssembly，Sources，mingw编译器，其他可自行勾选。

cd /d F:/Qt5.15.2/5.15.2/Src //可以先备份Qt源码
F:\emsdk\emsdk_env.bat //配置emscripten临时环境变量
set PATH=F:\Qt5.15.2\5.15.2\mingw81_64\bin;F:\Qt5.15.2\Tools\mingw810_64\bin;%PATH%
configure -no-warnings-are-errors -xplatform wasm-emscripten -platform win32-g++ -nomake examples -feature-thread -prefix F:/Qt5.15.2/5.15.2/wasm //指定编译平台和安装目录，支持多线程
F:\Qt5.15.2\Tools\mingw810_64\bin\mingw32-make.exe –j4      //编译qt源代码     
F:\Qt5.15.2\Tools\mingw810_64\bin\mingw32-make.exe install

3. 命令行cmd中编译项目

设置webassembly临时环境，用之前编译出来的emscripten编译器qmake构建项目，路径为F:\Qt5.15.2\5.15.2\wasm。最后用mingw编译。

cd /d E:\webassembly
F:\emsdk\emsdk_env.bat
F:\Qt5.15.2\5.15.2\wasm\bin\qmake test.pro
F:\Qt5.15.2\Tools\mingw810_64\bin\mingw32-make.exe -j4

4. QtCreator中编译

1. QtCreator配置emscripten编译器源码位置，如图：
   

2. 配置自己的webassembly构建套件，如图：
   
   

其他

参考教程：
https://github.com/3dgen/cppwasm-book/blob/master/zh/README.md
可以让c++ 运次在网页中

WebAssembly是新一代的Web虚拟机标准，C/C++程序可以通过Emscripten工具链编译为WebAssembly二进制格式.wasm，进而导入网页中供JavaScript调用——这意味着使用C/C++编写的程序将可以直接运行在网页中。

参考资料

• Qt官网: https://doc.qt.io/qt-5/wasm.html
• emsdk源码：https://github.com/emscripten-core/emsdk.git