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 应用程序。

1. http://localhost:8000/TestWebAssembly.html

复制代码

5.遗留问题

出现了中文乱码问题，尚未办理，看过一些教程，说是Qt自带的三种字体并不支持中文，以是必要本身加载字体。
Qt 字体加载、图标字体的使用 | 办理 Qt for WebAssembly 中文字体问题_哔哩哔哩_bilibili
希望知道怎么办理的朋友可以分享一下。

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。