演示通过cmake将Qt6项目编译为WebAssembly，并加载自定义中文字体
首先在官网注册并下载安装Qt。安装时需要勾选WebAssembly选项。截止目前本文所采用的Qt 6.2版本中，WebAssembly还是作为技术预览版出现，不太适合用于生产环境。
直接上代码
// main.cpp
#include <QGuiApplication>
#include <QQmlApplicationEngine>
#include <QQmlContext>
#include <QFontDatabase>
int main(int argc, char *argv[]) {
QGuiApplication app(argc, argv);
// 设置全局字体，用于解决Qt for WebAssembly中文显示异常问题
// fileName 参数不用带qrc前缀
int fontId = QFontDatabase::addApplicationFont(":/qtwasm/qrc/ZhiMangXing-Regular.ttf");
QStringList fontFamilies = QFontDatabase::applicationFontFamilies(fontId);
qDebug()<<"fontfamilies:"<<fontFamilies;
if (fontFamilies.size() > 0)
{
QFont font;
auto fontFamilie = fontFamilies[0];
font.setFamily(fontFamilie);//设置全局字体
app.setFont(font);
}
QQmlApplicationEngine engine;
const QUrl url(QStringLiteral("qrc:/qtwasm/qrc/Main.qml"));
engine.load(url);
if (engine.rootObjects().isEmpty())
return -1;
return app.exec();
}
通过QFontDatabase类加载自定义字体。其实fileName不需要加qrc前缀，不然加载不出来。
QML文件内容如下：
// Main.qml
import QtQuick
import QtQuick.Controls
import QtQuick.Layouts
Window {
visible: true
width: 800
height: 600
title: qsTr("Hello World")
App{
}
}
// App.qml
import QtQuick
import QtQuick.Controls
import QtQuick.Layouts
ColumnLayout {
Layout.fillHeight: true
Layout.fillWidth: true
RowLayout {
height: 40
Text {
text: "Hello中文😯"
font.pointSize: 20
}
}
RowLayout {
Layout.preferredHeight: 80
TextEdit {
text: "Please Input 请输入内容"
selectByMouse: true
font.pointSize: 20
}
}
}
qml内容比较简单，只是演示目的 CMakeLists.txt文件内容如下：
cmake_minimum_required(VERSION 3.15)
project(qt-wasm VERSION 0.1 LANGUAGES CXX)
set(CMAKE_VERBOSE_MAKEFILE ON)
set(CMAKE_INCLUDE_CURRENT_DIR ON)
set(CMAKE_AUTOUIC ON)
set(CMAKE_AUTOMOC ON)
set(CMAKE_AUTORCC ON)
set(CMAKE_CXX_STANDARD 20)
set(CMAKE_CXX_STANDARD_REQUIRED ON)
find_package(Qt6 COMPONENTS Core Gui Quick REQUIRED)
set(PROJECT_SOURCES
main.cpp)
qt_add_executable(qt-wasm
MANUAL_FINALIZATION
${PROJECT_SOURCES})
target_link_libraries(qt-wasm
PRIVATE Qt6::Core Qt6::Gui Qt6::Quick)
# 当编译WebAssembly时修改链接参数，否则会报初始内存太小错误
if(EMSCRIPTEN)
target_link_options(qt-wasm PRIVATE -s TOTAL_MEMORY=32MB)
endif()
qt_import_qml_plugins(qt-wasm)
qt_finalize_executable(qt-wasm)
qt_add_qml_module(qt-wasm
URI qtwasm
VERSION 1.0
QML_FILES
qrc/Main.qml qrc/App.qml
RESOURCES
qrc/ZhiMangXing-Regular.ttf)
其中qt_add_qml_module为qt 6.2新增的cmake api 在编译wasm时遇到了初始内存大小超出限制的错误，经过搜索需要加上TOTAL_MEMORY链接参数。在以上cmake文件内容中，通过判断是WebAssembly平台即加上该参数。 中文字体可以在网上下载或本机系统目录中拷贝。
在项目目录执行以下命令构建wasm文件：
mkdir build
cd build
cmake -DCMAKE_PREFIX_PATH=~/Qt/6.2.0/macos/lib/cmake -DCMAKE_TOOLCHAIN_FILE:PATH=~/Qt/6.2.0/wasm_32/lib/cmake/Qt6/qt.toolchain.cmake ..
make
需要把qt的文件目录，和wasm工具链的路径参数传递给cmake命令。 注意需要提前安装Emscripten编译环境，参考官方链接安装：Download and install — Emscripten 3.1.4-git (dev) documentation 执行make构建完成后，会在build目录生成以下文件：
qt-wasm.html
qt-wasm.js
qt-wasm.wasm
qtloader.js
其中qt-wasm是我们在CMakeLists.txt文件中设置的可执行文件名称 如果想看构建完wasm文件之后的运行效果，可以在build目录启动一个简单的http服务器，在浏览器访问相应端口即可。 这里采用node的http-server来运行：
npm i -g http-server # 安装工具，需要node环境 http-sever # 下build目录执行该命令
执行完http-server命令后，即可在浏览器中访问127.0.0.1:8080来查看编译后的效果。 qt通过网页中的canvas来绘制qml文件中描述的内容。
目前可以显示中文了，但是对中文输入法的支持很不好，无法正常输入。同时生成的wasm文件大约有20M，即使gzip压缩后也有7M左右，是不太适合直接应用到网站项目中的。希望后续会有所改善。
