Qt for WebAssembly in Windows

阿婆克烈：码字不易，希望各位在引用等时候可以标明出处，谢谢。

这位客官，你要的web界面不知是想来一发web编程？还是…

想要web界面不一定得懂web编程的，自Qt推出5.12版本以来， Qt for WebAssembly就受到了高度的关注，通过这项技术就能让各位客官的Qt图形界面程序直接在网页上跑啦。

Qt for WebAssembly这项技术的使用需要两个主角：

• Qt5.12源码 or newer；
• 对应版本的emscripten sdk(emsdk)；

通过emsdk编译Qt源码得到Qt-Wasm版的qmake，使用这个qmake编译工程得到的 .html、.js、.wasm 文件就是各位客官需要web版Qt程序了。具体使用方法后面再说，现在就让我们来康康怎么得到这个Qt-Wasm版的qmake吧。

• 这里先放出两位主角的技术文档
  Qt官方文档：
  https://wiki.qt.io/Qt_for_WebAssembly
  emscripten官方文档：
  https://emscripten.org/docs/getting_started/downloads.html

---

• Qt源码下载：http://download.qt.io/archive/qt/

在里面选择自己需要的版本后，找到 single/ 路径，里面的 .zip 包就是windows版本的源码包，自行下载后找个无中文路径解压就好，这个就不多说了（乜嘢啊，解压都要我讲解啊 ）。

选择困难的可以和我一样的选择，我选择的是 Qt 5.13.0 的源码。

---

• emsdk安装：
  先来看一下Windows下安装emsdk需要什么依赖包/程序：
  安装 Git
  安装 Python 2.7.12 or newer
  安装 CMake

关于emsdk的版本选择，在Qt的官方文档中已经给出了各版本对应的emsdk版本号，这里也给出一份（不持续更新）：

• Qt 5.12: 1.38.16
• Qt 5.13: 1.38.27 (multithreading: 1.38.30)
• Qt 5.14: 1.38.27 (multithreading: 1.38.30)

需要的东西都准备好了，下面就开始安装emscripten吧。

1. 准备一个无中文的路径，比如D:\emsdk，以管理员模式打开cmd，进入到刚刚准备好的目录下。

//cmd下如何跳转到指定路径？
***> cd D:\emsdk
***> d:

2. 从Github上获取emsdk源码

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

3. 下载成功后进入目录

***> cd emsdk

4. 获取最新版本的emsdk

***> git pull

5. 获取emsdk列表，并写入到文本中

***> emsdk list --old > sdklist.txt

6. 下载、安装SDK tools

//安装命令：emsdk install 版本号
//版本号从5中得到的列表获取，也可以看Qt官方文档的实例，想获取最新版本则填写 latest 即可
//这里给出我的做法
***> emsdk install sdk-fastcomp-1.38.27-64bit

7. 把emsdk tool写入环境变量

//更新环境变量命令：emsdk activate 版本号 --global
//版本号 填写 6中选择的版本号
//这里给出我的做法
***> emsdk activate sdk-fastcomp-1.38.27-64bit --global

8. 激活环境变量

***> emsdk_env.bat

到目前为止，emscripten的安装步骤就跑完了，下面就是验证过程：

//在别的路径打开cmd，比如安装在D:\emsdk\emsdk，那我就在桌面打开cmd
C:\Users\Administrator> em++ -v   //或者 emcc -v

如果cmd上成功打印出emscripten的版本信息，恭喜你已经完成了emscripten的安装了；若是没有找到内部程序，请重启windows再试一次，若依旧不行，那就要确认windows环境变量是否已经添加emsdk tool路径了。

---

安装完emscripten后 就轮到Qt源码的编译了。
在编译Qt源码之前，各位客官需要准备两样东西：

1. 安装 MinGW
2. 安装 Sed
3. 安装 Git Bash（安装Git时默认勾选）

如何确定自己的windows是否已经具有 MinGW 和 Sed ？

***> mingw32-make -v
***> sed --version

若没有出现相关版本信息的就是windows不具备该程序了；
查看\Path\Git\usr\bin下是否具有相关shell命令程序，比如cp.exe、rm.exe；
好的，在物质准备好后就继续开车了。

• Qt源码编译
  进入到Qt源码解压的目录下编译源码，以我的操作为栗子：

C:\Users\Administrator> cd D:\QtWasm\qt-everywhere-src-5.13.0
C:\Users\Administrator> d:
D:\QtWasm\qt-everywhere-src-5.13.0> configure -xplatform wasm-emscripten -platform win32-g++ -nomake tests -nomake examples -prefix %CD%\qtbase -no-warnings-are-errors
//configure过程会出现协议选择
选项一：选择 o 表示开源使用
选项二：选择 y 表示接受协议
//配置完成无错误后 mingw32-make 完成编译
D:\QtWasm\qt-everywhere-src-5.13.0> mingw32-make

编译过程会很久，请各位选择好操作时段。
编译没有出现错误下，在 源码目录\qtbase\bin下会有我们需要的Qt-Wasm版的qmake。

---

下面开始尝试这份快乐了：

• 准备一个Qt界面工程
• cmd进入工程目录（有 .pro 的地方），输入命令

***> 源码目录\qtbase\bin\qmake && mingw32-make

待工程编译完后，会出现以下警告（没出就不管了）

• 这个警告是可以忽略的
  完成后你可以在工程目录下找到以下三个文件：
  

由于目前Qt for WebAssembly只能直接用于部分浏览器，这里给出一个可用于任意浏览器的使用方法：

• 在那三个文件的目录下执行以下命令

//命令格式：emrun --no_browser --port 端口号 目标路径
***> emrun --no_browser --port 8080 ./

通过端口访问以达到适用于任意浏览器，下面以傲游为例：
在地址栏键入：localhost:8080/1111.html

• 这是加载过程，耐心等待一下。

---

• 这就是我写的一个测试工程，简单的一个ok键，现在直接就呈现在网页上使用了，也验证了 Qt for WebAssembly in Windows 的搭建成功。

---

以上就是完整的Qt for WebAssembly in Windows搭建过程了，各位客官请慢用…

• 点赞、收藏、分享什么的我不介意的，真的。？！你们什么眼神？！