Qt+WebAssembly学习笔记（六）win10+Qt6.4.0rc1开发环境搭建

 前言：

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

一、安装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时，提示证书不可信，这时可能需要手工下载了。

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