ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

Qt中搭建WebAssembly

2022-01-29 09:58:17  阅读:468  来源: 互联网

标签:WebAssembly Qt5.15 emscripten Qt 编译 wasm 搭建 emsdk


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

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有