Qt中浏览器QWebEngineView的使用1

最新推荐文章于 2024-07-06 20:21:23 发布

风烟倦

最新推荐文章于 2024-07-06 20:21:23 发布

阅读量1.2w

点赞数 14

分类专栏： Qt 文章标签： QWebEngineView Qt

本文链接：https://blog.csdn.net/qq_37996632/article/details/116139713

版权

Qt 专栏收录该内容

51 篇文章 38 订阅

订阅专栏

当今的桌面软件开发，web化逐渐成为了趋势，VSCode，Atom等一系列优秀的软件都是基于github家的Electron（使用html，css，js来进行开发的桌面端应用程序），通俗得来说，就是把网页打包成一个在桌面运行的程序。优点是开发快速，前端也能开发桌面软件，并且跨平台，缺点是性能差速度慢，不能做成大型商业软件。类比一下notepad和vscode的打开速度就知道了。

回到本篇博客的目的，我们为什么要在Qt中嵌入一个网页？为什么不直接使用Electron开发整套软件？

1. 由于web端开发更火热，各种框架层出不穷，琳琅满目天花乱坠的效果在web端能很容易做出来。

举个例子，图表。

这是Qt中的QCustomPlot

这是百度web端的echarts

对比一下，哪个图的效果更好一目了然，这还只是2d的图，echarts中还有3d的基于webgl的图，说难听点就是降维打击，在Qt上做这种效果至少得弄个gis，osg啥的，麻烦程度=直接劝退，当然性能方面另说。

更扎心的是，这还只是百度一家的东西，类似的东西阿里有，蚂蚁金服也有，在web端这并不是很惊艳的东西，是大家都有的习以为常的东西而已。

再看一个大数据展板，这东西网上随便下载个模板就能弄，小白也能做出这种效果，但是在Qt中想要实现这套，qss写烂了都不一定写得出来。

至于三维的效果，Threejs上的更夸张，这种复杂场景的纹理贴图，光照阴影，要用vtk做还不知道要做到猴年马月，当然vtk性能更好。

现在可以来解答最开始提出的问题了，因为web端现成的并且效果更好的东西更多，很多时候直接拿来用就好，没必要死磕Qt qml那一套，虽然qml的效果也不错但是用户基数太少，相关资源和支持太过贫乏。

但是全套桌面软件使用web开发可行吗？可不可行取决于用途，如果只是个音乐播放器，文本编辑器，那么全套用Electron开发没毛病。如果是大型软件，追求稳定，那么地基还是得用C++去打，目前市场上大部分的商用软件都是基于C++开发的，包括Adobe公司的全套软件，AutoDesk全家桶等等，只是该需要装饰优化的地方加上一点web端或者其他的一些小东西使效果更好。

下面是正式使用

在Qt中，提供了一个用于访问网页的控件，集成了浏览器的webkit内核和google的v8引擎，不严谨的说，这个控件就是一个微型简易版的浏览器。

Qt5.0~5.4：webkitwidgets模块 - QWebView
Qt5.4之后：webenginewidgets模块 - QWebEngineView

下面的内容都是基于新一点的QWebEngineView

先来简单使用一下，在.pro文件中加上QT += webenginewidgets

auto webView = new QWebEngineView(this);
webView->load(QUrl("http://www.baidu.com"));
// 加载本地网页
// webView->load(QUrl::fromLocalFile("/home/wangjun/TestCode/QtTest/QtTest2/index.html"));

auto main_layout = new QVBoxLayout(this);
main_layout->addWidget(webView);

光是显示是不够的，还需要有交互，在Qt中与web页面进行交互的模块是webchanel，对应类QWebChannel。

QT       += webenginewidgets webchannel

除此之外，还需要Qt官方提供的qwebchannel.js文件，如果在安装Qt时选择了安装源码即Src，则在本地安装路径中可以找到这个文件，或者直接去github搜索也可以下载到这个文件。

首先需要写一个辅助的类JsContext.h，用已接收网页中传来的消息

#include <QObject>
#include <QMessageBox>

class HWebContext : public QObject
{
    Q_OBJECT
public slots:
    void jscallme()
    {
        QMessageBox::information(NULL, "Test", "Message from web page!");
    }

    void onMsg(const QString & msg)
    {
        QMessageBox::information(NULL, "Input text from web", msg);
    }
};

在构造函数中为webchanel注册这个类

auto webView = new QWebEngineView(this);
webView->load(QUrl::fromLocalFile("/home/wangjun/TestCode/QtTest/QtTest2/index.html"));

QWebChannel *webchannel = new QWebChannel(webView);
HWebContext *webContext = new HWebContext;
webchannel->registerObject("webContext", webContext);

webView->page()->setWebChannel(webchannel);

auto btn = new QPushButton("clicked Me", this);

auto main_layout = new QVBoxLayout(this);
main_layout->addWidget(btn);
main_layout->addWidget(webView);

// 点击按钮调用网页中的js函数
connect(btn, &QPushButton::clicked, this, [=]()
{
   webView->page()->runJavaScript("showAlert()");
});

然后写一个本地的html文件

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Qt与Web交互</title>
</head>
<body>
    <button id="btn">网页中的按钮</button>

    <br>
    <br>
    <br>

    <input id="待发送消息" type="text" name="msgText" />
    <input type="button" value="发送网页消息到Qt中" onclick="onBtnSendMsg()" />

    <script src="qwebchannel.js" type="text/javascript" ></script>
    <script  type="text/javascript">
        // 定义webchannel对象并初始化
        var webobj;
        new QWebChannel(qt.webChannelTransport, function(channel)
        {
            webobj = channel.objects.webContext;
            window.foo = webobj;
        });

        // 点击网页中的按钮弹出Qt中的MessageBox
        var btn = document.getElementById("btn");
        btn.onclick = function()
        {
            webobj.jscallme();
        }

        function showAlert()
        {
            alert('this is web alert');
        }


        // 向qt发送文字消息
        function sendMsg(msg)
        {
            if(typeof webobj == 'undefined')
                alert("context对象获取失败！");
            else
                webobj.onMsg(msg);
        }
        function onBtnSendMsg()
        {
            var str_msg = document.getElementById("待发送消息").value;
            sendMsg(str_msg);
        }
</script>
</body>
</html>

点击Qt布局中的按钮会调用网页中的警告函数；点击网页中的按钮会调用Qt中的MessageBox；效果分别如下。

风烟倦

关注

14
点赞
踩
105

收藏

觉得还不错? 一键收藏
3
评论
Qt中浏览器QWebEngineView的使用1

当今的桌面软件开发，web化逐渐成为了趋势，VSCode，Atom等一系列优秀的软件都是基于github家的Electron（使用html，css，js来进行开发的桌面端应用程序），通俗得来说，就是把网页打包成一个在桌面运行的程序。优点是开发快速，前端也能开发桌面软件，并且跨平台，缺点是性能差速度慢，不能做成大型商业软件。类比一下notepad和vscode的打开速度就知道了。回到本篇博客的目的，我们为什么要在Qt中嵌入一个网页？为什么不直接使用Electron开发整套软件？1. 由于web端.
复制链接

扫一扫

专栏目录