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 编译过程
-
使用 Emscripten 工具链将 Qt 应用程序的 C++ 代码编译为 WebAssembly 格式。
-
生成
.wasm
文件(WebAssembly 二进制文件)和.js
文件(JavaScript 胶水代码)。 -
通过 HTML 文件加载和运行 WebAssembly 应用程序。
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
-
下载并安装 Qt 安装程序(Qt 5.15 或更高版本)。
-
在安装过程中,选择
Qt for WebAssembly
模块。
2.3 配置 Emscripten
-
下载并安装 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
希望知道怎么解决的朋友可以分享一下。