在利用Qt框架的QWebEngineView进行嵌入浏览器开发时，可以很方便的通过
QWebChannel实现与js的交互，本节内容简单讲解js向Qt应用程序发送消息，实现对本地程序notepad的调用。
要实现js向Qt应用程序发送消息，可以分如下几步：
1. 创建自己的C++交互类：用于接收消息的接口必须定义为public slots：，以供js调用:
jscontext.h
#ifndef JSCONTEXT_H
#define JSCONTEXT_H
#include <QObject>
#include <QWebEnginePage>
class JsContext : public QObject
{
Q_OBJECT
public:
JsContext(QObject *parent = 0);
~JsContext(){}
signals:
void openNotepad(const QString& msg);
public slots:
// 接收前端js发送来的消息
void onRecvMsg(const QString& msg, const QString para);
};
#endif // JSCONTEXT_H
jscontext.cpp
#include "jscontext.h"
JsContext::JsContext(QObject *parent /*= 0*/) : QObject(parent)
{
}
void JsContext::onRecvMsg(const QString &msg, const QString para)
{
if (msg == "notepad")
{
emit openNotepad(para);
}
}
2. 创建QWebChannel通道，在QWebChannel中注册C++交互类对象，并设置为当前页面的通道：
m_pJsContext = new JsContext(this);
m_pWebChannel = new QWebChannel(this);
m_pWebChannel->registerObject("context_qt", m_pJsContext);
m_pWebView->page()->setWebChannel(m_pWebChannel);
接下来看看页面这边的实现：
首先创建一个测试的html页面：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>webchannel TEST</title>
</head>
<body>
<p>webchannel test</p>
<script type="text/javascript" src="./js/qwebchannel.js"></script>
<script type="text/javascript" src="./js/opennotepad.js"></script>
<button type="button" onclick="open_notepad('notepad', 'test.txt')">打开notepad </button>
</body>
</html>
实现我们的js工具包opennotepad.js
var context_qt;
// 初始化
function init_qt()
{
if (typeof qt != 'undefined')
{
new QWebChannel(qt.webChannelTransport, function(channel)
{
context_qt = channel.objects.context_qt; //从通道中获取交互对象
})
}
else
{
console.log("qt object obtain fail!");
}
}
// 向qt发送消息
function sendMessage(msg, para)
{
if(typeof context_qt == 'undefined')
{
console.log("context_qt object obtain fail!");
}
else
{
context_qt.onRecvMsg(msg, para); //调用交互对象接口，接收消息
}
}
// 控件响应函数
function open_notepad(msg, para)
{
sendMessage(msg, para);
}
init_qt();
备注：qwebchannel.js文件可以在qt自带的例子或网上下载拷贝
运行效果：
image.png
网友评论