Qt for WebAssembly测试记录

Tested on Ubuntu 20.04 LTS

Install Qt 5.14.2

Qt for WebAssembly测试记录_第1张图片

Install Emscripten SDK 1.38.30

# 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

# Get the emsdk repo
git clone https://github.com/emscripten-core/emsdk.git

# Enter that directory
cd emsdk

# Fetch the latest version of the emsdk (not needed the first time you clone)
git pull

# install (1.38.30 supports multithreading)
./emsdk install sdk-fastcomp-1.38.30-64bit
./emsdk activate sdk-fastcomp-1.38.30-64bit

# check if .emscripten exists in home directory, if not
cp .emscripten ~

Modify ~/.emscripten such that the configuration of emsdk can be detected by Qt Creator. For example:

import os
LLVM_ROOT = '/home/mas/emsdk/fastcomp-clang/e1.38.30_64bit'
EMSCRIPTEN_NATIVE_OPTIMIZER = '/home/mas/emsdk/fastcomp-clang/e1.38.30_64bit/optimizer'
BINARYEN_ROOT = '/home/mas/emsdk/fastcomp-clang/e1.38.30_64bit/binaryen'
NODE_JS = '/home/mas/emsdk/node/8.9.1_64bit/bin/node'
EMSCRIPTEN_ROOT = '/home/mas/emsdk/emscripten/1.38.30'
TEMP_DIR = '/home/mas/emsdk/tmp'
COMPILER_ENGINE = NODE_JS
JS_ENGINES = [NODE_JS]

Open Qt Creator to configure emsdk. In Options, click Re-detect and Apply. If nothing goes wrong, it would be like

Qt for WebAssembly测试记录_第2张图片

In Kits, configure Compiler of Qt 5.14.2 WebAssembly as the following

Qt for WebAssembly测试记录_第3张图片

Apply and done.

Test

It took ~25 minutes to compile a project.

Qt for WebAssembly测试记录_第4张图片

The following files are generated

Qt for WebAssembly测试记录_第5张图片

As I've installed apache on my remote server, I copy the files above to /var/www/html on remote server. It looks 'fine' on Opera on my Android phone, yet it performs better on Firfox.

Qt for WebAssembly测试记录_第6张图片

Here's MineField and 2048 that runs on my server, check it as you wish.

Reference

Qt for WebAssembly - Qt Wiki

Qt for WebAssembly入门 - Qt Blog

Building Applications for the Web - Qt Creator Manual

QtWebassembly 编译使用 - 知乎

浏览器上的Qt Quick - 知乎

你可能感兴趣的:(Qt for WebAssembly测试记录)