QT for webassembly 技术探索

最新推荐文章于 2024-08-17 17:44:02 发布

置顶五环旗

最新推荐文章于 2024-08-17 17:44:02 发布

阅读量1.4w

点赞数 2

文章标签： assembly QT javascript C

本文链接：https://blog.csdn.net/qq_25745863/article/details/82682127

版权

前几日，接到上级任务——在不改动C++客户端的基础上，实现在浏览器中打开C++客户端，并进行交互。本想着是天方夜谭，谷歌一番，竟果真有此等尝试。官方参考文档传送门：https://wiki.qt.io/Qt_for_WebAssembly。在下查资料时，不禁感叹教程寥寥，故作此文供大家参考。

1.技术简介

首先介绍一下webassembly技术，官网的解释为：WebAssembly (abbreviated Wasm) is a binary instruction format for a stack-based virtual machine. Wasm is designed as a portable target for compilation of high-level languages like C/C++/Rust, enabling deployment on the web for client and server applications.

它提供了一种在网络上以接近本机的速度运行客户端程序的方法。某高级语言写的某功能库–>emscripten编译–>.wasm文件–>结合WebAssembly JS API–>浏览器中运行，完成一部分用js写，而后依靠浏览器解释执行。

即WebAssembly（缩写为Wasm）是基于堆栈的虚拟机的二进制指令格式。 Wasm被设计为一个可移植的目标，用于编译C / C ++ / Rust等高级语言，支持在Web上部署客户端和服务器应用程序。简单来说，就是webassembly技术能让C/C++程序被编译为wasm文件，这个文件能够在浏览器上运行，无需任何下载步骤或特殊服务器要求（除了提供wasm文件）。点击对应链接以后，会自动下载对应的wasm文件，然后在浏览器中编译运行。

QT从今年四月份开始开始研究qt for webassembly这项技术，使得qt程序也能通过webassembly技术在浏览器上运行，但截至目前，它支持的浏览器有Chrome，Safari，Opera和Firefox，并且支持的qt库较为有限，还在进一步研究中。

下面是官方给出的几个运行示例，大家可以先感受一下：

http://example.qt.io/qt-webassembly/opengl/hellowindow/hellowindow.html
使用OpenGL（开源图形库）调用呈现Qt徽标的示例。此示例显示您还可以将其用于自定义OpenGL代码。

http://example.qt.io/qt-webassembly/SensorTagDemo/SensorTagDemo.html
一个有趣的行业自动化用例原则上，可以显示使用Qt WebSockets检索的实时数据。

http://example.qt.io/qt-webassembly/quickcontrols2/gallery/gallery.html
Qt Quick Controls 2中的可用控件库。这表明您可以使用Qt Quick和Qt Quick Controls 2来制作您的网页以及部署应用

http://example.qt.io/qt-webassembly/widgets/richtext/textedit/textedit.html
一个简单的文本编辑器，用Qt Widgets编写。此示例显示您还可以使用Qt Widgets创建Web部署的应用程序。

2.环境要求

VMware12+Ubuntu18.04+emscripten+qt-5.11.1+官方最新qtbase文件

Ubuntu18.04下载地址：https://www.ubuntu.com/download/desktop

qt-5.11.1-opensource下载地址：https://www.qt.io/download

记得下载开源版，需要先注册账户，如果嫌麻烦——参见百度云链接。

链接：https://pan.baidu.com/s/1Zrws6FR-9dD2h1EaAczq8Q 密码：ke3t

以下省略Linux下安装qt步骤啦~~~大家自行搜索CSDN上很多的~~

3.搭建步骤

安装emscripten工具

前期准备>>>

sudo apt-get update

sudo apt-get install python2.7

sudo apt-get install nodejs

sudo apt-get install cmake

sudo apt-get install default-jre

sudo apt-get install gcc

安装>>>

git clone https://github.com/juj/emsdk.git

cd emsdk

./emsdk install --build=Release sdk-incoming-64bit binaryen-master-64bit

./emsdk activate --global --build=Release sdk-incoming-64bit binaryen-master-64bit

source ./emsdk_env.sh

至此可以编译简单C/C++文件，在浏览器上访问。

Eg: emcc hello.c -s WASM=1 -o hello.html

emrun --no_browser --port 8080 .（通过端口访问）

测试方法：本地打开hello.html or 访问localhost:port/hello.html

QT环境配置

cd　/Qt/5.11.0/Src

sudo rm –rf qtbase qtdeclarative qtwebsockets(删除文件夹)

cd ..

sudo chmod o+w Src(给上级目录写权限)

git clone -b wip/webassembly https://code.qt.io/qt/qtbase.git

git clone -b wip/webassembly https://code.qt.io/qt/qtdeclarative.git

git clone -b wip/webassembly https://code.qt.io/qt/qtwebsockets.git

./configure -xplatform wasm-emscripten -developer-build -release -static -no-feature-thread -nomake tests -nomake examples -no-dbus -no-headersclean -no-ssl -no-warnings-are-errors

make

配置完成后，检查一下qmake路径

/your-build-path/qtbase/bin/qmake
/your-build-path/qtbase/qmake/qmake