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

Qt中搭建WebAssembly

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语法。

Qt中搭建WebAssembly

 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 ,能看到版本信息表示成功了。

Qt中搭建WebAssembly

如果需要安装其他版本的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

Qt中搭建WebAssembly

 Qt中搭建WebAssembly

步骤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 是安装目录,可以修改成自己的目录

如出现以下错误:

Qt中搭建WebAssembly 

原因及对应操作:没有配置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步骤的时候设置了环境变量,所以才可以省略路径。

做好心理准备:编译和安装过程是十分漫长的。

若一切正常,则在安装目录可以看到安装后的文件。

Qt中搭建WebAssembly

 

【在命令行中编译项目】

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. 没报错就会生成以下文件

Qt中搭建WebAssembly

 

【在QtCreator中编译项目】

1. 打开Qt5.15.2自带的QtCreator6.0.1

2. 菜单—>工具—>选项—>Kits—>编译器—>添加—>Custom—>C,添加Emscripten C编译器的配置,配置如下:

Qt中搭建WebAssembly

3. 按照2的步骤添加Emscripten C++的编译器,配置如下:

Qt中搭建WebAssembly 4. 配置QtVersion,新增自定义的WebAssembly版本,如下图:

我们发现,在手动配置的上方,Qt默认自带了WebAssembly配置,就是文档上述中所说的wasm_32这个目录下的编译环境,它是Emscripten1.39.7版本的,不满足当前项目要求,所以要重新配置。

Qt中搭建WebAssembly 

5. 配置Kits项,新增自定义的编译器。

我们也发现有一个默认的WebAssembly编译器,不要使用,仍然选择自定义的版本。

Qt中搭建WebAssembly

6. 修改工程配置,打开Plugin/ MagicDevicePlugin /MagicDevicePlugin.pro工程,选择配置如下图:

Qt中搭建WebAssembly 

7. 设置编译参数,如下图:

注意qmake.exe是不是5.15.2/wasm目录下的,不要选5.15.2/wasm_32目录下的那个。

Qt中搭建WebAssembly

8. 配置设备

Qt中搭建WebAssembly

9. 编译。

10. 发布。

 

上一篇:在QT平台下创建图形化界面


下一篇:Qt打印QPrinter设置DPI