Qt和JavaScript使用QWebChannel交互一——和Qt内嵌网页交互
目录Qt和JavaScript使用QWebChannel交互一——和Qt内嵌网页交互前言一、效果二、实现过程1. Qt端2. 网页端三、过程中出现的问题问题一问题二四、项目完整源码五、总结
前言
Qt提供了QWebChannel来和网页进行通信，只需要注册自定义对象一下，就可以直接绑定信号槽来进行Qt程序和网页之前的通信，非常方便
下面使用一个案例来学习QWebChannel
环境：vs2017+Qt5.11.2 写Qt代码，vsCode写js代码
一、效果
直接上图
二、实现过程
1. Qt端
新建一个Qt Gui项目，取名WebChannelDemo
一路下一步，最后选择QWidget基类
得到一个这样结构的项目
使用Qt Designer打开webchanneldemo.ui,拖一个界面
这个时候再来创建一个用于通过WebChannel通信的WebTransport类，基类选择QObject
为了方便，不用每次使用都创建一个WebTransport对象，我们将这个类写成单例类，然后定义和js交互的信号的槽函数，最近定义一个宏来使用实例
#pragma once
#include <QObject>
class WebTransport : public QObject
{
Q_OBJECT
WebTransport(QObject *parent = nullptr);
~WebTransport();
public:
// 获取实例
static WebTransport* instance();
signals:
// 向js发送信号
void msgToJs(const QString& msg);
// 将从js接收的数据发送出去
void receviedJsMsg(const QString& msg);
public slots:
// js调用此函数，接收js传入的数据
void msgToQt(const QString& msg);
};
// 定义一个宏
#ifndef WEB_TRSPT
#define WEB_TRSPT WebTransport::instance()
#endif // !WEB_TRSPT
最后，我们到WebChannelDemo类中来初始化一下，主要做了以下几件事：
关联信号槽
实例化一个QWebChannel对象
将WebTransport单例对象注册到QWebChannel
将QWebChannel对象设置到网页中去
最后再加载本地网页
void WebChannelDemo::setup()
{
// 绑定信号槽
connect(ui.pushButton, &QPushButton::clicked, [this]() {
ui.plainTextEdit->appendPlainText(QStringLiteral("发送消息到js：") + ui.lineEdit->text());
emit WEB_TRSPT->msgToJs(ui.lineEdit->text());
});
connect(WEB_TRSPT, &WebTransport::receviedJsMsg, [this](const QString& msg) {
ui.plainTextEdit->appendPlainText(QStringLiteral("接收js信息：") + msg);
});
// 构造一个channel对象
QWebChannel* channel = new QWebChannel(this);
// 向channel对象注册自定义对象
channel->registerObject(QStringLiteral("webBridge"), WEB_TRSPT);
// 使用webview的page设置channel对象
ui.webEngineView->page()->setWebChannel(channel
如何通过QWebChannel实现Qt与JavaScript交互？
摘要：Qt和JavaScript使用QWebChannel交互一——和Qt内嵌网页交互 (文章目录) 前言 Qt提供了QWebChannel来和网页进行通信，只需要注册自定义对象一下，就可以直接绑定信号槽来进行Qt程序和网页之前的通信，非常方便