最清晰Qt与JS通过qwebchannel交互例子
tags: Qt javascript qwebchannel QWebEngineView
由来
在Qt平台上有很多很棒的图表控件，比如QWT，QCustomPlot，以及Qt5.5以后自带的QChart，但与JS网页端的各种绚丽效果控件比，还是差了不少。这次就是打算把百度出品的EChart控件应用在Qt端。
而在这样的跨平台调用中，很多文章都写的含糊其词，让人晕头转向，于是写一篇记录下最清晰最简单的调用过程。
工具
Qt5.10–需要在安装时选择QWebEngine
工程配置
1.新建基于Widget的工程
2..h里引用头文件
#include <QWebEngineView>
#include <QtWebChannel>
3.从QObjec派生一个类
class WebClass : public QObject
{
Q_OBJECT
public slots:
void jscallme()
{
QMessageBox::information(NULL, "jscallme", "jscallme");
}
};
类里声明变量
QWebEngineView *webView = nullptr;
QWebChannel *webChannel = nullptr;
.cpp里初始化变量
webView = new QWebEngineView(parent);
webView->load(QUrl::fromLocalFile("D:\\Code\\EChartTest\\test.html"));
mainLayout->addWidget(webView);
webChannel = new QWebChannel;
WebClass *webobj = new WebClass();
webChannel->registerObject("webobj", webobj);
webView->page()->setWebChannel(webChannel);
4.将Qt目录下的qwebchannel.js文件拷贝到工程目录下
5.用文本编辑器新建一个test.html文件，内容写：
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<body>
<script src="qwebchannel.js"></script>
<script type="text/javascript">
new QWebChannel(qt.webChannelTransport,
function(channel){
var webobj = channel.objects.webobj;
window.foo = webobj;
webobj.jscallme();
});
</script>
</body>
</html>
6.好了，Qt端 运行程序。
7.结果为HTML的程序调用了C++的函数。
JS传递给C++
再进一步吧/
1.修改void jscallme()为
void jscallme(const QString &text)
{
QMessageBox::information(NULL, "jscallme", text);
}
2.HTML端修改webobj.jscallme();为webobj.jscallme('中文调用');
3.右键点击下Qt端的程序，reload后，弹出结果
4.每次都这样通过C++端函数赋值太麻烦了，可以直接在JS里给C++端变量赋值就好了。也简单，修改派生的类。
class WebClass : public QObject
{
Q_OBJECT
Q_PROPERTY(QString content MEMBER m_content)
public slots:
void jscallme()
{
QMessageBox::information(NULL, "jscallme", m_content);
}
private:
QString m_content;
}
5.修改HTML端
new QWebChannel(qt.webChannelTransport,
function(channel){
var webobj = channel.objects.webobj;
window.foo = webobj;
webobj.content = 'sdfef中文';
webobj.jscallme();
});
6.reload下Qt端程序，结果符合预期
c++传递到JS
1.修改派生类
Q_PROPERTY(QString content MEMBER m_content NOTIFY contentChanged)
2.修改HTML端
<script type="text/javascript">
var updateattribute=function(text)
{
document.write(text);
}
new QWebChannel(qt.webChannelTransport,
function(channel){
var webobj = channel.objects.webobj;
window.foo = webobj;
webobj.contentChanged.connect(updateattribute);
});
</script>
3.Qt程序上放个按钮，按钮按下事件里写:webobj->setProperty("content", "453453453");
4.Qt程序上的webview会刷新出结果.