win10&&Qt搭建WebAssembly环境

win10&&Qt搭建WebAssembly环境

文章目录

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

1. 安装emscripten编译器2. 安装Qt并编译Qt源码3. 命令行cmd中编译项目4. QtCreator中编译 参考资料

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:emsdkemsdk_env.bat //配置emscripten临时环境变量
set PATH=F:Qt5.15.25.15.2mingw81_64bin;F:Qt5.15.2Toolsmingw810_64bin;%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.2Toolsmingw810_64binmingw32-make.exe –j4      //编译qt源代码     
F:Qt5.15.2Toolsmingw810_64binmingw32-make.exe install

3. 命令行cmd中编译项目

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

cd /d E:webassembly
F:emsdkemsdk_env.bat
F:Qt5.15.25.15.2wasmbinqmake test.pro
F:Qt5.15.2Toolsmingw810_64binmingw32-make.exe -j4

4. QtCreator中编译

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


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

参考资料

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