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. 发布。