QML 与内嵌 web 网页通讯（WebChannel web端怎么写）
0. 概述
- WebChannel的定义：
在 Web 端使用 WebChannel 的话题通常涉及到与 Qt 应用程序之间进行通信。WebChannel 是 Qt 提供的一个模块，允许在 Qt 应用程序与嵌入的 Web 内容（如使用 Qt WebEngine 或 Qt WebView 渲染的网页）之间建立双向通信。
以下是在 Web 端使用 WebChannel 的一般步骤：
1. 在 HTML 页面中引入相应的 JavaScript 文件
在你的 HTML 页面中，需要引入 Qt 提供的 qtwebchannel.js 脚本文件。这个文件通常可以在 Qt 的安装目录中找到，具体路径可能类似于：
<script src="qrc:///qtwebchannel/qwebchannel.js"></script>2. 创建 WebChannel 对象并绑定到 JavaScript 对象
在 JavaScript 中，创建一个 QWebChannel 对象，并绑定到一个自定义的 JavaScript 对象上。这个自定义对象会作为通信的桥梁，使得 Qt 应用程序可以调用其中定义的方法，反之亦然。
<script>
var webChannel;
new QWebChannel(qt.webChannelTransport, function(channel) {
webChannel = channel.objects.webChannelObject;
// 在此处可以添加处理连接建立后的逻辑
});
</script>上面的代码中，qt.webChannelTransport 是 Qt WebEngine 提供的全局变量，用于连接 Qt 应用程序和 Web 页面之间的通道。webChannelObject 是在 Qt 侧定义的对象，通过这个对象可以进行双向通信。
3. 定义 WebChannelObject 对象的方法和信号
在 Qt 应用程序的 C 代码中，需要定义一个继承自 QObject 的类，将其实例注册到 QWebChannel 中。这个类中定义的方法和信号将会在 Web 端 JavaScript 对象中可以直接调用和连接。
#include <QtWebChannel/QWebChannel>
#include <QtWebEngineWidgets/QWebEngineView>
#include <QtWidgets/QApplication>
class WebChannelObject : public QObject
{
Q_OBJECT
public slots:
void doSomething(const QString &message) {
qDebug() << "Received message from web:" << message;
// 在这里处理接收到的消息
}
signals:
void sendMessage(const QString &message);
};
int main(int argc, char *argv[])
{
QApplication app(argc, argv);
QWebEngineView view;
WebChannelObject channelObject;
QWebChannel channel;
channel.registerObject(QStringLiteral("webChannelObject"), &channelObject);
view.page()->setWebChannel(&channel);
view.setUrl(QUrl("qrc:///index.html"));
view.show();
return app.exec();
}
#include "main.moc"在上面的 C 示例中，WebChannelObject 类继承自 QObject，并且使用 QWebChannel 将其实例注册为 webChannelObject。在 doSomething 方法中，处理来自 Web 页面发送过来的消息。在 Web 端，可以通过 webChannelObject 对象调用 doSomething 方法来与 Qt 应用程序进行通信。
4. 在 Web 页面中使用 WebChannelObject 对象
在 Web 页面的 JavaScript 中，通过 webChannelObject 对象调用 Qt 定义的方法，并监听信号：
<script>
if (typeof webChannel !== 'undefined') {
webChannel.sendMessage.connect(function(message) {
console.log("Received message from Qt:", message);
});
webChannel.doSomething("Hello from Web!");
} else {
console.error("WebChannel connection not established.");
}
</script>在上述代码中，通过 webChannelObject 对象连接 Qt 定义的信号 sendMessage，并且调用 doSomething 方法向 Qt 发送消息。
