qt for webassembly环境搭建图文教程

一、前言

从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

2022-02-20 补充：
新版的qtcreator只要指定下emsdk的目录即可，更简单。

1. 下载好 https://github.com/emscripten-core/emsdk
2. 解压出目录 emsdk-main，进入cmd执行
   emsdk install 1.39.8 或者 2.0.14 或者 latest
   emsdk activate 1.39.8
   emsdk activate --embedded 1.39.8 或者对应版本
   执行 em++ --version 查看版本。
3. qtcreator 设备 webassembly 选择 emsdk-main 目录，自动识别。如果有多个Qt版本不同需要，动态切换这个目录即可。比如Qt5.15对应选择1.39.8，Qt6.2选择2.0.14。

4. 切换到构建套件看下是否正常。

   
   qt for web.jpg

二、搭建步骤

（一）、安装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
• 其他部分模块

三、效果图

110.gif 111.gif 112.gif