Qtwebassembly

Qtwebassembly

Emscripten安装

说明

因为后续Qt编译需要用到Emscripten所以需要先安装。Emscripten和Qt是有版本对应关系，版本不匹配可能导致编译失败以及运行时奇怪问题。参照表如下：

Qt Version	Singlethreading	Multithreading	Additional info
5.12	1.38.16	NA
5.13	1.38.27	1.38.30
5.14	1.38.27	1.38.30	see “Emsdk version for Qt 5.14” below
5.15	1.39.8		tentative; 1.38.x/fasctcomp is no longer supported

对于使用其它版本编译不在此处说明，可以自行尝试，但应保证Emscripten不低于官方推荐版本。

安装

#下载源码
git clone https://github.com/juj/emsdk.git

cd emsdk

#查看当前可安装版本版本
./emsdk list

# 安装指定版本，如果要安装最新的则为latest
./emsdk install 1.39.8

# 激活
./emsdk activate --embedded 1.39.8

#环境配置，在activate命令执行后可根据输出中的next steps来处理,但该操作只对当前终端生效，如果要持久生效则加入当前bashrc中
source /path/to/emsdk/emsdk_env.sh

#可以通过emcc -v来测试命令是否可用，并且后续的编译一定要保证Emscripten可用
emcc -v

参考资料

• https://developer.mozilla.org/zh-CN/docs/WebAssembly/C_to_wasm
• https://wiki.qt.io/Qt_for_WebAssembly#Supported_Qt_Modules

Qt5.15源码编译

源码编译

• 1.下载源码工程(该工程只有模块目录没有实际内容)

git clone http://code.qt.io/qt/qt5.git

• 2.切换分支并同步子模块

#此处选择切换到5.15分支
git checkout 5.15

#在第一步中获取的其实并没有具体内容，可以通过init-repository根据需要获取具体模块,该文件为perl脚本，使用原型为perl init-repository[options] ,不带参数默认获取所有模块，具体使用方法可通过perl init-repository help获取
perl init-repository 

• 3.源码编译

#进入源码目录
cd qt5

#配置编译选项，与普通源码编译不同此处必须加入-xplatform wasm-emscripten， --prefix指定部署目录，因为目前并不是所有模块都支持因此对于一些不支持的模块直接skip
./configure --prefix=$PWD/qtbase -xplatform wasm-emscripten -confirm-license  -no-rpath -verbose -optimized-qmake -no-strip -recheck-all -skip qtwebengine -skip qtwebview -skip qtwayland -skip qtserialport -skip qtspeech -skip qtmultimedia

#编译
make -j$(nproc)

安装
make install 

参考链接：

• https://wiki.qt.io/Building_Qt_5_from_Git#Getting_the_source_code

测试

环境配置

Qtwebassembly编译与普通的安装的Qt工具包是不一样的，一定要使用通过指定wasm-emscripten编译生成的工具包和库来编译目标工程

#配置编译后工具路径
export PATH=/path/to/qt-wasm/qtbase/bin:$PATH

#配置加载库、插件等路径
export LD_LIBRARY_PATH=/path/to/qt-wasm/qtbase/lib
export QT_QPA_PLATFORM_PLUGIN_PATH=/path/to/qt-wasm/qtbase/plugins/platforms
export QT_PLUGIN_PATH=/path/to/qt-wasm/qtbase/plugins
export PKG_CONFIG_PATH=/path/to/qt-wasm/qtbase/lib/pkgconfig

#配置emcc
source "/path/to/emsdk/emsdk_env.sh"

编译

#进入编写的测试工程
cd /path/to/helloworld

#根据pro文件生成Makefile文件
qmake helloworld.pro

#执行Makefile文件编译
make -j4

这将产生几个输出文件：

名称	产生源	功能
helloworld.html	Qt	HTML container
qtloader.js	Qt	JS API for loading Qt apps
helloworld.js	emscripten	app runtime and JS API
helloworld.wasm	emscripten	app binary

运行

由于浏览器跨域问题不支持直接打开helloworld.html，如果要访问可以开启一个web服务器

# 8888 为端口号只要保证未被占用可自定义，如9999、7777等
python3 -m http.server 8888

在谷歌浏览器中访问http://0.0.0.0:8888/helloworld.html即可看到效果，如图:

测试工程

下载链接

其它

• qtwebassembly在html中加载实际上都是通过canvas绘制出来的
• 当前版本不支持中文，是因为无法访问宿主机的字体，如果想要支持可以尝试通过qrc携带字体文件然后使用QFontDatabase自行加载，后续版本是否支持待验证
• webassembly本质上是运行在浏览器沙盒中的，因此无法访问宿主机，如剪切板的复制粘贴功能等是不可用的，如需使用需要自行调用接口处理。