Qt for WebAssembly手把手通关教程 - Qt技术专区 - 闫澈编程园地

Qt for WebAssembly手把手通关教程

QtCoderStudio1年前2457
图片

Qt for WebAssembly

通关教程


 主讲人:FireMan2017001(Qt界的巴神) —


 C++开发WEB程序image.png


什么是WebAssembly
图片
图片


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,一开始可能了解这块的人比较少,后来也是网上有一些技术论坛中有人提到这块,但是没有一个系统的介绍文章来给大家指明应该具体的搭建,然后在开发。接下来,咱们就来看看环境的搭建应该怎么弄呢。来吧,开搞!image.png




环境搭建
我用的是Qt6.4.0的版本,也是Qt6比较好用的版本吧,目前电脑上使用的是这个版本,就用这个版本给大家做演示了。


1.首先安装Qt6.4,使用在线安装工具进行安装,在线安装工具下载地址https://download.qt.io/archive/online_installers/
启动安装器,然后输入对应的Qt账户,登录进去,选择“添加货删除组件”,然后点击“下一步”,在Qt6.4.0的树形模块组件选择结构里选择WebAssembly模块,如下图所示:

image.png

选择好自己需要的模块后,直接下一步等待程序安装完成即可,具体安装详细步骤我就省略一下了,大家只要按照软件的提示一步步来安装就可以了。
如果您之前的电脑上装过Qt6.4.0或者Qt5.15等Qt的版本,但是实际开发的时候却找不到WebAssembly模块,那么我们可以使用Qt安装目录下的MaintenanceTool.exe工具来进行安装WebAssembly模块。
2.当安装程序把指定的模块安装完毕后,此时,我们就可以直接启动Qt Creator,如下图所示:

image.png

按照图示,选择好自己的Qt版本,然后点击Create Project按钮,弹出下图所示界面:


image.png

选择应用程序的类型,大家可以根据自己的编程习惯来选择,喜欢用Qt Widget的,就选择第一个;喜欢用Qt的QML的,就选择最后一个,大家自行选择即可。选择好之后,点击“Choose”按钮,弹出下图所示界面:

image.png

按照上图红色标志框提示的,自行设置自己项目的名称和存储位置即可。然后选择“下一步”按钮,弹出下图所示界面:

image.png

选择自己的编译方式,这个大家自己根据需求来选择即可,我这里用大家最熟悉的qmake的方式,CMake的方式又不懂的,大家可以后台留言,收到消息后,会专门给你们回复。

接下来,我们选择“下一步”按钮,弹出下图所示界面:

image.png

在这个界面大家可以自定更改自己的类名称等信息,我这里就采用系统提供的默认的名称了。
接下来咱们继续选择“下一步”按钮,弹出下图所示界面:

image.png

该界面下开发者可以自行选择语言和翻译的相关设置,大家仍然根据需求,自行选择即可。
然后继续选择“下一步”按钮,弹出下图所示界面:


image.png

在界面上开发者选择对应版本的WebAssembly套件即可,然后选择“下一步”按钮,弹出下图所示界面:


image.png

开发者在此界面下选择工程的版本控制方式,如果你熟练使用Git来管理你的代码,此处非常建议你选择一个版本控制系统,真的很有用。如果你太熟悉,也没关系,根据你们自己平常的开发习惯来即可,但是还是友情提醒一下,尽可能多了解多使用版本控制系统,好处是非常多的。

然后,点击“完成”按钮,即可进入工程界面,如下图所示:

image.png

如果你之前配置过Kit套件,那么到这个位置,基本上你就可以正常开发了。
可能有的小伙伴并没有配置Kit套件,那么我们接下来给大家在详细讲一下,Kit中的部署问题。
首先大家按照这个图进行操作,找到Kit的管理界面:

image.png

按照图示选择之后,会进入下图所示界面:

image.png

按照图示要求选择之后,我们进入到了WebAssembly的设置界面,如果没有按照emsdk的话,那么我们就需要进行配置了,首先点击界面上的“installed Emscripten SDK”,进入到下图所示的网站:

image.png

该网站非常详细的介绍了每个不同的平台下emsdk的安装流程,大家只需要对应自己的操作系统平台,来选择对应的部分的操作流程即可。(建议大家最好安装一下Git,因为在这个地方你会发现,有Git真的很好用)
当你的emsdk的代码仓库clone到本地后,我们进入emsdk的目录中,打开命令行工具,按照emsdk官方网站提供的命令挨个执行即可。

emsdk install 3.1.10

emsdk activate --embedded 3.1.10

安装并激活完成后,通过以下命令查看是否安装完成

em++ --version

执行完该命令后,控制台窗口会输出如下信息:

image.png

当你看到出现类似上述的信息时,就代表你本地的emsdk已经激活了。
emsdk的相关部署操作流程到这里就结束了,此时emsdk的编译器也就可以正常使用了。


此时,我们回到刚才emsdk的环境设置界面,如下图所示:

image.png

开发者通过选择“浏览”按钮,选择对应的emsdk的目录即可,选择完成后,Qt Creator会自动识别对应的环境设置信息,此处不需要开发者干预。
如果你选择对应的目录后,看到了和我上图类似的提示信息,就说明你的环境已经很OK了。
此时,我们进入编译套件Kit设置页面查看Qt 6.4.0 WebAssembly套件,编译器已经自动识别到了,如下图所示:

image.png

到了这里,开发者就可以正常使用了。


样例工程编码演示
以我们刚才的示例代码,来进行演示。
首先,我们在UI界面上添加几个控件,如下图所示:

image.png

我这里添加了一个按钮,然后在按钮的点击事件里,弹出一个下次提示框。

头文件代码如下图所示:

image.png

cpp文件代码如下图所示:

image.png


至此,咱们的代码已经编写完毕,然后,我们编译即可。
编译后,我们会在程序的指定位置找到下图所示的几个文件:

image.png


将我们选择的几个文件复制到对应的网络服务器上或者本地的iis测试服务器上,然后打开浏览器,通过对应的域名或者IP地址来访问test.html文件即可,加载的过程如下图所示:

image.png

该界面说明程序正在进行加载和编译,如果你的浏览器也能看到这个界面,恭喜你,你已经成功了。
当程序加载完毕后,大家可以看到如下所示界面:

image.png

看到这个界面,说明咱们的程序已经成功的在浏览器上运行了。
细心地同学发现了一个问题,就是咱们按钮的文字本来是中文的,但是在这个地方显示乱码了。其实,这个是因为没有加载中文支持的问题,当然是有本法解决的。


中文字体乱码的问题解决方法:

1.添加字体资源文件

在C:\Windows\Fonts目录下面找一种中文字体(本文以SIMYOU.TTF)举例,把SIMYOU.TTF添加到qrc资源文件里面,如下图所示:

image.png

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服务器的位置。


我们刷新一下网页,让程序重新加载一下最新的项目文件,此时我们可以在浏览器看到如下所示界面:

image.png

此时,我们看到熟悉的中文界面,点击一下该按钮,测试下咱们刚才实现的消息提示框的功能,如下图所示:

image.png

熟悉的消息提示框出现了。


到这里,Qt for WebAssembly的相关部署流程就讲解完毕了,如果大家在实际的操作过程中,还有不清楚的,可以随时在公众号浏览反馈,我们将会在收到反馈后,及时给大家答疑解惑。


Note:经过实际测试,IE浏览器不支持WebAssembly,建议大家就不要尝试了,一些市面上主流的浏览器,比如谷歌Chrome、火狐FireFox、Edge等等,当然也包括目前苹果产品的浏览器Safari,这些主流的浏览器加载起来都是没任何问题的。


结束语

Qt其实在跨平台上做的还是很不错的,包括今天咱们说的这个WebAssembly技术,可以让程序在浏览器上运行起来,也算是实现了Qt自己当时说的跨平台。虽然看起来该功能本身问题不大,但是查阅Qt官方的文档就知道了,一些重要的特性目前还是不支持的,比如网络通信、多线程、数据库等问题,真正想用于实际的生产环境,估计还有很长的一段路要走,不过我们还是要期待一下,希望总会有的,加油,铁子们。



END


qrcode_for_gh_1ad450d4a776_258.jpg_temp.bmp_temp.bmp_temp.bmp

- 扫码关注我们 -






欢迎您查阅该文章!------编程创造财富,编程改变人生! 请关注我们的公众号:QtCoderStudio
返回列表

上一篇:Sip封装C++给Python使用的方法教程

没有最新的文章了...

相关文章

QByteArray实现加解密功能

QByteArray实现加解密功能

 很多朋友在使用Qt编程的时候,有时候为了保护自己的软件作品或者本地的一些配置文件,或者数据 ,经常会用到数据的加密和解密的功能。本期,咱就为大家准备这样一个教程,让你不需要借助第...

Qt5下网络通信粘包算法处理的概要解释

Qt5下网络通信粘包算法处理的概要解释

 这个名称一看就会让某些同学很头疼,做过编程的都应该深有体会,一旦牵涉到网络传输,不管是文件传输还是简单消息的发送,必然会面临一个问题:既定协议下的数据粘包和拆包的处理算法这个应该算是一个老...

QTabWidget中设置QTabBar横向

QTabWidget中设置QTabBar横向

 最近有同学经常私信给我,说自己很烦恼,一个Qt的控件都搞定不了,我细问下原因,发现原来是一个大家经常用的Qt的空间QTabWidget的自定义导致的,嘿嘿。为了给这位同学答疑解惑,我特意写...

发表评论    

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。
欢迎访问本站,您是本站第 2007807 位访客