Qt 5.14.1 webassembly build 編譯 環境搭建和代碼調試 並實現js和c++傳遞字符數組

 環境搭建

本文主要是針對ubuntu/mac編譯環境搭建和調試環境 可以直接參考下面的dockerfile

qt wasm build
docker pull colorlength/qt-webassembly-build-env:latest docker run -v $BUILD_PWD/build_wasm:/project/build -v $SOURCE_PWD:/project/source colorlength/qt-webassembly-build-env:latest $BUILD_PWD編譯目錄 $BUILD_PWD源碼目錄qt pro所在路徑 注意源碼中的路徑必須是/

https://github.com/QueenConch/wasm

1.運行環境

選擇了虛擬機里安裝了ubuntu版本和內核號如圖

 

 2. 安裝emscripten

按照https://emscripten.org/docs/getting_started/index.html的方式安裝最新版emscripten編譯器

首先下載

# 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 time you clone)
git pull

# Download and install the latest SDK tools.
./emsdk install latest

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

# Activate PATH and other environment variables in the current terminal
source ./emsdk_env.sh

選擇安裝Python CMake Java

# 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

當然你也可以選擇安裝特定版本的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的源碼

新安裝的小伙伴在

https://download.qt.io/official_releases/qt/5.14/5.14.1/

下載對應的版本並運行

 chmod +x 程序 ./程序 

填上郵箱開始安裝拉

鈎上4.11的qt和源碼開始安裝拉

安裝完成后關閉。

 

考慮到編譯器版本兼容問題，決定手動編譯qt源碼生產成webassembly二進制。

不想編譯的可以用在線版本安裝編譯好的webassembly二進制

下載地址在里面可以選擇編譯好的webassembly版本這里我們跳過這一部直接開始編譯

https://download.qt.io/official_releases/online_installers/

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

這個時候編譯報錯了 

 

 

 

查了一下資料

 

For @Calinou's issue, it's because emscripten 1.39.5 broke compatibility again: https://github.com/emscripten-core/emscripten/blob/incoming/ChangeLog.md#v1395-12202019

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`

 

8.實現js和c++傳遞數組數據

c++寫個函數

extern "C" EMSCRIPTEN_KEEPALIVE int set_data_demo(char* data, int len)
{
    qInfo() << "received:" << QString::fromUtf8(data, len);
    return strlen(data);
}

javascript調用_malloc生成 HEAPU8.buffer這個對象 用完_free 這個對象經過測試c、c++直接可以用是zero copy的效率很高

var str = `{
    "token": "token10000",
        "version": 10000,
}`

var datalen = str.length;

var arr = [];
for (var i = 0, j = str.length; i < j; ++i) {
   arr.push(str.charCodeAt(i));
  }
 
var tmpUint8Array = new Uint8Array(arr);

var dataPtr = _malloc(datalen)

var dataHeap = new Uint8Array(HEAPU8.buffer, dataPtr, datalen)

dataHeap.set(new Uint8Array(tmpUint8Array .buffer))

_set_data_demo(dataHeap.byteOffset, datalen)

_free(dataHeap.byteOffset)

 

　　

參考資料：

1.Qt for WebAssembly官方教程

https://doc.qt.io/qt-5/wasm.html

2. WebAssembly的限制

 https://doc.qt.io/qt-5/qtwebassembly-platform-notes.html

3. Qt 下載地址主源

https://download.qt.io/

4.emscripten編譯器的文檔

https://emscripten.org/docs/getting_started/index.html