admin管理员组

文章数量:1603717

 前言:

因项目的缘故,笔者有段时间没测试了,官方也修复了很问题,笔者今天记录下最新版本环境搭建

一、安装Qt预编译库

笔者只是测试下,所以就不自己编译了,直接使用官方的预编译库

 有兴趣的小伙伴要注意下,笔者使用的是未发布的Qt6.4.0候选版本(正式版预计9月底或10月初发布),所有建议将此版本用于正式项目中

二、安装Emscripten

下载地址:GitHub - emscripten-core/emsdk: Emscripten SDK

打开后,点tags

找到3.1.14,下载zip包

在此笔者强调下,一定要找对就的版本号,否则后面可能编译不通过,以下笔者测试过的版本号,供读者参考

  • Qt 6.2: 2.0.14
  • Qt 6.3: 3.0.8
  • Qt 6.4: 3.1.14
  • Qt 6.5: 3.1.25
  • Qt 6.6: 3.1.37
  • Qt 6.7: 3.1.50

将下载的压缩包解压到一个目录中,注意路径不要有中文或空格,笔者放在D:\emsdk\下

打开cmd,执行如下命令

D:\emsdk\emsdk-3.1.14\emsdk install 3.1.14

注:可能会失败,可以多次执行几次

下载完成后,执行如下命令,激活并配置环境变量

D:\emsdk\emsdk-3.1.14\emsdk activate --embedded 3.1.14

注:只在本终端有效

 注意,配置完成后,要执行以下命令验证下

 em++ --version 

注:已下载好的包,见本文后记 

三、配置QtCreator

笔者使用的版本是8.0.1,建议读者也使用最新版本

1.配置emsdk

打开QtCreator的首选项对话框

 找到设备-WebAssembly

 点击浏览,设置emsdk的目录,也就是刚刚下载安装的emsdk目录

若设置成功,下方会显示该sdk设置的环境变量

注:这一点比较赞,旧版本中,需要开发者自己运行emsdk activate后,再启动QtCreator

2.配置开发套件

点击开发套件,可以看到对应的编译器已经自动检测到了

 因为使用的是官方的预编译版本,Qt版本也正常检测到

 美中不足的是,开发套件的编译器选择,默认不正确。这可能与笔者电脑上有多个编译器有关吧

 设置完成后,点击确认就可以了

注:

若读者使用的是早期版本,可能需要在编译器中手机添加(需要提前设置好环境变量);

若读者自己编译的源码,需要在Qt版本中,自行添加生成的套件库

四、测试程序

1.在QtCreator中打开一个Qt示例,笔者选择了一个计算器的

 2.要注意选择对开发套件

 3.配置运行选项

 默认选择使用的是IE浏览器,IE不支持WASM的,需要修改成默认浏览器(不明白官方为什么默认选择使用IE)

然后直接运行就可以

 

 过会,会跳转到默认浏览器中,并自动访问对应的地址

后记:

相比较之前的版本,当前的开发环境搭建方便了不少,开发运行时也只要点几下鼠标就可以了,运行初始化的速度也提升了不少。

由于是运行在web沙盒中,当前仍然存在不少限制

  1. 若需要多线程,需要自己编译源码
  2. 打印机不支持
  3. 无法使用DNS解析
  4. 虽然有办法使用tcp,但目前官方库不支持
  5. 输入法无法输入中文(好在剪切板已经支持从系统中复制)
  6. 无法使用系统字体(中文字体需要内置)
  7. ……

希望官方能早点解决常见的问题,否则基本上是个玩具,很难推广的

2022.11.14

笔者收到反馈,当前安装编译器无响应(执行emsdk install 3.1.14时),笔者看了下,是本机未安装python的缘故,只要安装好python就可以了。

当前还有一个问题,执行emsdk install 3.1.14时,提示证书不可信,这时可能需要手工下载了。

为方便读者测试,笔者把自己已下载的编译器打好包,有需要的小伙伴可以自行下载

本文标签: 学习笔记环境WebAssemblyQT