Qt for WebAssembly环境搭建

一、前言

从Qt5.15开始，官方的在线安装下载器提供了Qt for WebAssembly构建套件，通过这个套件可以将你现有的Qt程序直接编译成wasm文件，然后直接网页运行，主流的浏览器都支持，例如谷歌、火狐、edge等等（IE不行）；

大致的原理就是借助emsdk中的emscripten编译器将Qt的程序直接静态编译生成wasm文件,然后同时生成对应的js文件和html文件，js文件负责加载，wasm文件进行编译使用canvs绘制程序；

---

WebAssembly介绍：

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

---

二、Ubuntu

1、在线安装Qt15：在线安装下载器：https://download.qt.io/official_releases/online_installers/

安装时记得勾选WebAssembly，如下：

---

2、安装依赖

# Install Python
sudo apt-get install python2.7

# Install CMake (optional, only needed for tests and building Binaryen)
sudo apt-get install cmake

# Install Java (optional, only needed for Closure Compiler minification)
sudo apt-get install default-jre

---

3、安装Emscripten SDK

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

cd emsdk

./emsdk install 1.39.8	

./emsdk activate 1.39.8

./emsdk list	//查看安装版本

source ./emsdk_env.sh

em++ -v

附：卸载只需要删除emsdk文件夹重新下载配置即可

选择相应的版本进行安装，否则会出问题，不一定成功

Qt Version	Singlethreading	Multithreading Additional info
5.12	1.38.16	NA
5.13	1.38.27	1.38.30
5.14	1.38.27	1.38.30 详情见Qt for WebAssembly - Qt Wiki
5.15	1.39.8	暂定; 不再支持1.38.x/fasctcomp
更多Emscripten SDK安装细节见Download and install - Emscripten Doc.

---

4、将emsdk/.emscripten文件复制到~路径，并修改emsdk的路径

---

5、配置Qt编译器
工具–>选项–>设备，设置emsdk路径

6、新建工程、编译

编译会生成这5个文件：

• qtloader.js
• qtlogo.svg
• Test.html
• Test.js
• Test.wasm
  

因为不支持直接从文件打开，所以如果要对页面进行访问，最简单的方法就是用python开启一个web服务器：

python3 -m http.server

然后在浏览器（例如Ubuntu自带的火狐）中直接打开http://127.0.0.1:8000/test.html就能看到程序了

---

三、Windows

---

四、支持的模块

目前Qt for WebAssembly套件不是支持所有的模块，比如sql数据库模块、network中的tcp/udp，支持的模块如下：

• Qt5Charts
• Qt5Core
• Qt5Gui
• Qt5Quick
• Qt5Svg
• Qt5WebSockets
• Qt5Widgets
• Qt5QuickControl2
• 其它模块