## 一、前言
从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/](https://feiyangqingyun.gitee.io/qwidgetdemo/)
2. qt+quick编译的程序网页地址：
[https://feiyangqingyun.gitee.io/qwidgetdemo/gallery.html](https://feiyangqingyun.gitee.io/qwidgetdemo/gallery.html)
3. WebAssembly中文网
[https://www.wasm.com.cn/](https://www.wasm.com.cn/)
4. qt for webassembly官网介绍
[https://doc.qt.io/qt-5/wasm.html](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文件复制到