Qt5.6 c++与网页html/js的交互实现

Qt5.6 c++与网页html/js的交互实现

本篇文章主要讲解Qt5.6之后的QWebEngine与html或js的交互。在Qt5.6之前Qt窗体嵌入网页使用的是QWebKit但是Qt5.6将webkit去掉了，这时候很多人由于以前的项目中使用了QWebkit，而不想对Qt进行升级。

• Qt5.6之前Qt与html/js的交互方式

• Qt5.6之后的交互方式

• 为什么要改变

• 改变之后的优点

---

Qt5.6之前Qt与html/js的交互方式

• Qt5.6之前Qt加载html以及与网页的交互统统用的都是QWebkit，显示网页用的都是QWebView。具体的使用方式为：

  -在Qt中加载页面

 QWebView jsWebView;

 jsWebView.load(QUrl("www.baidu.com"));

//jsWebView.show(); 加入这行代码就可以看到窗体了

-在Qt中运行js对象

QVariant ret = jsWebView->page()->mainFrame()->evaluateJavaScript(strParam);    //strparam是运行js函数可以带的参数

    QString content = ret.toString();//查看运行结果

－js对象调用Qt的函数

//MainWindow 为注册的对象，为了能让js使用此对象
jsWebView->page()->mainFrame()->addToJavaScriptWindowObject("MainWindow",this);

然后可以在js代码中使用MainWindow对象调用Qt的槽函数

相信这种方法很多Qter已经掌握了。下面就来说一说Qt进入到5.6之后的调用方法

Qt5.6调用js的方法

Qt5.6之后不能使用QWebView了。代替它的是QWebEngineView。QWebEngineView的使用方式同QWebView基本一致。下面来看下代码

QWebEngineView ＊engine = new QWebEngineView(this);
    connect(engine, SIGNAL(loadFinished(bool)), this, SLOT(loadFinished(bool)));
    engine->load(QUrl(QDir::currentPath() + "socketio.html"));

    engine->show();

Qt5.6之后与js通信的重要类是：QWebChannel

-交互的具体实现代码
1. Qt调用js的函数：

 engine->page()->runJavaScript(strPusherURL,0,[](const QVariant &var){qDebug() << var.toString();});

1. js中调用Qt的函数

QWebChannel ＊channel = new QWebChannel(engine->page());
channel->registerObject(QStringLiteral("MainWindow"), this);
engine->page()->setWebChannel(channel);

以上第二步方式能够让js使用Qt的对象，但是从js能够调用到具体的函数就得再下点功夫，并且是跟之前的版本完全不同的方法。
* 使用属性系统设置回调方法。

具体的例子：

 Q_PROPERTY(QString param1 READ objectName WRITE setContent)
    Q_PROPERTY(QString param2 READ objectName WRITE setContent)

以上方式就是设置了两个属性，这两个属性为js调用Qt函数setContent时的参数。

如果你的代码这样编写了，运行了，排除掉语法错误之后，编译器还是会报道一个错误的。
:-1: error: No rule to make target ../chatclient-html/qwebchannel.js', needed byqwebchannel.js’. Stop.

但是不要着急，这个文件时Qt通信需要带的文件，你可以打开creator的例子 搜索下QWebChannel，打开工程，打开工程文件你就可以找到这个js文件了。

如果你以前的代码用QWebKit方式编写的，要升级到5.6，其实很简单。
1. 加入QWebChannel
2. 修改注册对象方式为：registerObject
3. 使用属性系统设置回调方法以及回调的参数
4. 工程中加入qwebchannel.js文件

Qt官方为什么要改变以及改变之后的优点

是官方的推荐方式，他可以很方便的实现C++和HTML/JS的双向通信，同时实现C++和HTML/JS的解耦，方便开发人员的分工及系统集成，参见后面的例子。

在QT5.5和QT5.6中，利用Qt的QtWebEngine和WebChannel模块，你完全可以进行本地桌面与web混合应用开发，你可以自由地混合JavaScript，样式表，Web内容和Qt组件。基于Chromium的
QtWebEngine是一个非常成熟的web浏览引擎。你可以在Ｃ++中执行JavaScript，或者在网页中集成Ｃ++对象，并且通过JavaScript和这些对象进行交互。

一个现代的ＨＴＭＬ渲染引擎只是混合开发的一半，另一半就是本地应用和渲染对象的交互。ＱＴ的Chromium的QtWebEngine集成提供了这种解决方案，当然目前还不是很完善。

从QT5.4开始就新增了QtWebChannel模块，该模块提供了在QML/C++和HTML/Javascript之间的一个简单、易用的桥接，从而使得开发能够使用Qt和Web技术进行混合开发，目前QT官方也推荐是用QtWebChannel来桥接C++和HTML，参见Qt
WebChannel–bridgingthegapbetweenC++/QMLandtheweb——https://www.youtube.com/watch?v=KnvnTi6XafA，这是2014年Qt开发者大会上的一段视屏演讲。

通过QtWebChannel能够实现C++/QML和HTML/javascript客户端之间进行无缝桥接，目前主要支持两种方式的桥接。

客户机可以是任何支持WebSockets的JavaScriptruntime机器和应用，客户机可以是独立的应用或浏览器。也就是说QtWebChannel是基于WebSockets协议之上。
通过IPC的方式实现C++/QML和HTML/javascript客户端之间进行通信。在QT应用内嵌入HTML或JS页面的情况下使用基于IPC的WebChannel通信效率更高效。