Qt 5.15.2版本 尝试Qt for WebAssembly模块

Qt官方介绍WebAssembly

一、安装Qt 5.15.2版本

两种安装方式：

1、下载Qt源码包自行编译

Qt源码包下载地址

2、Qt在线安装模式(推荐)

在线安装模式就和以前的安装模式一样，安装下来就是编译好了的环境，防止你自行编译的过程中出什么错误

Qt在线安装包下载地址

 选择安装路径

选择安装版本

 然后一顺next就可等待在线安装了

二、安装Emscripten

#从git克隆项目至本地
git clone https://github.com/emscripten-core/emsdk.git

#切换至目标路径
cd emsdk
git pull

#安装Qt5.15对应的1.39.8版本
sudo ./emsdk install 1.39.8
sudo ./emsdk activate --embedded 1.39.8

#应用版本修改环境变量
source ./emsdk_env.sh
em++ --version

如下输出确保对应版本安装正确

 三、其他依赖库环境安装

#安装C++的编译环境
sudo apt-get install build-essential

#安装libgl相关库
sudo apt-get insatll libgl1-mesa-dev libglu1-mesa-dev

#安装其他相关库
sudo apt-get install libfontconfig1-dev libfreetype6-dev libx11-dev libxext-dev libxfixes-dev libxi-dev libxrender-dev libxcb1-dev libx11-xcb-dev libxcb-glx0-dev libxkbcommon-x11-dev libxcb-keysyms1-dev libxcb-image0-dev libxcb-shm0-dev libxcb-icccm4-dev libxcb-sync0-dev libxcb-xfixes0-dev libxcb-shape0-dev libxcb-randr0-dev libxcb-render-util0-dev

#安装python环境
sudo apt-get install python

#安装jdk环境
sudo apt-get install openjdk-8-jdk

 

四、编译qmake环境

切换至Qt安装目录下的Qt源码目录

即opt/Qt/5.15.2/Src目录下

#进行Qt-wasm编译模式的设置
sudo ./configure -xplatform wasm-emscripten -nomake examples -prefix $PWD/qtbase

编译所需依赖库

make module-qtbase module-qtdeclarative [other modules]

设置当前编译完成的环境为qmake默认路径

#打开编辑默认设置文件
sudo vim /usr/lib/x86_64-linux-gnu/qt-default/qtchooser/default.conf
 
#更改第一行为安装目录下的bin目录，第二行为安装目录
/opt/Qt/5.15.2/Src/qtbase/bin
/opt/Qt/
 
#最后执行qmake指令查看设置结果
qmake -v

#执行em++指令查看emsdk的设置结果
em++ -v

若均配置成功可看到如下输出

五、实际demo试用

切换至所需编译Qt工程源码*.pro文件目录，在此我以Qt源码例子clocks为例

#源码目录下执行qmake生成makefile文件
qmake

#执行make文件生成可执行文件以及网页文件
make

 如图所示，除了生成clocks可执行文件外，还生成了

clocks.html 

clocks.js

qtloader.js

clocks.wasm

这四个网页所需文件

要想成功启动网页文件，还需要再本地启动web服务

在当前clocks.html文件所在目录下新开终端

#启动web服务
python3 -m http.server

然后仍是在当clocks.html文件所在目录下调用本地firefox启动网页

#依托emsdk文件夹下的emrun命令启动html文件
sudo ~/emsdk/upstream/emscripten/emrun --browser=firefox clocks.html

 即可正常启动编译出来的html文件