本文主要是介绍简单实现JS与Qt通过QWebChannel进行交互，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
Qt 5.12版本，安装时手动选择了QWebEngine组件
html加载pcbridge.js实现通信
cpp：注册QObject对象，qwebchannel向远端html客户端暴露QObject
js：连接远端channel进行传输
一、驱动文件：qwebchannel.js pcBridge.js
要与qWebChannel或webChannel通信，客户端必须使用并且设置qwebchannel.js提供的javascript api。对于在Qt WebEngine中运行的本地页面，客户端可以将js文件放到工程目录下。对于外部加载的html页面，需要将文件复制到web服务器，然后实例化一个qwebchannel对象；pcBridge.js将原本需要html持有的对象封装到pcbridge.js进行加载，将他们在html文件开头进行引入
<script type="text/javascript" src="qwebchannel.js"></script><script type="text/javascript" src="pcbridge.js"></script>
二、交互方式
1）js->cpp
js:bridge.slot_oncppFuc();
qt:public slots:void slot_oncppFuc(); //可通过bridge直接访问公有成员
2）cpp->js
a、cpp->runJavaScript(QString("js方法名(%1);").arg(func))； //QWebEnginePage提供了执行JS方法的方法runJavaScript,实现向页面的消息发送。
b、js:bridge.cppSignals.connect(jsFuc);
qt:signals:void cppSignals();
三、pcbridge.js
1）js调用cpp方法接口：外部包了一层的InvokeCPP(fucName， param)方法，在qt方法名唯一的情况下，不需要在qt定义多个公有槽函数
2）js调用cpp方法，注册js回调：
bridge.cppFuc(func, param, function(returnValue){jsFuc();}var bridge;/*初始化通道*/
/*webChannelTransport是一条公开的方法，将要使用的Web通道实例设置为通道，并使用Chromium IPC消息将其连接到Web引擎进行传输，html可以访问其所有远素及成员方法。只有Qt端正确地向页面设置了webchannel才能取到，否则会是undefined*/
function initChannel()
{if (typeof qt != 'undefined'){new QWebChannel(qt.webChannelTransport, function(channel){bridge = channel.objects.bridge; //js的功能函数，bridge是c++程序定义的window.foo = bridge；bridge.invokeResult.connect(cppInvokeResult);/*qt->js：方法1：连接qt信号*/});}else{alert("qt对象获取失败！");}
}/*cpp方法名作为键值在js中实现调用cpp方法*/
function InvokeCPP(func/*方法名*/, param/*传参*/)
{if(typeof bridge == 'undefined'){alert("bridge对象获取失败！");}else{bridge.jsInvoke(func, param, function(returnValue){ //回调参数 /*js->qt 方法：直接调用*/alert("调用 " + func + " 返回值: " + returnValue);});
}/*返回cpp调用结果，cpp的invokeResult信号驱动*/
function cppInvokeResult(func, result, data)
{if(result){alert("调用 " + func + " 成功: " + data);}else{alert("调用 " + func + " 失败: " + data);}
}/*js日志弹窗*/
function jsInvokeLog(func, param)
{alert("jsInvokeLog: " + func + param);
}/*html页面点击事件*/
function invokeOnClicked()
{var func = document.getElementById("content").value;/*获取方法名*/var param = "{\"width\": 640,\"height\": 480,\"url\": \"http://www.bing.com\"}";InvokeCPP(func, param);
}
initChannel();三、html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>WebChannel Native Invoke</title>
</head>
<body>
<p>WebChannel Native Invoke</p>
<script type="text/javascript" src="./qwebchannel.js"></script>
<script type="text/javascript" src="./bridge.js"></script>
<input id="content" type="text" value="openNewPage" name="msgText" />/*注册句柄content*/
<input type="button" value="调用Cpp函数" onclick="invokeOnClicked()" />
</body>
</html>四、注册页面
QWebEngineView* webView = new QWebEngineView(parent);
webView ->setFixedSize(parent→size());
QWebChannel* channel = new QWebChannel(this);
channel->registerObject("bridge"/*注册IP*/, this/*交互对象*/); //注册通信介质
page_ = this->page();
page_ ->setWebChannel(channel);
page_ ->load(url);void QWebChannel::registerObject(const QString &id, QObject *object)
向qwebchannel注册单个对象。对象的属性、信号和公共方法将发布到远程客户端。然后，构造一个具有标识符id的对象。
注意：当前的限制是必须在初始化任何客户端之前注册对象。
注意：这个函数可以通过元对象系统和qml调用。请参阅q_invokable。
以上代码webChannel->registerObject("webobj", abc);注册对象IP为webObj与远程服务端进行通信，js可以访问abc对象的所有可访问方法。
五、js调用Qt方法
QWebEngineView是网页url装载的容器，它显示了加载和显示html页面所需的最小代码量，并且是可以用作进一步实验的基础。
1）cpp访问方法接口：
InvokeCPP(funcName， param)；|
|
六、js传递数组
JSON.stringify()：将 JavaScript 对象转换为 JSON 字符串
JSON.parse()：将JSON字符串转为一个对象。
|
|
这篇关于简单实现JS与Qt通过QWebChannel进行交互的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
