首页 前端知识 【QT进阶】Qt Web混合编程之html、 js的简单交互

【QT进阶】Qt Web混合编程之html、 js的简单交互

2024-04-22 09:04:18 前端知识 前端哥 445 492 我要收藏

往期回顾

【QT进阶】Qt Web混合编程之VS2019 CEF的编译与使用(图文并茂超详细介绍)-CSDN博客
【QT进阶】Qt Web混合编程之QWebEngineView基本用法-CSDN博客
【QT进阶】Qt Web混合编程之CMake VS2019编译并使用QCefView(图文并茂超详细版本)-CSDN博客【QT进阶】Qt Web混合编程之VS2019 CEF的编译与使用(图文并茂超详细介绍)-CSDN博客

 【QT进阶】Qt Web混合编程之html、 js交互

在Qt中,可以使用Qt WebEngine模块来加载和显示HTML页面,并且可以通过Qt的JavaScript桥接功能来在C++代码中调用JavaScript函数,或者在JavaScript代码中调用C++代码中的槽函数。

通过这种方式,可以实现C++代码和HTML、JavaScript之间的双向通信,从而实现更加灵活和交互性强的应用程序。例如,可以在HTML页面中调用C++代码中的函数来获取数据或执行操作,也可以在C++代码中调用JavaScript函数来更新页面内容或响应用户交互操作。

一、简单交互实现

之前我们说了可以通过QWebEngineView调用load或者setUrl方法实现qt程序里显示网页。

而除了可以显示网页,其实我们还可以和网页交互,互相发消息,调用函数。

1、互相发消息,调用函数

1.1html页面调用C++函数,在c++.h里声明
Q_ INVOKABLE void receive TextFromHtml(const QString& r text);
1.2C++发送内容给html,htmI链接 
content.sig_ sendTextToHtml.connect(function(message) {
output("接收到来自Qt的文本: " + message);
});

2、Qt.与html、js的桥梁QWebChannel 

2.1什么是QWebChannel 

QWebChannel是Qt中用于在C++代码和JavaScript之间进行通信的模块。它提供了一种简单而强大的方式来实现C++代码和JavaScript之间的双向通信,并且可以在Qt应用程序中加载和显示HTML页面,并与其中的JavaScript代码进行交互。

示例:

QWebEnginePage* pPage = ui.webEngineView->page();
QWebChannel* channel = new QWebChannel(this);

注册htm|对象 

channel->registerObject(QStringLiteral("content"), m_pWebObj);
pPage->setWebChannel(channel);
connect(m_pWebObj, &Web0bject::sig_SendToUl, this, &QtWebDemo::update_text);

registerObject类似于反射机制,qwebchannel.js 可以从m_pWebObj里反 射出想要执行的Qt函数

3、qwebchannel.js 

3.1什么是qwechannel.js

qwebchannel.js是一个JavaScript库,用于在HTML页面中与C++代码进行通信。它提供了一种方便的方式来与QWebChannel通信,并且可以在JavaScript代码中调用C++代码中的槽函数,或者在C++代码中调用JavaScript代码中的函数。

 这个文件一定不能缺失,这个文件就相当于是qt和html交互的桥梁,是必须要有的,一般在qt的安装目录下就可以搜索到。

4、简单示例

4.1main.cpp
// main.cpp
#include <QApplication>
#include <QWebEngineView>
#include <QWebChannel>
#include "myobject.h"

int main(int argc, char *argv[])
{
    QApplication app(argc, argv);

    QWebEngineView view;
    view.resize(800, 600);
    view.show();

    QWebChannel channel;
    MyObject myObject;
    channel.registerObject("myObject", &myObject);

    view.page()->setWebChannel(&channel);
    view.setUrl(QUrl("qrc:/index.html"));

    return app.exec();
}
4.2myobject.h 
// myobject.h
#ifndef MYOBJECT_H
#define MYOBJECT_H

#include <QObject>

class MyObject : public QObject
{
    Q_OBJECT

public slots:
    void showMessage(const QString &message);
};

#endif // MYOBJECT_H
4.3<!-- index.html --> 
<!-- index.html -->
<!DOCTYPE html>
<html>
<head>
    <title>QWebChannel Example</title>
    <script src="qwebchannel.js"></script>
</head>
<body>
    <button onclick="sendMessage()">Send Message</button>
    <script>
        new QWebChannel(qt.webChannelTransport, function(channel) {
            var myObject = channel.objects.myObject;
            function sendMessage() {
                myObject.showMessage("Hello from JavaScript!");
            }
        });
    </script>
</body>
</html>
4.4示例分析

本实例中,我们首先创建了一个QWebChannel,并注册了一个名为MyObject的C++对象。然后,我们将这个QWebChannel设置到QWebEngineView中,并加载了一个包含JavaScript代码的HTML页面。在JavaScript代码中,我们通过qwebchannel.js库来与C++代码中的MyObject对象进行通信,当点击按钮时,会调用C++代码中的showMessage槽函数,从而实现了C++代码和JavaScript之间的双向通信。 


以上就是Qt里html、 js的简单交互基本用法的简单介绍。

通过示例不难看出来,QWebChannel和qwebchannel.js,可以很方便地实现C++代码和HTML、JavaScript之间的交互,从而实现更加灵活和交互性强的应用程序。

都看到这里了,点个赞再走呗朋友~

加油吧,预祝大家变得更强!

转载请注明出处或者链接地址:https://www.qianduange.cn//article/5764.html
评论
发布的文章

JavaScript-jQuery1-笔记

2024-04-30 11:04:12

【Jquery简易图床源码】

2024-04-30 11:04:08

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!