QWebChannelQtjsc++互相调用demo_qt.webChannelTransport资源-CSDN文库

共14个文件

cpp：3个

h：2个

html：2个

需积分: 50 92 浏览量 2019-01-14 09:45:33 上传评论 1 收藏 208KB 7Z 举报

**QWebChannel：Qt、JavaScript与C++的通信桥梁** 在现代软件开发中，前端界面与后端逻辑的交互越来越重要。Qt库提供了一个强大的工具——QWebChannel，它允许Qt应用程序与JavaScript（在Web浏览器或者QWebKit或Qt WebEngine环境中）之间进行双向通信。这个工具使得C++开发者可以轻松地在网页上操作Qt对象，同时JavaScript也可以调用C++的函数，大大增强了Web应用的功能和性能。 ### QWebChannel的基本原理 QWebChannel的核心是建立一个通信通道，允许JavaScript对象与Qt对象之间的消息传递。它依赖于JSON（JavaScript Object Notation）数据格式进行数据交换，因为JSON易于解析和生成，且兼容性好。在C++端，我们创建一个QWebChannel实例，并注册需要暴露给JavaScript的对象；在JavaScript端，我们同样创建一个QWebChannel实例，并连接到对应的C++对象。 ### 创建QWebChannel的步骤 1. **C++端设置** - 实现一个C++类，该类需要继承自`QObject`，并使用`Q_OBJECT`宏声明。 - 在该类中定义需要暴露给JavaScript的信号和槽。 - 使用`QWebChannel`注册这个C++对象，并提供一个唯一的ID。 - 将QWebChannel实例连接到Web引擎的`setWebChannel()`方法。 2. **JavaScript端设置** - 在HTML中加载QWebChannel.js，这是Qt提供的用于JavaScript和C++通信的脚本。 - 创建一个新的QWebChannel实例，并传入服务器端创建的QWebChannel的URL。 - 使用`registerObject()`方法将C++对象注册到JavaScript环境中，使用之前在C++端设置的ID。 - 连接C++对象的信号和调用其槽函数。 ### 注意事项 - **URL路径**：在C++端，确保提供给JavaScript访问的QWebChannel的URL是正确的。这通常是一个本地文件系统路径，如`qrc:///webchannel/qwebchannel.js`，或者在网络环境下是服务器上的一个URL。 - **JS和HTML路径**：确保JavaScript代码（如QWebChannel.js）和HTML文件能够正确加载。这可能涉及到文件路径的配置，尤其是在开发环境和部署环境之间可能存在差异。 ### 示例代码 ```cpp // C++端 class MyObject : public QObject { Q_OBJECT public: Q_INVOKABLE void jsFunction() { qDebug() << "Called from JavaScript!"; } Q_SIGNALS: void cppSignal(); }; int main(int argc, char *argv[]) { QApplication app(argc, argv); QWebEngineView view; QWebChannel channel; MyObject obj; channel.registerObject(QStringLiteral("myObject"), &obj); view.page()->setWebChannel(&channel); view.load(QUrl(QStringLiteral("file:///path/to/index.html"))); view.show(); return app.exec(); } ``` ```html  <!DOCTYPE html> <html> <head> <script type="text/javascript" src="qrc:///webchannel/qwebchannel.js"></script> </head> <body> <script> new QWebChannel(qt.webChannelTransport, function(channel) { var myObject = channel.objects.myObject; myObject.jsFunction(); // 调用C++方法 myObject.cppSignal.connect(function() { console.log('Received signal from C++!'); }); }); </script> </body> </html> ``` 通过这个简单的示例，我们可以看到QWebChannel如何在C++和JavaScript之间建立通信。它简化了复杂的接口设计，使得前后端交互更为顺畅，对于开发复杂的Web应用非常有帮助。在实际项目中，可以根据需求实现更复杂的数据交换和业务逻辑。

资源推荐

资源详情

资源评论

收起资源包目录

webchanneltest.7z （14个子文件）

webchanneltest

bridge.cpp 354B

bridge.h 237B

main.qrc 266B

webchanneltest.pro 1KB

main.cpp 183B

mainwindow.ui 2KB

webchanneltest.pro.user 63KB

mainwindow.cpp 847B

mainwindow.h 512B

htmlEcharts

testEcharts.html 696B

echarts.min.js 727KB

testEcharts_copy.html 682B

qwebchannel.js 16KB

main.qml 35B

#include "mainwindow.h" #include "ui_mainwindow.h" #include <QWebChannel> #include "bridge.h" MainWindow::MainWindow(QWidget *parent) : QMainWindow(parent), ui(new Ui::MainWindow) { ui->setupUi(this); m_vboxlayout = new QVBoxLayout; m_webview =new QWebEngineView(ui->widget); m_vboxlayout->addWidget(m_webview); ui->widget->setLayout(m_vboxlayout); QWebChannel *channel = new QWebChannel(this); channel->registerObject("bridge", (QObject*)bridge::instance()); m_webview->page()->setWebChannel(channel); QUrl source(QLatin1String("qrc:/htmlEcharts/testEcharts.html")); m_webview->page()->load(source); } MainWindow::~MainWindow() { delete ui; } void MainWindow::on_pushButton_clicked() { m_webview->page()->runJavaScript("showAlert()"); }

评论收藏

内容反馈