Qt与H5的混合编程
c++
javascript
Qt WebEngine
自从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"了。
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
