环境搭建

本文主要是针对ubuntu/mac编译环境搭建和调试环境 可以直接参考下面的dockerfile

1.运行环境

选择了虚拟机里安装了ubuntu版本和内核号如图

首先下载

# Get the emsdk repo

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

# Enter that directory

cd emsdk

然后安装em++

# Fetch the latest version of the emsdk (not needed the first timeyou clone)

git pull

# Download and installthe latest SDK tools.

./emsdk installlatest

# Make the "latest" SDK "active" for the current user. (writes ~/.emscripten file)

./emsdk activate latest

# Activate PATH and other environment variables inthe current terminal

source ./emsdk_env.sh

选择安装Python CMake Java

# Install Python

sudo apt-get install python2.7# Install CMake (optional, only needed fortests and building Binaryen)

sudo apt-get installcmake

# Install Java (optional, only needed forClosure Compiler minification)

sudo apt-get install default-jre

当然你也可以选择安装特定版本的em++这里我就选择最新版拉下面步骤跳过y

./emsdk install 1.38.45

可以指定特定版本的后台

# Get a specific version using the upstream backend.

./emsdk install latest-upstream

# Get a specific version using the fastcomp backend.

./emsdk install 1.38.45-fastcomp

输入查看版本

em++ --version

能显示出emcc版本号 到此编译器安装成功

3.编译安装qt

1. 已经安装qt 5.14以上的小伙伴打开qt目录下的 MaintenanceTool进行修改增加qt的源码

新安装的小伙伴在

下载对应的版本并运行

chmod +x 程序 ./程序

填上邮箱开始安装拉

钩上4.11的qt和源码开始安装拉

安装完成后关闭。

考虑到编译器版本兼容问题，决定手动编译qt源码生产成webassembly二进制。

不想编译的可以用在线版本安装编译好的webassembly二进制

下载地址在里面可以选择编译好的webassembly版本这里我们跳过这一部直接开始编译

4.编译qt库

qt目录下新建一个目录来存放编译的进制库

比如我在qt目录下建了一个wasmbuild的目录方便存文件

cd进入qt源码目录 输入刚才建的目录开始编译确认。

~/Qt5.14.1/5.14.1/Src

./configure -xplatform wasm-emscripten -nomake examples -prefix ../wasmbuild/qtbase

其中要选择开源版并同意协调

开始编译吧 这步比较久，喝个茶再回来

make module-qtbase module-qtdeclarative

这个时候编译报错了

查了一下资料

Removed timestamp field from mouse, wheel, devicemotion and deviceorientation events. The presence of a timestamp on these events was slightly arbitrary, and populating this field caused a small profileable overhead that all users might not care about. It is easy to get a timestamp of an event by calling emscripten_get_now() or emscripten_performance_now() inside the event handler function of any event.

qt更新比较慢5.14.1还不支持新版em++

我改回em++ 1.38.30

./emsdk install sdk-fastcomp-1.38.30-64bit

./emsdk activate --embedded sdk-fastcomp-1.38.30-64bit

source ./emsdk_env.sh

重新回到源码目录进行编译并安装到wasm目录下

./configure -xplatform wasm-emscripten -nomake examples -prefix ../wasmbuild/qtbase

make module-qtbase module-qtdeclarative

make install

成功！

这个时候就能用编译的qmake 的命令行 编译项目拉，配置一下qtcreator会比较方便下一步

比如

$ ~/Qt5.14.1/5.14.1/wasmbuild/qtbase/bin/qmake

$ make

到此命令行的编译环境配置完毕

下面我们配置一下qtcreator界面调试哈

5.设置调试

1.qt creator打开webassembly的插件

配置编译器

配置qt版本(qmake)

配置kit

6.运行demo

7.可参考Dockerfile

FROM trzeci/emscripten:1.38.45 AS baseBuild

ARG packages="build-essential git cmake \

python3 \

python \

ninja-build \

build-essential \

wget \

"

# Required for non-interactive timezone installation

RUN ln -fs /usr/share/zoneinfo/Europe/Berlin /etc/localtime

RUN apt-get update && apt-get install -q -yy $packages

RUN mkdir -p /root/dev

WORKDIR /root/dev

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

# WORKDIR /root/dev/emsdk

# RUN ./emsdk install sdk-fastcomp-1.38.30-64bit

# RUN ./emsdk activate --embedded sdk-fastcomp-1.38.30-64bit

# ENV PATH="/root/dev/emsdk:/root/dev/emsdk/fastcomp-clang/e1.38.30_64bit:/root/dev/emsdk/node/8.9.1_64bit/bin:/root/dev/emsdk/emscripten/1.38.30:${PATH}"

FROM baseBuild AS qtbuilder

# ARG targetBranch=5.14.1

RUN mkdir -p /development

WORKDIR /development

# RUN git clone --branch=$targetBranch git://code.qt.io/qt/qt5.git

RUN wget https://download.qt.io/archive/qt/5.14/5.14.1/single/qt-everywhere-src-5.14.1.tar.xz

RUN tar -xvJf qt-everywhere-src-5.14.1.tar.xz

WORKDIR /development/qt5

RUN mkdir -p /development/qt5_build

WORKDIR /development/qt5_build

RUN /development/qt-everywhere-src-5.14.1/configure -xplatform wasm-emscripten -nomake examples -nomake tests -opensource -feature-thread --confirm-license -prefix /usr/local/Qt

RUN make module-qtbase module-qtdeclarative -j `grep -c ‘^processor‘ /proc/cpuinfo`

# RUN make -j `grep -c ‘^processor‘ /proc/cpuinfo`

RUN make install

# Construct the build image from user perspective

FROM baseBuild AS userbuild

COPY --from=qtbuilder /usr/local/Qt /usr/local/Qt

ENV PATH="/usr/local/Qt/bin:${PATH}"

WORKDIR /project/build

# CMD qmake /project/source && make -j `grep -c ‘^processor‘ /proc/cpuinfo`

CMD /usr/local/Qt/bin/qmake /project/source && make -j `grep -c ‘^processor‘ /proc/cpuinfo`

参考资料：

1.Qt for WebAssembly官方教程

2. WebAssembly的限制

3. Qt 下载地址主源

原文：https://www.cnblogs.com/wormholes/p/12296367.html