Qt WebAssembly开发环境配置

目录

  • 前言
    • 1、下载Emscripten SDK
    • 2、 安装
    • 3、环境变量配置
    • 4、QtCreator配置
    • 5、运行示例程序
    • 总结

前言

本文主要介绍 Qt WebAssembly 开发环境的配置。Qt for Webassembly 可以使Qt应用程序在Web上运行。WebAssembly(简称Wasm)是一种能够在虚拟机中执行的二进制指令格式,例如在Web浏览器中。我们可以用Qt for WebAssembly,将应用程序分发为在浏览器沙盒中运行的Web应用程序。这种方法适用于不需要完全访问主机设备功能的Web分布式应用程序。为WebAssembly构建Qt应用程序与构建其他平台的Qt应用程序类似,需要安装一个SDK(Emscripten),安装Qt(或从源代码构建Qt),最后构建应用程序。当然与其他Qt构建相比Qt for WebAssembly支持的模块和功能较少。

1、下载Emscripten SDK

Emscripten是用于将Qt应用程序编译为WebAssembly的工具链,它可以使Qt在Web上以接近本机速度运行,而无需使用浏览器插件。这个地址是Emscripten 的官网,其首页如下图所示:
在这里插入图片描述

点击Download and install 进入SDK下载及安装页面,如下图
在这里插入图片描述

接下来看下Emscripten SDK所依赖的基础环境你的电脑是否具备

平台依赖
WindowsPython3.6及以上版本,git,CMake
macOSmacOS 10.14 Mojave 或更高版本,Python3.6及以上版本或者使用Emscripten自带的Python3环境, git ,CMake
LinuxPython3.6及以上版本, git ,CMake

下载Emscripten SDK,我们通过git来下载,打开终端,执行git clone 命令,等待下载完成:

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

2、 安装

首先在qt帮助文档中,查看下当前Qt版本需要安装的emsdk版本号。可以看到下图中的帮助文档中已经给出了安装命令。
在这里插入图片描述
接下来切换到emsdk目录下依次执行安装命令和激活命令

cd emsdk
./emsdk install 3.1.37
./emsdk activate 3.1.37

3、环境变量配置

为了每次打开终端都自动激活emsdk,需要将 /path/to/emsdk/emsdk_env.sh 添加到.bash_profile中,在刚才的终端中执行如下命令:

echo 'source "/path/to/emsdk/emsdk_env.sh"' >> $HOME/.bash_profile

该命令会把emsdk_env.sh 脚本添加到环境变量里,打开终端时自动执行该脚本。macOS和Linux环境下有效,Windows系统下未测试。

4、QtCreator配置

在这里插入图片描述

如上图所示,打开QtCreator的选项页面,依次选择设备–>WebAssembly–>选择,选择emsdk安装根目录即可,指定好根目录Qt会自动查找需要的配置信息。此时切换到构建套件页面,选择编译器选项卡可以看到已经自动检测到了Emscripten Compiler。如下图所示
在这里插入图片描述

切换到构建套件选项卡可以看到WebAssembly Qt6.6.1 (multi-threaded) 套件没有警告和错误。
在这里插入图片描述

5、运行示例程序

以上就是WebAssembly开发环境的配置过程,接下来新建一个示例程序运行一下看看效果。新建Qt工程构建套件选择WebAssembly Qt6.6.1 (multi-threaded),其他的保持默认即可,然后在mainwindow.ui中拖放一个Label,输入Hello Qt WebAssembly,运行程序查看效果。在这里插入图片描述
当程序编译完成后,会启动系统默认的浏览器,并将Qt应用程序的内容显示出来。这是不是意味着我们可以用Qt C++开发web应用了?可以看到应用程序启动了一个本地web服务,并将编译好的qt程序的网页地址通过浏览器加载出来。
在这里插入图片描述

总结

本文介绍了Qt for WebAssembly 开发环境的配置过程,并运行一个简单的示例程序来展示其效果。以上就是本文的所有内容了,对此有任何疑问,欢迎留言讨论!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/294774.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

<HarmonyOS第一课>运行Hello World

下载与安装DevEco Studio 在HarmonyOS应用开发学习之前,需要进行一些准备工作,首先需要完成开发工具DevEco Studio的下载与安装以及环境配置。 进入DevEco Studio下载官网,单击“立即下载”进入下载页面。 DevEco Studio提供了Windows版本和…

[SWPUCTF 2021 新生赛]jicao

首先打开环境 代码审计,他这儿需要进行GET传参和POST传参,需要进行POST请求 变量idwllmNB,进行GET请求变量json里需要含参数x以及jsonwllm 构造 得到flag

Maven简介

1 Maven介绍 1.1 官网地址 Maven 1.2 Maven是什么 Maven是一种项目管理、依赖管理、项目构建的工具,可以进行自动化构建、测试、打包和发布项目。 依赖管理 随着项目引入jar包的增多,我们需要对其进行管理,包括jar包之间的版本依赖管理&a…

【QT八股文】系列之篇章1 | QT的基础知识及事件/机制

【QT八股文】系列之篇章1 | QT的基础知识及事件/机制 前言0. 基础Qt/PyQt5介绍/关联Qt的优缺点(为什么要用qt来做界面)Qt 的核心机制请简要介绍一下Qt中的主窗口(MainWindow)类,它有哪些重要的函数和成员变量&#xff…

qt项目-《图像标注软件》源码阅读笔记-类图

目录 1. 开源项目链接 2. 项目界面 3. 项目类图 3.1 形状的绘制及形状的存储 3.2 主窗口中心组件的界面管理 3.3 Command负责实现撤销和重做功能 3.4 其他类 3.5 枚举 3.5.1 Status 主窗口的状态变量 3.5.2 Mode 主窗口模式状态变量 3.5.3 shapeStatus 中心组件状态…

基于JAVA的大病保险管理系统 开源项目

目录 一、摘要1.1 项目介绍1.2 项目录屏 二、功能模块2.1 系统配置维护2.2 系统参保管理2.3 大病保险管理2.4 大病登记管理2.5 保险审核管理 三、系统详细设计3.1 系统整体配置功能设计3.2 大病人员模块设计3.3 大病保险模块设计3.4 大病登记模块设计3.5 保险审核模块设计 四、…

go语言初体验1--使用go install

当安装后go语言后。 尝试编写go程序。 当使用 go install 命令,报错。 go: go install requires a version when current directory is not in a moduleTry go install jvmgo\ch01latest to install the latest version通过查找资料。 用命令: go env …

用23种设计模式打造一个cocos creator的游戏框架----(二十二)原型模式

1、模式标准 模式名称:原型模式 模式分类:创建型 模式意图:用原型实例指定创建对象的种类,并且通过复制这些原型创建新的对象 结构图: 适用于: 1、当一个系统应该独立于它的产品创建、构成和表示时 2、…

什么是动态代理?

目录 一、为什么需要代理? 二、代理长什么样? 三、Java通过什么来保证代理的样子? 四、动态代理实现案例 五、动态代理在SpringBoot中的应用 导入依赖 数据库表设计 OperateLogEntity实体类 OperateLog枚举 RecordLog注解 上下文相…

基于Springboot的酒店管理系统(有报告)。Javaee项目,springboot项目。

演示视频: 基于Springboot的酒店管理系统(有报告)。Javaee项目,springboot项目。 项目介绍: 采用M(model)V(view)C(controller)三层体系结构&…

C#上位机与欧姆龙PLC的通信05---- HostLink协议

1、介绍 Hostlink协议是欧姆龙PLC与上位机链接的公开协议。上位机通过发送Hostlink命令,可以对PLC进行I/O读写、可以对PLC进行I/O读写、改变操作模式、强制置位/复位等操作。由于是公开协议,即便是非欧姆龙的上位设备(软件)&…