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本质上是运行在浏览器沙盒中的,因此无法访问宿主机,如剪切板的复制粘贴功能等是不可用的,如需使用需要自行调用接口处理。