Qt与H5的混合编程
自从Qt WebKit 被 Qt WebEngine替换后，就无法从C++ 直接访问html的元素了。以往很多通过WebKit 类来对网页内容的操作，要改为用JavaScript了。QWebEnginView加载网页后，要从C++ 代码中调用runJavaScript方法来调用页面的javascript脚本。Qt发明了一种C++ 和Javascript 的沟通机制，这种机制不仅能从页面获得元素，也能实现：从C++ 调用Js方法，从js调用C++ 的方法，从C++ 传递变量给js，从js传递变量给C++ 。以下是应用场景。
1. js调用C++函数
C++的代码需要实现一个类，类里包含将被js调用方法，且这个方法必须做为插槽。然后将这个类的对象注册到类QWebChannel的对象中，再将这个QWebChannel的对象赋值给QWebEngineView类的对象的page（）方法。代码如下：
- class WebClass : public QObject
- {
- Q_OBJECT
- public slots:
- void jscallme()
- {
- QMessageBox::information(NULL,"jscallme","I'm called by js!");
- }
- };
- WebClass *webobj = new WebClass();
- QWebChannel *channel = new QWebChannel(this);
- channel->registerObject("webobj", webobj);
- view->page()->setWebChannel(channel);
js端应该实例化一个QWebChannel来调用C++的jscallme方法。代码如下
- new QWebChannel(qt.webChannelTransport,
- function(channel){
- var webobj = channel.objects.webobj;
- window.foo = webobj;
- });
QWebChannel 是在qwebchannel.js中定义的，所以这个脚本应该首先在页面中加载。这个文件可在qt安装路径下的example目录找到，你也可以从文末的demo中获得。在上面的代码中，作为第二个参数传入的function里，C++ 的对象（channel.objects.webobj）赋值给了js的变量webobj，然后又将其赋值给了window.foo，以便你在其它地方可以引用这个C++ 的对象。这段代码执行后，js可以象下面这样调用C++ 的槽函数了：
foo.jscallme();2. js传数据给C++
既然知道了如何调用C++ 的方法，那就应该找到给C++ 传值的方法，比如，给函数传参。我们将C++ 端的jscallme方法做如下改造：
- void jscallme(const QString &datafromjs)
- {
- QMessageBox::information(NULL,"jscallme","I'm called by js!");
- m_data=datafromjs;
- }
然后在js里的调用代码为：
foo.jscallme(somedata);注意参数前的const不能省略，否则会引发如下错误：
Could not convert argument QJsonValue(string, “sd”) to target type .虽然数据可以做为函数的参数传递，但如果我们象下面的js这样给属性赋值会更方便，也符合习惯：
foo.someattribute="somedata";当代码执行后，我们期望somedata这个值会被赋值给C++ 类对象所暴露出来的的成员变量中。这可以通过在C++ 的类中声明一个qtproperty来实现：
- class WebClass : public QObject
- {
- Q_OBJECT
- Q_PROPERTY(QString someattribute MEMBER m_someattribute)
- public slots:
- void jscallme()
- {
- QMessageBox::information(NULL,"jscallme","I'm called by js!");
- }
- private:
- QString m_someattribute;
- };
这样你就可以在js中执行foo.someattribute="somedata"，然后C++对象中的m_someattribute的值就变为"somedata"了。
3. C++传数据给js
可以通过信号将数据从C++ 传给js。我们触发一个带参数的信号，这个参数就是我们将要传递的数据。js必须将这个信号连接到一个function以接收这个数据。
- class WebClass : public QObject
- {
- Q_OBJECT
- Q_PROPERTY(QString someattribute MEMBER m_someattribute)
- public slots:
- void jscallme()
- {
- QMessageBox::information(NULL,"jscallme","I'm called by js!");
- }
- void setsomeattribute(QString attr)
- {
- m_someattribute=attr;
- emit someattributeChanged(m_someattribute);
- }
- signals:
- void someattributeChanged(QString & attr);
- private:
- QString m_someattribute;
- };
javascript代码：
- var updateattribute=function(text)
- {
- $("#attrid").val(text);
- }
- new QWebChannel(qt.webChannelTransport,
- function(channel){
- var webobj = channel.objects.webobj;
- window.foo = webobj;
- webobj.someattributeChanged.connect(updateattribute);
- });
这行代码webobj.someattributeChanged.connect(updateattribute) 将C++的信号函数someattributeChanged 和js的函数updateattribute连接起来了。注意，updateattribute只接收了一个text参数，而且没有在connet方法中提供这个参数值。实际上，在信号接收到这个值前，我们都不知道传递给updateattribute的参数值。信号伴随其参数"attr"出现，而其参数会传递给updateattribute的参数"text"。这时，如果调用 webobj->setsomeattribute(“hello”),就会在html端看到id为 “#attrid” 的html元素的值被改为“hello”。虽然在上面的例子中，将变量m_someattribute绑定到了qt的属性someattribute，但这其实并不是必须的。信号机制自己就能发现传递的数据。
这里可以在声明someattribute属性时，通过添加NOTIFY 参数来简化一些事情。
- class WebClass : public QObject
- {
- Q_OBJECT
- Q_PROPERTY(QString someattribute MEMBER m_someattribute NOTIFY someattributeChanged)
- public slots:
- void jscallme()
- {
- QMessageBox::information(NULL,"jscallme","I'm called by js!");
- }
- signals:
- void someattributeChanged(QString & attr);
- private:
- QString m_someattribute;
- };
这样，在某段C++ 代码中调用 weobj->setProperty("someattribute","hello") 时，信号“someattributeChanged”就会自动触发，并且我们的页面也会得到更新。
4. C++调用js的function
相对于从js中调用C++ 方法，从C++ 中调用js的function显得更直接一些。直接运行“runJavaScript”方法并将function作为参数传递，如下：
view->page()->runJavaScript("jsfun();",[this](const QVariant &v) { qDebug()<<v.toString();});假定jsfun已经在页面中定义了，否则，应该直接在字符串参数中定义。返回值异步传递给了作为参数v的lambda表达式。
现在回到文章开始提出的问题：在C++中如何获得页面的元素？答案如下：
- view->page()->runJavaScript("function getelement(){return $('#elementid').val();} getelement();",[this](const QVariant &v) { qDebug()<<v.toString();});
脚本中用了jQuery方法，所以必须保证jQuery在页面中正常被引入。当然,也可以使用其它js框架，例如vue。
示例下载 （代码是Qt在Deepin 下实现的，Windows用户请自行转换工程）
本文参考：Communication between C++ and Javascript in Qt WebEngine