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
希望知道怎么解决的朋友可以分享一下。
相关文章:
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 运行时环境 注意!!!注意&am…...
荣耀手机怎么录制屏幕?屏幕录制后为视频加水印更有“安全感”
在数字时代,屏幕录制已经成为记录和分享信息的重要方式之一。无论是记录游戏的高光时刻,还是制作教学视频,亦或是保存重要的线上会议内容,屏幕录制都能轻松搞定。 荣耀手机作为一款功能强大的设备,自然也提供了便捷的…...
3DXML 与 SOLIDWORKS 格式转换:技术协同及迪威模型方案
一、引言 在产品设计的前沿领域,3DXML 与 SOLIDWORKS 作为主流格式,虽各有所长,但因格式差异,常成为数据流通与协作的阻碍。对于技术人员和学生党而言,掌握二者间的转换技术,不仅能提升设计效率࿰…...
CH347使用笔记:CH347结合STM32CubeIDE实现单片机下载与调试
目录 基于 STM32CubeIDE的 CH347 JTAG/SWD调试器使用说明1. CH347驱动安装与配置2. STM32CubeIDE调试器配置2.1 打开相关工程后,进行以下操作2.2 openocd.exe替换2.3 脚本添加2.4 更改调试器选择 3. 下载程序4. 使用过程中可能遇到的问题4.1 CH347未插入4.2 Openocd…...
JS—基本数据类型和引用数据类型:1分钟掌握两者的区别
个人博客:haichenyi.com。感谢关注 一. 目录 一–目录二–分类三–核心区别四–实际场景中的问题五–总结对比 二. 分类 前面说过这么判断数据类型,今天来说说基本数据类型和引用数据类型的区别。 基本数据类型引用数据类型StringObjectNumberFunct…...
使用 CryptoJS 实现 AES 解密:动态数据解密示例
在现代加密应用中,AES(高级加密标准)是一种广泛使用的对称加密算法。它的安全性高、效率好,适合用于各种加密任务。今天,我们将通过一个实际的示例,展示如何使用 CryptoJS 实现 AES 解密,解密动态数据。CryptoJS 是一个基于 JavaScript 的加密库,它支持 AES、DES 等多种…...
[设计模式与源码]1_Spring三级缓存中的单例模式
欢迎来到啾啾的博客🐱,一个致力于构建完善的Java程序员知识体系的博客📚,记录学习的点滴,分享工作的思考、实用的技巧,偶尔分享一些杂谈💬。 欢迎评论交流,感谢您的阅读😄…...
使用React和google gemini api 打造一个google gemini应用
实现一个简单的聊天应用,用户可以通过输入问题或点击“Surprise me”按钮获取随机问题,并从后端API获取回答。 import { useState } from "react"; function App() {const [ value, setValue] useState(""); // 存储用户输入的问题…...
为什么Django能有效防御CSRF攻击?
在当今这个互联网高度发达的时代,Web安全问题层出不穷,其中跨站请求伪造(CSRF,Cross-Site Request Forgery)就是一个比较常见的威胁。攻击者利用用户的身份信息,发送恶意请求,改变用户的属性或执…...
Oracle常见系统函数
一、字符类函数 1,ASCII(c)和CHR(i)字符串和ascii码互转换 SQL> select ascii(Z) ,ascii(H),ascii( A) from dual;ASCII(Z) ASCII(H) ASCII(A) ---------- ---------- ----------90 72 32SQL> select chr(90),chr(72),chr(65) from dual;C…...
【Visio使用教程】
Visio使用教程 1. Visio 的基本介绍1.1 Visio 是什么?核心特点: 1.2 主要功能与应用场景典型用途:行业应用: 1.3 版本与兼容性1.4 Visio下载1.5 安装 2. Visio 的界面与基础操作2.1 界面布局详解2.2 创建新文档与模板选择2.3 形状…...
蓝桥杯 修剪灌木
问题描述 爱丽丝要完成一项修剪灌木的工作。 有 N 棵灌木整齐的从左到右排成一排。爱丽丝在每天傍晩会修剪一棵灌 木, 让灌木的高度变为 0 厘米。爱丽丝修剪灌木的顺序是从最左侧的灌木开始, 每天向右修剪一棵灌木。当修剪了最右侧的灌木后, 她会调转方向, 下一天开 始向左修…...
HTML中滚动加载的实现
设置div的overflow属性,可以使得该div具有滚动效果,下面以div中包含的是table来举例。 当table的元素较多,以至于超出div的显示范围的话,观察下该div元素的以下3个属性: clientHeight是div的显示高度,scrol…...
bbbbb
import java.util.ArrayList; import java.util.List; public class KthPermutation { public static String getPermutation(int n, int k) { // 计算阶乘 int[] factorial new int[n]; factorial[0] 1; for (int i 1; i < n; i) …...
Linux文件
1.Open函数 高频使用的Linux系统调用:open write read close Linux自带的工具:man手册: man 1是普通的shell命令,比如ls man 2是系统调用函数,比如open,write说明 在Linux系统库的定义: int o…...
kafka指北
为自己总结一下kafka指北,会持续更新。创作不易,转载请注明出处。 目录 集群controller选举过程broker启动流程 主题创建副本分布ISRleader副本选举机制LEO 生产数据流程同步发送和异步发送 分区策略ack应答生产者发送消息的幂等性跨分区幂等性问题&…...
Linux安装部署Elasticsearch8 全过程记录
一、安装 Elasticsearch8 1、下载 访问 Elasticsearch 官方网站(Download Elasticsearch | Elastic)。 在下载页面找到 Elasticsearch 8 的 Linux 版本(.tar.gz 格式)下载链接,点击下载。 下载Elasticsearch8&…...
ESP32(3)UDP通信
对于 lwIP 的 Socket 的使用方式,它与文件操作非常相似。在文件操作中,我们首先打开文件,然后进行读/写操作,最后关闭文件。在TCP/IP网络通信中,也存在着相同的操作流程,但所使用的接口不再是文件描述符或 …...
汽车机械钥匙升级一键启动的优点
汽车机械钥匙升级一键启动的优点主要包括: 便捷性:一键启动功能的引入极大地提升了用车便捷性。车主无需翻找钥匙,只需在车辆感应范围内轻触启动键,即可轻松发动汽车。 安全性:移动管家专车专用一键启动系统配备了防…...
【matlab例程】三维下的TDOA定位和EKF轨迹滤波例程,TDOA的锚点数量可自定义(订阅专栏后可获得完整代码)
本文所述的MATLAB例程实现了TDOA定位和扩展卡尔曼滤波(EKF)来提高位置估计的准确性,并通过可视化结果进行分析。 文章目录 运行结果MATLAB代码程序讲解关键步骤和功能步骤解释注意事项总结运行结果 三维轨迹: 三维误差曲线: RMSE曲线: 命令行输出内容:...
个人blog系统 前后端分离 前端js后端go
系统设计: 1.使用语言:前端使用vue,并使用axios向后端发送数据。后端使用的是go的gin框架,并使用grom连接数据库实现数据存储读取。 2.设计结构: 最终展示:仅展示添加模块,其他模块基本相似 前…...
OSG简介
OSG OpenSceneGraph (简称 OSG) 是一个开源的高性能3D图形库。 作用 它为开发者提供了一个强大的API,处理和渲染复杂的3D图形。 特点 OSG基于OpenGL构建,提供了对现代图形技术的支持,如着色器、纹理映射、光照模型等高级特性。 跨平台支…...
社区版Uos20.9从源码编译QT5.15.2
主要是在这个文章上学的究极保姆式教你如何在Ubuntu上源码安装Qt5.15.2_ubuntu安装qt5.15.2-CSDN博客 但原文上在环境变量的配置上真用在 uso上好像不行,要加一些引号和$号。原文的测试编译代码也有些问题,include上少了类。略作修改,在UOS社…...
AI学习第二天--大模型压缩(量化、剪枝、蒸馏、低秩分解)
目录 1. 量化:压缩大象的“脂肪” 比喻 技术逻辑 2. 剪枝:修剪大象的“无效毛发” 比喻 技术逻辑 3. 知识蒸馏:让大象“师从巨象” 比喻 技术逻辑 4. 低秩分解:把大象“折叠成纸偶” 比喻 技术逻辑 5. 推理优化&#…...
C++ —— 线程同步(互斥锁)
C —— 线程同步(互斥锁) 线程同步互斥锁(互斥量)测试代码mutex互斥锁 线程同步 线程同步:多线程协同工作,协商如何使用共享资源。 C11线程同步包含三部分内容: 互斥锁(互斥量&…...
相对路径跳转和绝对路径跳转有什么区别?
在 Vue 3 中使用路由跳转时,相对路径跳转和绝对路径跳转在使用方式、适用场景等方面存在明显区别,以下为你详细介绍: 定义 绝对路径跳转:指的是使用完整的路径来进行路由导航,路径以 / 开头,无论当前处于…...
Flume详解——介绍、部署与使用
1. Flume 简介 Apache Flume 是一个专门用于高效地 收集、聚合、传输 大量日志数据的 分布式、可靠 的系统。它特别擅长将数据从各种数据源(如日志文件、消息队列等)传输到 HDFS、HBase、Kafka 等大数据存储系统。 特点: 可扩展࿱…...
笔记类AI应用体验
笔记类AI应用体验 叮当好记视频一键转笔记, 祝你学习效率起飞 IMAGet笔记印象笔记(Evernote):Notion:Trilium Notes:二、开始搭建三、搭建步骤四、创建博客 Obsidian:案例让ai帮我执行大模型学习…...
Mysql篇——SQL优化
本篇将带领各位了解一些常见的sql优化方法,学到就是赚到,一起跟着练习吧~ SQL优化 准备工作 准备的话我们肯定是需要一张表的,什么表都可以,这里先给出我的表结构(表名:userinfo) 通过sql查看…...
【css酷炫效果】纯CSS实现故障文字特效
【css酷炫效果】纯CSS实现故障文字特效 缘创作背景html结构css样式完整代码基础版进阶版(3D效果) 效果图 想直接拿走的老板,链接放在这里:https://download.csdn.net/download/u011561335/90492053 缘 创作随缘,不定时更新。 创作背景 刚…...
【Java】链表(LinkedList)(图文版)
本博客总结了Java当中链表的实现,以及相关方法的使用,在最后附带了一些常见链表相关处理技巧,希望对你有帮助! ps:可拷贝到IDEA上自行测试,代码全部完成测试。 一.链表概述 1.什么是链表? 链…...
审批工作流系统xFlow
WorkFlow-审批流程系统 该项目为完全开源免费项目 可用于学习或搭建初始化审批流程系统 希望有用的小伙伴记得点个免费的star gitee仓库地址 仿钉钉飞书工作审批流系统 介绍 前端技术栈: vue3 ts vite arcodesign eslint 后端技术栈:springbootspring mvc mybatis mavenmysq…...
UNION,UNION ALL 的详细用法
目录 一、基本概念 二、核心区别 三、语法使用规则 四、代码实演示 4.1 两张表字段相同,字段顺序也相同 4.2 两张表字段相同。但字段顺序不同 4.3 两张表存在相同字段,但一张表字段多,一张表字段少 一、基本概念 操作符功能描述去重处…...
Java 集合遍历过程中修改数据触发 Fail-Fast 机制 ,导致报ConcurrentModificationException异常
Java Fail-Fast 机制 Fail-Fast 机制是 Java 集合框架中的一种错误检测机制,用于在遍历集合时检测结构修改。如果在迭代器创建之后,集合被修改(例如添加或删除元素),并且这种修改不是通过迭代器自身的 remove() 方法进…...
Javascript 日期相关计算
1、获取当前日期的前一天 // 获取当前日期let today new Date();today.setDate(today.getDate() - 1);// 转换为本地日期字符串格式let yesterdayStr today.toISOString().slice(0, 10);console.log(yesterdayStr); // 例如: "2023-04-03" (格式取决于地区设置) 2…...
自动驾驶背后的数学:特征提取中的线性变换与非线性激活
在上一篇博客「自动驾驶背后的数学:从传感器数据到控制指令的函数嵌套」—— 揭秘人工智能中的线性函数、ReLU 与复合函数中,我们初步探讨了自动驾驶技术中从传感器数据到控制指令的函数嵌套流程,其中提到了特征提取模块对传感器数据进行线性…...
DNS解析查询工具
dig命令 1 常用命令 命令:dig 您的域名(示例:dig www.baidu.com) 2、根据解析记录查询,比如MX,CNAME,NS,PTR等,只需将类型加在命令后面即可。 示例:dig bai…...
【eNSP实战】(续)一个AC多个VAP的实现—将隧道转发改成直接转发
在 一个AC多个VAP的实现—CAPWAP隧道转发 此篇文章配置的基础上,将隧道转发改成直接转发 一、改成直接转发需要改动的配置 (一)将连接AP的接口改成trunk口,并允许vlan100、101、102通过 [AC1]interface GigabitEthernet 0/0/8 …...
解决远程卡在下载vscode-server的问题,一键安装脚本
vscode-server 下载与安装脚本 vscode-server一键安装脚本 简介 此脚本用于下载并安装指定提交 ID 和架构的 VS Code Server。用户可以选择不同的架构,并输入对应的 VS Code 提交 ID 来下载和安装 vscode-server。VS Code提交ID可以在VS Code界面“帮助>关于…...
【unity实战】用unity封装一个复杂全面且带不同射击模式的飞机大战射击系统
考虑到每个人基础可能不一样,且并不是所有人都有同时做2D、3D开发的需求,所以我把 【零基础入门unity游戏开发】 分为成了C#篇、unity通用篇、unity3D篇、unity2D篇。 【C#篇】:主要讲解C#的基础语法,包括变量、数据类型、运算符、流程控制、面向对象等,适合没有编程基础的…...
LeetCode[42] 接雨水
动态规划 left_max[i] height[i]左侧的最高高度right_max[i] height[i]右侧的最高高度height[i]能接多少水?min(left_max[i], right_max[i])-height[i] class Solution { public:int trap(vector<int>& height) {int len height.size();vector<in…...
c++ 基础题目lambda
1. auto lambda = [](double x) { return static_cast<int>(x); }; 是 匿名函数对象 ,不可直接声明 a.可以赋值给一个与其类型兼容的 std::function 类型的对象 std::function<int(int, int)> lambda = [](int x, int y) { return x + y; }; b.使用具体的 lambda …...
RTSP/Onvif安防视频EasyNVR平台 vs.多协议接入视频汇聚EasyCVR平台:设备分组的区别
EasyNVR安防视频云平台是旭帆科技TSINGSEE青犀旗下支持RTSP/Onvif协议接入的安防监控流媒体视频云平台。平台具备视频实时监控直播、云端录像、云存储、录像检索与回看、告警等视频能力,能对接入的视频流进行处理与多端分发,包括RTSP、RTMP、HTTP-FLV、W…...
网络编程套接字【端口号/TCPUDP/网络字节序/socket编程接口/UDPTCP网络实验】
网络编程套接字 0. 前言1. 认识端口号2. 认识TCP和UDP协议3. 网络字节序4. socket编程接口5. 实现一个简单的UDP网络程序5.1 需求分析5.2 头文件准备5.3 服务器端设计5.4 客户端设计5.5 本地测试5.6 跨网络测试5.7 UDP小应用——客户端输入命令,服务器端执行 6. 地址…...
【C语言预编译处理精选题】
C语言预编译处理精选题 一、选择易错题1.1 纯文本替换,注意优先级!1.2 再来一道文本替换,别马虎1.3 宏定义的替换1.4带参数宏定义的空格问题1.5 " "的include1.6 条件编译1.7 预编译概念 二、填空易错题2.1 注意两个连续的 i2.2 异…...
云钥科技工业相机定制服务,助力企业实现智能智造
在工业自动化、智能制造和机器视觉快速发展的今天,工业相机作为核心感知设备,其性能直接决定了检测精度、生产效率和产品质量。然而,标准化工业相机往往难以满足复杂多样的应用场景需求,工业相机定制逐渐成为企业突破技术瓶颈…...
用了Cline和华为云的大模型,再也回不去了
这两年AI火热,受影响最大的还是程序员群体,因为编程语言是高度形式化的,完全可以用BNF等形式精确地定义,不像自然语言那样,容易出现歧义。另外开源是软件界的潮流,GitHub上有海量的开源代码可供AI来训练&am…...
vs2017版本与arcgis10.1的ArcObject SDK for .NET兼容配置终结解决方案
因电脑用的arcgis10.1,之前安装的vs2010正常能使用AO和AE,安装vs2017后无法使用了,在重新按照新版本arcgis engine或者arcObject费时费力,还需要重新查找资源。 用vs2017与arc10.1的集成主要两个问题,1:安装后vs中没有…...
Java对接微信支付全过程详解
🧑 博主简介:CSDN博客专家,历代文学网(PC端可以访问:https://literature.sinhy.com/#/?__c1000,移动端可微信小程序搜索“历代文学”)总架构师,15年工作经验,精通Java编…...
微软 System Center Configuration Manager(SCCM)的组件文件
微软 System Center Configuration Manager(SCCM) 或 Microsoft Endpoint Configuration Manager(MECM) 的组件文件,属于企业级设备管理工具的一部分。以下是具体说明: C:\Windows\CCM\smsswd.exe C:\Windows\CCM\tsmanager.exe smsswd.exe 和 tsmanager.exe 是 Micros…...