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

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

文章目录

  • Qt-Web混合开发-QtWebChannel实现Qt与Web通信交互
    • 1、概述
    • 2、实现效果
    • 3、实现功能
    • 4、关键代码
    • 5、源代码

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

1、概述

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

2、实现效果

Qt-Web混合开发-QtWebChannel实现Qt与Web通信交互(4)_第1张图片

3、实现功能

  1. 构建后将html、css、js文件【自动拷贝】到可执行程序路径下;
  2. 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>

    <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 

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 
#include 

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++));
}

5、源代码

  • gitee
  • github

➖➖⚽⚽⚽⚽
➖⚽⚽⚽⚽⚽⚽
⚽⚽⚽⚽⚽⚽⚽⚽
⚽⚽⚽⚽⚽⚽⚽⚽
⚽⚽⚽⚽⚽⚽⚽⚽
⚽⚽⚽⚽⚽⚽⚽⚽
➖⚽⚽⚽⚽⚽⚽
➖➖⚽⚽⚽⚽

你可能感兴趣的:(Web,QT,qt,前端,交互,QtWebChannel)