Qt-Web混合开发-QtWebChannel实现Qt与Web通信交互（4）

mahuifa

已于 2022-12-16 17:39:55 修改

阅读量3.9k

点赞数 2

分类专栏： # Web QT 文章标签： qt 前端交互 QtWebChannel

于 2022-12-14 19:35:31 首次发布

本文链接：https://blog.csdn.net/qq_43627907/article/details/128320937

版权

QT 同时被 2 个专栏收录

114 篇文章 132 订阅

订阅专栏

Web

12 篇文章 19 订阅

订阅专栏

Qt-Web混合开发-QtWebChannel实现Qt与Web通信交互🍏

文章目录

Qt-Web混合开发-QtWebChannel实现Qt与Web通信交互🍏

更多精彩内容
👉个人内容分类汇总 👈
👉Qt - Web混合开发👈

1、概述🍓

Qt版本：V5.12.5
注意：windows下webenginewidgets只支持MSVC编译器，不支持MinGW（mingw好像需要自己编译）；
当使用QWebEngineView实现Qt + html混合开发时经常遇见的问题就是Qt自身有信号槽，但是和web网页怎么通信，web里又没有信号槽，第一时间想到的是socket通信，但是Qt其实封装了更加简单便捷的通信方式，可使用QtWebChannel和qwebchannel.js实现Qt和web通信；
- QtWebChannel可用于和QWebEngineView内嵌的网页通信，也可以和浏览器中显示的网页进行通信；
- 和QWebEngineView内嵌的网页通信需要在QtWebChannel使用registerObject()函数注册一个用于通信的中介对象;
- 然后将QtWebChannel对象设置给QWebEngineView；
- 在网页中使用javascript加载qwebchannel.js获取registerObject()注册的中介对象，并通过获取的对象进行通信。

2、实现效果🍅

在这里插入图片描述

3、实现功能🥝

构建后将html、css、js文件【自动拷贝】到可执行程序路径下；
web界面和qt界面实现【双向通信】，在web界面点击button后通过js将点击事件发送给qt，在Qt中通过槽函数接收显示；在Qt中点击button后将点击事件发送给js，在html界面中显示；

4、关键代码🌽

pro文件

QT += webenginewidgets webchannel   # 使用QWebEngineView和QWebchannel需要加载模块

webClient.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Web客户端</title>
<!--  qwebchannel.js文件一般在Qt安装路径下 D:\Qt\Qt5.12.5\Examples\Qt-5.12.5\webchannel\shared\qwebchannel.js-->
    <script src="qwebchannel.js"></script>
    <script src="main.js"></script>
    <link rel="stylesheet" type="text/css" href="main.css">
</head>
<body>
    <h1 align="center">Web客户端程序 </h1>
    <div align="center">
        <textarea id="textAreaId" name="textArea"></textarea> </br>
        <button id="but" class="button" onclick="butClick()">点击</button>
    </div>
</body>
</html>

main.js

// 程序启动立即初始化
window.onload = function()
{
    if(typeof qt != "undefined")
    {
        window.channel = new QWebChannel(qt.webChannelTransport, function(channel)
        {
            // 获取Qt注册的对象，Qt中registerObject注册的字符串
            window.core = channel.objects.CoreId;
            // 将函数showText和Qt信号qtButClicked绑定
            core.qtButClicked.connect(function(msg)
            {
                showText(msg);
            });
        });
    }
    else
    {
        alert("qt对象未获取到！");
    }
}

// 显示信息
function showText(msg)
{
    var textEdit = document.getElementById("textAreaId");
    if(textEdit)
    {
        textEdit.value = textEdit.value + msg + '\n';           // 追加信息
        textEdit.scrollTop = textEdit.scrollHeight;             // 滚动条一直再最下方
    }
}

// html中按键点击时调用这个函数
function butClick()
{
    core.on_webButClicked("Web 按键点击");   // 调用Qt信号将js按键事件发送给Qt
}

widget.h：注意，这里的 Core 类是Qt和Js通信的关键；

#ifndef WIDGET_H
#define WIDGET_H

#include <QWidget>

QT_BEGIN_NAMESPACE
namespace Ui { class Widget; }
QT_END_NAMESPACE

class Widget : public QWidget
{
    Q_OBJECT

public:
    Widget(QWidget *parent = nullptr);
    ~Widget();

private slots:
    void on_webButClicked(QString str);
    void on_pushButton_clicked();

private:
    Ui::Widget *ui;
};

/**
 * @brief  Qt和Web端交互的中介单例类
 */
class Core : public QObject
{
    Q_OBJECT
public:
    static Core* getInstance()
    {
        static Core core;
        return &core;
    }

signals:
    /**
     * @brief     Qt发送给Web的信号
     * @param str
     */
    void qtButClicked(QString str);

    /**
     * @brief     Web发送给Qt的信号
     * @param str
     */
    void webButClicked(QString str);

public slots:
    /**
     * @brief     Web端需要调用Qt槽函数来传递，必须声明为public slots，否则web找不到
     * @param str
     */
    void on_webButClicked(QString str)
    {
        emit webButClicked(str);
    }
};

#endif // WIDGET_H

widget.cpp

#include "widget.h"
#include "ui_widget.h"

#include <qdir.h>
#include <qwebchannel.h>

Widget::Widget(QWidget *parent)
    : QWidget(parent)
    , ui(new Ui::Widget)
{
    ui->setupUi(this);
    this->setWindowTitle(QString("使用QtWebChannel实现Qt与Web通信交互 - V%1").arg(APP_VERSION));  // 设置窗口标题

    connect(Core::getInstance(), &Core::webButClicked, this, &Widget::on_webButClicked);

    QWebChannel* channel = new QWebChannel(this);
    channel->registerObject("CoreId", Core::getInstance());  // 向QWebChannel注册用于Qt和Web交互的对象。

    ui->webEngineView->page()->setWebChannel(channel);       // 将与webEngineView要使用的web通道实例设置为channel
    ui->webEngineView->setUrl(QDir("./web/webClient.html").absolutePath());
}

Widget::~Widget()
{
    delete ui;
}

/**
 * @brief     显示web传来的信号
 * @param str
 */
void Widget::on_webButClicked(QString str)
{
    ui->textEdit->append(str);
}

/**
 * @brief 点击按键将信号发送给web
 */
void Widget::on_pushButton_clicked()
{
    static int i = 0;
    emit Core::getInstance()->qtButClicked(QString("Qt 按键点击 %1").arg(i++));
}