一、前言

从Qt5.14开始,官方的在线安装提供了qt for webassembly构建套件,这对很多小白来说绝对是个好消息,也绝对是个好东西,好消息是不用再去交叉编译自己生成qt for webassembly的qt库,在线安装版本直接就给你安装好,很多小白就困在如何交叉编译qt for webassembly的qt库上了,环境简直是弄哭了,望而却步;好东西是你可以直接将你现有的qt程序直接编译成wasm文件然后直接网页运行,注意这里不是说activex的形式在IE中运行,而是直接各种支持wasm的浏览器上直接运行,比如谷歌浏览器、火狐浏览器、edge浏览器等,反正主流的浏览器都支持,是不是很牛逼,大致的原理就是借助emsdk中的emscripten编译器将qt的程序直接静态编译生成wasm文件,然后同时生成对应的js文件和html文件,js文件负责加载wasm文件进行编译使用canvs绘制程序。理论上c++程序执行效率要比js高,个人体验下来也是效率蛮高,最激动的就是一行代码不用修改,直接就可以编译成网页程序。

WebAssembly介绍:

  • WebAssembly是一种可以使用非JavaScript编程语言编写代码并且能在浏览器上运行的技术方案。
  • WebAssembly有一套完整的语义,实际上wasm是体积小且加载快的二进制格式,其目标就是充分发挥硬件能力以达到原生执行效率。
  • WebAssembly运行在一个沙箱化的执行环境中,甚至可以在现有的JavaScript虚拟机中实现。在web环境中,WebAssembly将会严格遵守同源策略以及浏览器安全策略。
  • WebAssembly设计了一个非常规整的文本格式用来、调试、测试、实验、优化、学习、教学或者编写程序。可以以这种文本格式在web页面上查看wasm模块的源码。
  • WebAssembly在web中被设计成无版本、特性可测试、向后兼容的。WebAssembly可以被JavaScript调用,进入JavaScript上下文,也可以像WebAPI一样调用浏览器的功能。当然,WebAssembly不仅可以运行在浏览器上,也可以运行在非web环境下。
  1. qt+widget编译的程序网页地址:

    https://feiyangqingyun.gitee.io/qwidgetdemo/
  2. qt+quick编译的程序网页地址:

    https://feiyangqingyun.gitee.io/qwidgetdemo/gallery.html
  3. WebAssembly中文网

    https://www.wasm.com.cn/
  4. qt for webassembly官网介绍

    https://doc.qt.io/qt-5/wasm.html

二、搭建步骤

(一)、安装Qt集成开发环境

从Qt5.15开始官方不再提供离线安装包,只提供源码包自行编译或者在线安装,在线安装的时候需要输入账号信息登录才能在线下载选择的Qt版本和构建套件及其他工具,慢慢的各位Qt开发者要习惯这种方式,要么自己熟悉编译流程自行编译,对应大部分初学者来说一个是没有这个必要还一个是太难了,建议放弃这种方式,所以从现在开始就慢慢的要习惯在线安装方式,官方提供了在线安装的程序,双击即可运行,相信90%的Qt开发者都使用过,这里直接略过,只需要在选择安装的构建套件的时候记得勾选WebAssembly构建套件就行,这样已经很方便了,之前都是需要自己编译呢。

安装好以后如果勾选了mingw版本的Qt构建套件,则可以自行测试hello跑起来,同时你也会发现qt for webassembly这个构建条件是不可用的,别急,那是因为现在你只安装了qt for webassembly的qt的库,而并没有找到需要的编译器emscripten。

(二)、安装emsdk编译器

任何编程语言开发环境,都离不开编译器,需要用对应的编译器将代码编译成对应的可执行文件,Qt是一个兼容了N种编译器的通用代码库,你使用何种编译器则调用对应的Qt库然后再编译生成对应的程序,qt for webassembly就需要借助emsdk中的编译器emscripten来编译,而不是使用msvc、mingw、gcc等,所以需要单独安装emsdk编译器。

1、常规安装办法

  • 前提:电脑安装有git环境,能从github下载项目,安装有python环境,比如python3.7.4,如果不会玩git命令行请自行百度。
  • 第一步:双击python-3.7.4-amd64.exe,安装python开发环境,记得勾选添加环境变量。
  • 第二步:获取源码,打开git命令行工具,输入 git clone https://github.com/emscripten-core/emsdk.git ,等待下载完成,一般1-2分钟就下载完成。
  • 第三步:打开cmd工具,进入到emsdk目录,执行 emsdk install 1.39.7 安装emsdk编译器(Qt5.15对应的是1.39.7版本,而不是1.39.8,之前下载的1.39.8用下来每次编译都有警告提示版本不一致说是要1.39.7)。这个下载需要点时间请耐心等待,我电脑大概13分钟,具体看网速。
  • 第四步:安装完成后继续在当前的cmd命令行窗口执行 emsdk activate --embedded 1.39.7 激活sdk。
  • 第五步:激活成功以后,将emsdk目录下的.emscripten文件复制到C:\Users\Administrator目录下(即用户目录),Qt for webass构建套件编译的时候会去这里找编译器和各种编译需要的变量。
  • 第六步:用记事本打开.emscripten,将 emsdk_path = os.path.dirname(os.environ.get('EM_CONFIG')).replace('\', '/') 改成emsdk目录的绝对路径,比如 emsdk_path = 'H:/github/emsdk',如果运行有问题则全部改成绝对路径。
  • 第七步:打开QtCreator,配置Qt for WebAssembly构建套件,此时可以看到编译器中能够识别到所需的em编译器。
  • 第八步:编译好以后如果弹出的是IE浏览器则复制地址拷贝到谷歌浏览器或者edge或者火狐浏览器运行,目前IE浏览器不支持WebAssembly。
  • 第九步:默认采用的是静态编译,意味着可以脱离Qt环境运行,.wasm文件比较大因为静态集成了Qt的运行库。除了编译运行以外,还可以直接发布到有ngix或者apche环境的站点,直接可以运行。他就类似于PHP需要站点环境支持才能运行。

2、小白懒人办法

常规的办法是万能的,包括选用其他版本的编译器等,但是大部分的初学者其实还没有git环境和python环境呢,怎破,此时非常想体验一把将qt程序编译到网页运行的想法超级强烈,马上安排懒人办法,注意此办法针对的是Qt5.15.2版本,本人特意将下载好的编译器整个文件夹中各种无关的文件全部删除。

emsdk地址:https://pan.baidu.com/s/1ZxG-oyUKe286LPMPxOrO2A 提取码:o05q 名称:emsdk.zip

  • 第一步:将下载好的emsdk压缩包解压到目录,为了方便统一管理,我这里放在C:/Qt。

  • 第二步:将emsdk目录下的.emscripten文件复制到C:\Users\Administrator目录下(即用户目录),Qt for webass构建套件编译的时候会去这里找编译器和各种编译需要的变量。

  • 第三步:默认.emscripten文件中填写的是我这边安装的目录,你可以用记事本打开进行编辑改成你的目录。

  • 第四步:重新打开QtCreator,切换到工具-选项-kits,重新设置Qt5.15.2 webassemly的编译器,下拉选择Emscripten Compiler。



  • 第五步:新建个项目,拖几个控件放界面,编译大概一分钟左右,由于是静态编译时间会久一点,此时会生成五个文件,其中qtloader.js和qtlogo.svg每个项目是一样的,不同的文件是untitled.js、untitled.html、untitled.wasm。需要发布的话只需要将这5个文件拷贝到网站的WWW目录下就行。

  • 第六步:编译完成以后会自动打开电脑默认浏览器比如IE浏览器,因为IE浏览器不支持wasm,所以你需要将地址复制拷贝到edge或者谷歌火狐等浏览器运行。



  • 第七步:如果要支持中文则需要将中文字体文件添加到项目的资源文件一起编译。

  • 其他说明:首次加载比较慢,后面由于有缓存的原因重新加载非常快,建议发布的时候可以放一个带宽很好的服务器。

(三)、支持的模块

目前qt for webassembly套件不是支持所有的模块,比如常见的sql数据库模块就不支持,估计现在wasm还是定位在客户端的原因吧,network中的tcp udp也不支持,好消息是websocket client是支持的,也就意味着你可以写个websocket的server端负责监听和解析,web端直接websocket通信交互,比如传输视频数据,这不就是网页中显示实时视频了!亲测无误。

  • Qt5Charts
  • Qt5Core
  • Qt5Gui
  • Qt5Quick
  • Qt5Svg
  • Qt5WebSockets
  • Qt5Widgets
  • Qt5QuickControls2
  • 其他部分模块

三、效果图





qt for webassembly环境搭建图文教程的更多相关文章

  1. Myeclipse10 + JBPM4.4 环境搭建图文教程

    一.软件环境 IDE:Myeclipse10.0 (jbpm4.0以上版本好像只能与Myeclipse7.5以上版本集成) JBPM:4.4 与Myeclipse集成 1.解压jbpm-4.4.zip ...

  2. 使用Android Studio搭建Android集成开发环境(图文教程)

    ​[声明] 欢迎转载,但请保留文章原始出处→_→ 生命壹号:http://www.cnblogs.com/smyhvae/ 文章来源:http://www.cnblogs.com/smyhvae/p/ ...

  3. WindowsServer2012 R2 64位中文标准版(IIS8.5)下手动搭建PHP环境详细图文教程(二)安装IIS8.5

    //来源:http://www.imaoye.com/Technology/WindowsServer2012R264IIS85.html 阿里云服务器ECS Windows Server 2012 ...

  4. kubernetes(K8S)快速安装与配置集群搭建图文教程

    kubernetes(K8S)快速安装与配置集群搭建图文教程 作者: admin 分类: K8S 发布时间: 2018-09-16 12:20 Kubernetes是什么? 首先,它是一个全新的基于容 ...

  5. 转:Qt 嵌入式开发环境搭建

    地址: http://www.cnblogs.com/lishixian/articles/3013897.html         作者:lsx_007 这里主要是记录了自己在搭建嵌入式开发环境时阅 ...

  6. Win10 Anaconda下TensorFlow-GPU环境搭建详细教程(包含CUDA+cuDNN安装过程)(转载)

    win7(win10也适用)系统安装GPU/CPU版tensorflow Win10 Anaconda下TensorFlow-GPU环境搭建详细教程(包含CUDA+cuDNN安装过程) 目录 2.配置 ...

  7. 使用IntelliJ IDEA 13搭建Android集成开发环境(图文教程)

    ​[声明] 欢迎转载,但请保留文章原始出处→_→ 生命壹号:http://www.cnblogs.com/smyhvae/ 文章来源:http://www.cnblogs.com/smyhvae/p/ ...

  8. window 下Qt for android 环境搭建

    ******************************************************************* 转自http://www.cnblogs.com/rophie/ ...

  9. 大数据学习系列之四 ----- Hadoop+Hive环境搭建图文详解(单机)

    引言 在大数据学习系列之一 ----- Hadoop环境搭建(单机) 成功的搭建了Hadoop的环境,在大数据学习系列之二 ----- HBase环境搭建(单机)成功搭建了HBase的环境以及相关使用 ...

  10. [新手教程]windows 2003 php环境搭建详细教程(转)

    对于windows服务器的php环境配置一直是是新人朋友的难题,也难倒了很多高手.这里分享一个新手教程,给那些建站新人使用.本教程来自朋友吴文辉的博客,欢迎大家有时间可以访问他的博客:吴文辉博客htt ...

随机推荐

  1. 在ubuntu上面配置nginx实现反向代理和负载均衡

    上一篇文章(http://www.cnblogs.com/chenxizhang/p/4684260.html),我做了一个实验,就是利用Visual Studio,基于Nancy框架,开发了一个自托 ...

  2. img的绝对路径转为相对路径

    $('#add_img').on('change', function(){ var objUrl = getObjectURL(this.files[0]) ; if (objUrl) { $(th ...

  3. TrueSkill 原理及实现

    在电子竞技游戏中,特别是当有多名选手参加比赛的时候需要平衡队伍间的水平,让游戏比赛更加有意思.这样的一个参赛选手能力平衡系统通常包含以下三个模块: 一个包含跟踪所有玩家比赛结果,记录玩家能力的模块. ...

  4. Android开发环境搭建简介

    Android的开发工具,可以使用Eclipse,Idea,Android Studio,其中Eclipse是开源中国大部分使用的IDE,Idea是号称最好用的开发工具,有很多用处,Android S ...

  5. SDWebImage源码解读之分类

    第十一篇 前言 我们知道SDWebImageManager是用来管理图片下载的,但我们平时的开发更多的是使用UIImageView和UIButton这两个控件显示图片. 按照正常的想法,我们只需要在他 ...

  6. mysql_报错1418

    报错如下: 1418 - This function has none of DETERMINISTIC, NO SQL, or READS SQL DATA in its declaration a ...

  7. 网盘直链工具 winform版 V1.0

    软件需要.net2.0支持 win7及以上版本用户无需安装 xp用户需要安装 支持网盘:好盘 坚果云 百度云 乐视云 华为网盘 微云 新浪网盘 126disk 速度盘 乐齐盘 天空网盘 千脑网盘 可乐 ...

  8. ReactNative 深拷贝

    1: 导入 import _ from 'lodash' 2: _.cloneDeep(obj)

  9. C++ vector 容器浅析

    一.什么是vector? 向量(Vector)是一个封装了动态大小数组的顺序容器(Sequence Container).跟任意其它类型容器一样,它能够存放各种类型的对象.可以简单的认为,向量是一个能 ...

  10. SpringJDBC——jdbcTemplate模板

    一.定义 Spring框架对jdbc进行了封装,提供的一个JDBCTemplated对象简化jdbc开发. 使用步骤 1 导包spring-beans-5.0.0-RELEASE.jar,spring ...