QT(17)-webAssembly安装

1.基础环境

复制代码

#安装所需要的gcc编译器
sudo apt-get install build-essential
#安装Qt运行所需要的库
sudo apt-get install libxcb-xinerama0
sudo apt-get install mesa-common-dev

2.安装Emscripten

下载地址：Tags · emscripten-core/emsdk · GitHub

下载后，解压到一个目录中，注意不要有中文或空格

打开shell终端，执行如下

复制代码

./emsdk install 3.1.34

注：可能会失败，可以多次执行几次

下载完成后，执行如下命令，激活并配置环境变量

复制代码

./emsdk activate --embedded 3.1.34
source ./emsdk_env.sh

注意，配置完成后，要执行以下命令验证下

复制代码

em++ --version

3.安装QT-下载源码

复制代码

sudo apt-get install qtbase5-dev qtchooser qt5-qmake qtbase5-dev-tools qtcreator

sudo apt-get install -y vim git gcc g++ make libgl1-mesa-dev libglu1-mesa-dev libssl1.0-dev libssl-dev

sudo apt-get install -y 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

sudo apt-get install -y python3-dev openjdk-8-jdk

下载源码：Index of /archive/qt

进入源码目录，编译

ps:测试qt-everywhere-opensource-src-5.15.8可以用

复制代码

source /opt/emsdk-3.1.34/emsdk_env.sh
./configure -xplatform wasm-emscripten -nomake examples -qreal double -feature-thread -prefix /opt/wasm
#注：-prefix 是安装目录，可以修改成自己的目录
若没有错误发生，继续执行
make -j4  //这里要很久
make install

4.QT配置

增加用户配置

EMCC

em++

添加版本，这里安装的5.15.3，编译的是5.15.8，不匹配

添加QT kits

5.测试验证-命令行方式

创建项目

复制代码

在工程目录下
source /opt/emsdk-3.1.34/emsdk_env.sh
/opt/wasm/bin/qmake
make
emrun --no_browser --port 8080 .

显示在了网页中

6.WEBGL测试

创建项目

测试

复制代码

编译完后，命令行执行
./MyApp -platform webgl:port=8998
通过打开浏览器，输入 127.0.0.1:8998 来访问
有一个缺点，一次只能跑一个实例