Qt5.15.2实现Qt for WebAssembly与示例

目录

1.什么是Qt for WebAssembly？

1.1 什么是 WebAssembly？

1.2 WebAssembly 的优势

1.3 什么是 Qt for WebAssembly？

1.4 Qt for WebAssembly 的特点

1.5 编译过程

1.6 运行时环境

注意！！！注意！！！注意！！！Qt版本和Emscripten版本有对应关系，在官方文档里就给出了最适合的版本，比如Qt5.15.2和Emscripten1.39.8版本合适

2.环境准备

2.1 安装python3.9.0

2.2 安装 Qt for WebAssembly

2.3 配置 Emscripten

3.编译生成

3.1 创建和编译项目

3.2 在 Qt Creator 中创建一个新的 Qt 项目

3.3 编译项目，生成 .wasm 和 .js 文件

4.运行示例

4.1 编译生成内容

4.2 运行项目

5.遗留问题

1.什么是Qt for WebAssembly？

Qt for WebAssembly 是 Qt 框架的一个模块，它允许开发者将 Qt 应用程序编译为 WebAssembly（Wasm）格式，从而可以在现代 Web 浏览器中运行。WebAssembly 是一种低级的二进制指令格式，旨在为 Web 提供高性能的执行环境。通过 Qt for WebAssembly，开发者可以使用 Qt 的强大功能（如 GUI、网络、文件系统等）来构建跨平台的 Web 应用程序。

1.1 什么是 WebAssembly？

• WebAssembly（Wasm） 是一种基于堆栈的虚拟机的二进制指令格式，旨在为 Web 提供高性能的执行环境。

• 它允许开发者使用 C、C++、Rust 等语言编写代码，并将其编译为 Wasm 格式，在浏览器中运行。

• WebAssembly 的主要目标是实现接近原生的性能，同时保持与 Web 平台的兼容性。

1.2 WebAssembly 的优势

• 高性能：接近原生的执行速度。

• 跨平台：可以在所有现代浏览器中运行。

• 安全性：运行在浏览器的沙盒环境中，确保安全性。

• 可移植性：支持多种编程语言（如 C、C++、Rust 等）。

1.3 什么是 Qt for WebAssembly？

• Qt for WebAssembly 是 Qt 框架的一个模块，它允许将 Qt 应用程序编译为 WebAssembly 格式。

• 通过 Qt for WebAssembly，开发者可以使用 Qt 的强大功能（如 GUI、网络、文件系统等）来构建跨平台的 Web 应用程序。

• 它特别适合将现有的 Qt 桌面应用程序移植到 Web 平台。

1.4 Qt for WebAssembly 的特点

• 跨平台：可以在所有现代浏览器中运行。

• 高性能：利用 WebAssembly 的高性能特性。

• 丰富的功能：支持 Qt 的核心模块（如 Qt Core、Qt GUI、Qt Widgets 等）。

• 易于移植：现有的 Qt 应用程序可以相对容易地移植到 WebAssembly。

1.5 编译过程

1.6 运行时环境

• WebAssembly 应用程序运行在浏览器的沙盒环境中。

• Qt for WebAssembly 使用 Emscripten 提供的 API 与浏览器进行交互（如 DOM 操作、文件系统访问等）。

人话就是把某些qt实现的桌面程序编译成wasm支持的web形式，但存在局限性。

感兴趣的也可以自己去看看：QT官方5.15.2的说明文档

注意！！！注意！！！注意！！！Qt版本和Emscripten版本有对应关系，在官方文档里就给出了最适合的版本，比如Qt5.15.2和Emscripten1.39.8版本合适

不然你可能在后面都配置好了之后，发现编译报错

[Makefile:74: .\\TestWebAssembly.js] Error 1

具体原因这个博主解释了，主要是js的语法适配问题

接下来我主要描述怎么在windows版本下进行环境准备。

2.环境准备

2.1 安装python3.9.0

2.2 安装 Qt for WebAssembly

2.3 配置 Emscripten

先克隆Emscripten的sdk仓库

git clone https://github.com/emscripten-core/emsdk.git

cd到刚刚克隆的文件夹下，进行安装激活与查看版本，需要下载一些东西

.\\emsdk install 1.39.8

.\\emsdk activate 1.39.8

emcc –version

em++ –version

正确的情况下应该会看到：

2.配置 Emscripten 的环境变量。

自动利用脚本配置

.\\emsdk_env.bat

手动配置

3.编译生成

3.1 创建和编译项目

1.在Qt中配置启用webassembly编译器

先要配置设备中的路径，这个时候Qt自己会识别版本。

重启QtCreator之后，就会在编译器中看到有对应的版本的C和C++的编译器

如果没有的话，就自己添加

调试器的话，其实不支持调试，所以有没有都无所谓，可以无视警告黄色感叹号。

3.2 在 Qt Creator 中创建一个新的 Qt 项目

这个时候，可以勾选两个编译器，因为我使用的时候，切换到webassembly编译器的时候，就无法加载出来pro中加入的文件了，可以先把项目运行好在切换成webassembly编译器编译就行。

选择 WebAssembly 作为构建套件。

3.3 编译项目，生成 .wasm 和 .js 文件

4.运行示例

4.1 编译生成内容

TestWebAssembly/ ├── TestWebAssembly.html       # HTML 入口文件 ├── TestWebAssembly.js         # JavaScript 胶水代码 ├── TestWebAssembly.wasm       # WebAssembly 二进制文件 ├── TestWebAssembly.data       # 静态资源文件（可选） ├── TestWebAssembly.wasm.map   # WebAssembly 源映射文件（可选） ├── TestWebAssembly.js.map     # JavaScript 源映射文件（可选） └── TestWebAssembly.worker.js  # Web Worker 文件（可选）

4.2 运行项目

如果走到这一步，你直接打开了html的话，就会看到这样的画面

这就需要使用web服务器的方式加载才可以

4.2.1使用 Web 服务器（如 Python 内置 HTTP 服务器）运行生成的 .html 文件。

4.2.2在浏览器中打开 .html 文件，运行 WebAssembly 应用程序。

http://localhost:8000/TestWebAssembly.html

5.遗留问题

出现了中文乱码问题，尚未解决，看过一些教程，说是Qt自带的三种字体并不支持中文，所以需要自己加载字体。

Qt 字体加载、图标字体的使用 | 解决 Qt for WebAssembly 中文字体问题_哔哩哔哩_bilibili

希望知道怎么解决的朋友可以分享一下。