体验Qt for WebAssembly（二）

上一篇说到Qt Creator配置WebAssembly，通过Qt Creator编译Qt程序并运行

部署

编译会生成以下几个文件

文件名	文件说明
app.html	HTML 页面
qtloader.js	js文件，调用wasm加载Qt程序的内容
app.js	js文件，加载Qt程序
app.wasm	emscripten 编译生成的二进制文件
qtlogo.svg	网页图标

打包部署其实只需要这几个文件即可

app.html为程序显示入口，app.html通过qtloader.js和app.js加载Qt应用的内容进行显示，通过查看app.html、qtloader.js、app.js的内容，很容易看到他们之间的调用关系

我们使用浏览器打开app.html并不能直接运行，会提示“TypeError: Failed to fetch”

需要通过web服务器访问app.html才能正常启动

我们可以通过python快速启动一个web服务器进行显示，

1.打开命令行工具，进入项目所在的目录，即app.html所在的目录

cd F:\PROJECT\build-TestSnowPage-Qt_5_15_2_WebAssembly-Release

2.python开启web服务器

#端口号为8000
C:\Users\Mango\AppData\Local\Programs\Python\Python39\python.exe -m http.server 8000

3.浏览器启动app.html

E:/emsdk-main/upstream/emscripten/emrun.py --browser chrome --port 8000 F:\PROJECT\build-TestSnowPage-Qt_5_15_2_WebAssembly-Release\TestSnowPage.html

通过Qt Creator运行就是通过这个方式进行启动的

Qt Creator依赖python环境来启动的，如果事先没安装python，在配置emscripten环境的时候安装有python，可以按上面的方式用命令行启动

我们也可以通过部署其他web服务器，如IIS、Apache、Nginx，只需要打包上面所说的五个文件进行部署，设置app.html为启动页面即可

IIS部署Qt for WebAssembly应用

1.首先把编译生成的那五个文件拷贝出来放到一个单独的文件夹

2.win10下开启IIS，百度出来很多，贴一个地址https://jingyan.baidu.com/article/ea24bc39c43d72da62b331ce.html

3.打开IIS管理器，右键网站>添加网站

4.物理路径选择第一步创建的目录，端口号换一个，80已经被占用了

5.设置默认文档，选择项目对应的app.html

6.启动服务器

7.在浏览器打开http://localhost:8000/就可以运行了

这样一个Qt for WebAssembly应用就部署起来了，其他网络互通的设备也能通过浏览器访问该站点

到这里，你是不是想着Qt是不是也能来写web应用了，哈哈哈哈

现在web前端技术这么成熟，通过Qt来写前端没有任何优势的啦，拿来耍耍可以，或者特殊情况使用

中文不显示问题

运行一个带有中文的Qt程序我们会发现中文无法显示，变成一个个方框

Qt for WebAssembly目前还无法显示中文，这是因为无法使用浏览器或者说客户宿主机的字体，缺少相关的中文字体库，需要程序本身就带有中文的字体库才能显示

提供一个字体库下载，文泉驿字体库，不算大，5m不到

网盘下载：https://pan.baidu.com/s/1OYYxTWlE2r0VxBrJ1QvkNg，提取码：cr63

加载中文字体库

QFontDatabase::addApplicationFont(":/ttf/WenQuanWeiMiHei-1.ttf");

加载之后就能正常显示中文啦

网上有的文章会介绍中文字体库的一个裁剪，因为中文字体库一般会比较大，静态链接会使程序变得很大，有需要的可以自行了解

结语

Qt for WebAssembly的介绍就靠一段落了，WebAssembly 作为一门新技术，已经被官方 Web 标准接纳，继HTML、CSS 与 JavaScript这3种语言后，WebAssembly 成为了第 4 种 Web 语言，相信以后会有更大的发展，让我们拭目以待