Qt for WebAssembly手把手通关教程
QtCoderStudio2年前3855
Qt for WebAssembly
通关教程
— 主讲人：FireMan2017001（Qt界的巴神） —
— C++开发WEB程序
WebAssembly 是一种二进制格式，允许在网页中使用沙盒可执行代码。这种格式几乎与本机机器代码一样快，现在所有主要的 Web 浏览器都支持这种格式。Qt for WebAssembly是一个平台插件，可让您构建Qt应用程序，这些应用程序可以集成到您的网页中。它不需要任何客户端安装，并减少了服务器端资源使用量。WebAssembly（缩写为 wasm）是一种使用非 JavaScript 代码，并使其在浏览器中运行的方法。这些代码可以是 C、C++ 或 Rust 等。它们会被编译进你的浏览器，在你的 CPU 上以接近原生的速度运行。WebAssembly就是用来解决JavaScript 当前存在的一些效率等问题，WebAssembly不能替代 Javascript，相反，这两种技术是相辅相成的。通过 JavaScript API，你可以将 WebAssembly模块加载到你的页面中。也就是说，你可以通过 WebAssembly来充分利用编译代码的性能，同时保持 JavaScript 的灵活性。
Qt从5.12开始后支持Qt for WebAssembly，一开始可能了解这块的人比较少，后来也是网上有一些技术论坛中有人提到这块，但是没有一个系统的介绍文章来给大家指明应该具体的搭建，然后在开发。接下来，咱们就来看看环境的搭建应该怎么弄呢。来吧，开搞！
我用的是Qt6.4.0的版本，也是Qt6比较好用的版本吧，目前电脑上使用的是这个版本，就用这个版本给大家做演示了。
1.首先安装Qt6.4，使用在线安装工具进行安装，在线安装工具下载地址https://download.qt.io/archive/online_installers/启动安装器，然后输入对应的Qt账户，登录进去，选择“添加货删除组件”，然后点击“下一步”，在Qt6.4.0的树形模块组件选择结构里选择WebAssembly模块，如下图所示：
选择好自己需要的模块后，直接下一步等待程序安装完成即可，具体安装详细步骤我就省略一下了，大家只要按照软件的提示一步步来安装就可以了。如果您之前的电脑上装过Qt6.4.0或者Qt5.15等Qt的版本，但是实际开发的时候却找不到WebAssembly模块，那么我们可以使用Qt安装目录下的MaintenanceTool.exe工具来进行安装WebAssembly模块。2.当安装程序把指定的模块安装完毕后，此时，我们就可以直接启动Qt Creator，如下图所示：
按照图示，选择好自己的Qt版本，然后点击Create Project按钮，弹出下图所示界面：
选择应用程序的类型，大家可以根据自己的编程习惯来选择，喜欢用Qt Widget的，就选择第一个；喜欢用Qt的QML的，就选择最后一个，大家自行选择即可。选择好之后，点击“Choose”按钮，弹出下图所示界面：
按照上图红色标志框提示的，自行设置自己项目的名称和存储位置即可。然后选择“下一步”按钮，弹出下图所示界面：
选择自己的编译方式，这个大家自己根据需求来选择即可，我这里用大家最熟悉的qmake的方式，CMake的方式又不懂的，大家可以后台留言，收到消息后，会专门给你们回复。接下来，我们选择“下一步”按钮，弹出下图所示界面：
在这个界面大家可以自定更改自己的类名称等信息，我这里就采用系统提供的默认的名称了。
接下来咱们继续选择“下一步”按钮，弹出下图所示界面：
该界面下开发者可以自行选择语言和翻译的相关设置，大家仍然根据需求，自行选择即可。
在界面上开发者选择对应版本的WebAssembly套件即可，然后选择“下一步”按钮，弹出下图所示界面：
开发者在此界面下选择工程的版本控制方式，如果你熟练使用Git来管理你的代码，此处非常建议你选择一个版本控制系统，真的很有用。如果你太熟悉，也没关系，根据你们自己平常的开发习惯来即可，但是还是友情提醒一下，尽可能多了解多使用版本控制系统，好处是非常多的。然后，点击“完成”按钮，即可进入工程界面，如下图所示：
如果你之前配置过Kit套件，那么到这个位置，基本上你就可以正常开发了。
可能有的小伙伴并没有配置Kit套件，那么我们接下来给大家在详细讲一下，Kit中的部署问题。首先大家按照这个图进行操作，找到Kit的管理界面：
按照图示要求选择之后，我们进入到了WebAssembly的设置界面，如果没有按照emsdk的话，那么我们就需要进行配置了，首先点击界面上的“installed Emscripten SDK”，进入到下图所示的网站：
该网站非常详细的介绍了每个不同的平台下emsdk的安装流程，大家只需要对应自己的操作系统平台，来选择对应的部分的操作流程即可。（建议大家最好安装一下Git，因为在这个地方你会发现，有Git真的很好用）当你的emsdk的代码仓库clone到本地后，我们进入emsdk的目录中，打开命令行工具，按照emsdk官方网站提供的命令挨个执行即可。emsdk install 3.1.10
emsdk activate --embedded 3.1.10
安装并激活完成后，通过以下命令查看是否安装完成
em++ --version
执行完该命令后，控制台窗口会输出如下信息：
当你看到出现类似上述的信息时，就代表你本地的emsdk已经激活了。emsdk的相关部署操作流程到这里就结束了，此时emsdk的编译器也就可以正常使用了。
此时，我们回到刚才emsdk的环境设置界面，如下图所示：
开发者通过选择“浏览”按钮，选择对应的emsdk的目录即可，选择完成后，Qt Creator会自动识别对应的环境设置信息，此处不需要开发者干预。
如果你选择对应的目录后，看到了和我上图类似的提示信息，就说明你的环境已经很OK了。此时，我们进入编译套件Kit设置页面查看Qt 6.4.0 WebAssembly套件，编译器已经自动识别到了，如下图所示：
到了这里，开发者就可以正常使用了。
我这里添加了一个按钮，然后在按钮的点击事件里，弹出一个下次提示框。
头文件代码如下图所示：
cpp文件代码如下图所示：
至此，咱们的代码已经编写完毕，然后，我们编译即可。
编译后，我们会在程序的指定位置找到下图所示的几个文件：
将我们选择的几个文件复制到对应的网络服务器上或者本地的iis测试服务器上，然后打开浏览器，通过对应的域名或者IP地址来访问test.html文件即可，加载的过程如下图所示：
该界面说明程序正在进行加载和编译，如果你的浏览器也能看到这个界面，恭喜你，你已经成功了。
看到这个界面，说明咱们的程序已经成功的在浏览器上运行了。
细心地同学发现了一个问题，就是咱们按钮的文字本来是中文的，但是在这个地方显示乱码了。其实，这个是因为没有加载中文支持的问题，当然是有本法解决的。
中文字体乱码的问题解决方法：
1.添加字体资源文件
在C:\Windows\Fonts目录下面找一种中文字体（本文以SIMYOU.TTF）举例，把SIMYOU.TTF添加到qrc资源文件里面，如下图所示：
2.程序中设置并加载字体库
我们需要做的就是在程序的入口main.cpp中设置并加载字体即可。代码如下所示：
int myFont = QFontDatabase::addApplicationFont(QStringLiteral(":/font/SIMYOU.TTF"));
QStringList fontFamilies = QFontDatabase::applicationFontFamilies(myFont);
if (fontFamilies.size() > 0)
{
QFont font;
font.setFamily(fontFamilies[0]);//设置全局字体
app.setFont(font);
}
3.设置好代码后，我们再次编译该项目，并将对应的文件更新到指定的web服务器的位置。
我们刷新一下网页，让程序重新加载一下最新的项目文件，此时我们可以在浏览器看到如下所示界面：
此时，我们看到熟悉的中文界面，点击一下该按钮，测试下咱们刚才实现的消息提示框的功能，如下图所示：
熟悉的消息提示框出现了。
到这里，Qt for WebAssembly的相关部署流程就讲解完毕了，如果大家在实际的操作过程中，还有不清楚的，可以随时在公众号浏览反馈，我们将会在收到反馈后，及时给大家答疑解惑。
Note：经过实际测试，IE浏览器不支持WebAssembly，建议大家就不要尝试了，一些市面上主流的浏览器，比如谷歌Chrome、火狐FireFox、Edge等等，当然也包括目前苹果产品的浏览器Safari，这些主流的浏览器加载起来都是没任何问题的。
结束语
Qt其实在跨平台上做的还是很不错的，包括今天咱们说的这个WebAssembly技术，可以让程序在浏览器上运行起来，也算是实现了Qt自己当时说的跨平台。虽然看起来该功能本身问题不大，但是查阅Qt官方的文档就知道了，一些重要的特性目前还是不支持的，比如网络通信、多线程、数据库等问题，真正想用于实际的生产环境，估计还有很长的一段路要走，不过我们还是要期待一下，希望总会有的，加油，铁子们。
- 扫码关注我们 -
欢迎您查阅该文章！------编程创造财富，编程改变人生！
请关注我们的公众号：QtCoderStudio
