关于QT实现和html页面的交互

本文介绍如何使用QT的QWebEngineView组件加载HTML页面,并通过QWebChannel实现QT与HTML页面之间的信号和槽机制交互。具体包括配置所需组件、创建交互类及其实现方法、设置HTML页面监听等步骤。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

1.通过QWebEngineView引入html页面, .pro文件中引入webenginewidgets,webengine,network,webchannel组件

组件可以通过QT软件根目录的MaintenanceTool.exe安装,设置中选择临时资料档案库,临时资料档案库可以在网上找资源路径(我用的是:http://mirrors.ustc.edu.cn/qtproject/online/qtsdkrepository/mac_x64/root/qt/,如果临时资料档案库测试是失败的,可能是因为没有装visual studio),选择添加或移除组件

2.建立连接html和QT的QObject类

mychannel.h

#ifndef MYCHANNEL_H
#define MYCHANNEL_H

#include <QObject>
#include <QDebug>
#include <QWebChannel>

class MyChannel : public QObject
{
    Q_OBJECT
public:
    explicit MyChannel(QObject *parent = nullptr);
    void sendSetViewPort();

signals:
    void setViewPort();//QT给html页面发送的信号

};

#endif // MYCHANNEL_H

mychannel.cpp

#include "mychannel.h"

MyChannel::MyChannel(QObject *parent) : QObject(parent)
{

}

void MyChannel::sendSetViewPort()
{
    qDebug()<<"----------------alert==========";
    emit setViewPort();
}

mapload.cpp(加载html页面的cpp文件)

void MapLoad::initMap(){
    _myChannel = new MyChannel(this);
    QWebChannel* web_channel = new QWebChannel(this);
    //html文件用的时候可以知道用的是哪个webchannel
    web_channel->registerObject("qtChannel",_myChannel);
	//加载html页面的widget
    view = new QWebEngineView(ui->widget_map_content);
    view->load(QUrl("qrc:/font/images/static/mapindex.html"));
    view->page()->setWebChannel(web_channel);
    view->show();
    //点击按钮的时候给发给MapLoad发送点击事件的信号
    QObject::connect(ui->button_right, &QPushButton::clicked, this, &MapLoad::sendSetViewPort);

}

void MapLoad::sendSetViewPort()
{
    qDebug()<<"----------------alert";
    _myChannel->sendSetViewPort();
}

mapload.h

private:
    Ui::MapLoad *ui;
    QWebEngineView *view=nullptr;
    MyChannel* _myChannel=nullptr;
private slots:
    void on_button_right_clicked();
    void sendSetViewPort();

mapindex.html

<script type="text/javascript" src="./qwebchannel.js"></script>
<script type="text/javascript">
  var mchannel;
  window.onload = function () {
    if (typeof qt != 'undefined') {
      new QWebChannel(qt.webChannelTransport, function (channel) {
        channel.objects.qtChannel.setViewPort.connect(mapSetView);
      })
    } else {
      alert("qt对象获取失败!");
    }
  }
 function mapSetView() {
    console.log("nihao");
  }
</script>

参考:https://blog.youkuaiyun.com/qq_41961619/article/details/107104622

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值