Qt5中QWebEngineView的使用,让桌面客户端和web端友好通信

版权声明:个人学习之路,若有误,欢迎指正。 https://blog.csdn.net/y396397735/article/details/84707031

本文结构

1、 Qt5中web开发的基本配置,工程搭建
2、 加载HTML文件
3、 Qt界面窗口调用HTML中的JavaScript函数(Qt调用js)
4、 Qt界面窗口获取HTML中Js函数的返回值
5、 Web端消息主动通知到Qt界面(js通知Qt)
6、完整源码路径


基本配置,工程搭建

(1) Qt安装时要安装web开发组件,本案例采用Qt5.9.6 vs2015开发环境
(2) 新建Qt Gui工程要首先勾选以下三个组件
在这里插入图片描述

(3) qwebchannel.js文件,安装Qt后在安装文件夹下面可以搜索找到
(4) 本案例代码文件结构
在这里插入图片描述

其中Ui文件的简单布局如下:
在这里插入图片描述

其中,左侧为QWebEngineView控件,右侧一个调用js函数的按钮,一个获取js返回值的按钮,另一个为操作结果显示的label控件


加载html文件

找到html文件位置,QWebEngineView的load()函数可以加载html文件显示,形式如下:

m_pWebView->load(QUrl("file:///" + htmlPath));

本例中的html文件路径:
https://github.com/lesliefish/Qt/blob/master/Project/WebTest/WebTest/BMap.html


Qt调用HTML中的JavaScript函数

假设html中有js函数如下:

    // 添加一个圆形覆盖物
	function addCircle()
	{
	    var point = new BMap.Point(116.404, 39.915);
	    var circle = new BMap.Circle(point, 6000, { strokeColor: "red", strokeWeight: 5, strokeOpacity: 0.3 }); //创建圆
	    map.addOverlay(circle);            //增加圆
	}

在Qt桌面端,只需要用一个字符串把js函数名称弄下来就行啦,然后通过执行runJavaScript函数就可以对html操作了,操作方式如下:

QString jsStr = QString("addCircle()");
m_pWebView->page()->runJavaScript(jsStr);

Qt界面窗口获取HTML中Js函数的返回值

只能调它的js函数还不行啊,我想知道它执行完返回给我啥了,那这个时候就需要看看这个runJavaScript函数了:

void runJavaScript(const QString& scriptSource, 
					const QWebEngineCallback<const QVariant &> &resultCallback);

如上,这个调用是异步的,这个可以传个回调函数进去,执行结果可以直接在回调函数来处理。
在本Demo中直接用lambda函数处理了,如下:

QString WebTest::getJsRetString()
{
    QEventLoop loop;
    connect(this, &WebTest::signalRunJsOver, &loop, &QEventLoop::quit);

    QString jsStr = "getInfo();";// 调用Js的getInfo函数

    QString retStr{}; // 返回值
    // 通过loop循环等到回调上来数据再继续
    m_pWebView->page()->runJavaScript(jsStr, [&](const QVariant &v)
    {
        retStr = v.toString();
	    // 在头文件中定义这个函数,收到js的回调返回值后,结束loop循环
        emit signalRunJsOver();
    });
    
    loop.exec(); // 收不到回调处理结束信号,我就在这里循环等待
    
    return retStr;
}

Web端消息主动通知到Qt界面

以上都是Qt端主动操作web端的对象、函数等,那web端要发某个消息给Qt端,怎么处理呢?
用QWebChannel,基本使用方式如下:

   m_pWebChannel = new QWebChannel(this); // 创建对象
   // 注册一个qtui对象  html端通过此名称向qt端发送消息
   m_pWebChannel->registerObject(QString("qtui"), this);
   m_pWebView->page()->setWebChannel(m_pWebChannel);

基本定义完成后,我们需要定义一个槽函数,接收web端发的消息,定义基本格式如下:

public slots: // 一定要这样定义哦,否则会收不到消息
	void recieveJsMessage(const QString& jsMsg);

在web端的js端发送消息方式,要按你定义的qtui对象名称操作噢:

new QWebChannel(qt.webChannelTransport, function (channel) {
		var qtui = channel.objects.qtui;
		qtui.recieveJsMessage("你点我干啥!");
})

注意:html端一定要加载qwebchannel.js文件,路径要正确。


程序跑起来结果:
在这里插入图片描述


程序Demo源码地址

https://github.com/lesliefish/Qt/tree/master/Project/WebTest

环境:vs2015+Qt5.9.6,完整源码,可直接运行

展开阅读全文

没有更多推荐了,返回首页