Tested on Ubuntu 20.04 LTS
Install Qt 5.14.2
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
In Kits
, configure Compiler
of Qt 5.14.2 WebAssembly
as the following
Apply
and done.
Test
It took ~25 minutes to compile a project.
The following files are generated
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.
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 - 知乎