简单实现JS与Qt通过QWebChannel进行交互

最新推荐文章于 2024-06-28 10:20:35 发布

人比黄花受

最新推荐文章于 2024-06-28 10:20:35 发布

阅读量2.7k

点赞数

分类专栏： qt

本文链接：https://blog.csdn.net/Strong_HCyouth/article/details/102805041

版权

qt 专栏收录该内容

28 篇文章 2 订阅

订阅专栏

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)；

.h

public slots:

QString jsInvoke(QString func, QString param);

.cpp

QString NativeWebView::jsInvoke(QString func/*可调cpp方法名*/, QString param)

{

page_->runJavaScript(QString("jsInvokeLog('%1', '%2');").arg(func).arg(param));/*qt->js：方法2：向页面发送消息访问某方法，注意的是js方法参数为单引号*/

bool ret = false;

QJsonValue val = QJsonDocument::fromJson(param.toUtf8()).object();

if (func == "openNewPage" && !param.isEmpty())

{

openNewPage(val["url"].toString(), val["width"].toInt(), val["height"].toInt());

ret = true;

}

emit invokeResult(func, ret, __FUNCTION__); /*方法1：以Qt信号方式传递到js*/

return __FUNCTION__;

}

void NativeWebView::openNewPage(QString url, int width, int height)

{

QWebEngineView* view = new QWebEngineView;

view->setFixedSize(width, height);

view->page()->load(url);

view->show();

view->raise();

}

六、js传递数组

JSON.stringify()：将 JavaScript 对象转换为 JSON 字符串

JSON.parse()：将JSON字符串转为一个对象。

js：

var aa = new Array('name', 'id','birthday');

function arrToStr(array)

{

return JSON.stringify(array);

}

bridge.slot_jsCallmeArray(arrToStr(array));

js：

let jsonarr = [

{name:'听风是风'},

{name:'听风是风'}

];

bridge.slot_jsCallqt("jsClicked", JSON.stringify(jsonarr), function(returnValue){

alert(JSON.stringify(jsonarr));

});

cpp：

void slot_jsCallmeArray(const QString &r_text)

{

QJsonParseError error;

QJsonDocument message = QJsonDocument::fromJson(r_text.toUtf8(), &error);

if (error.error) {

showToast("Failed to parse text message as JSON object:" + r_text + "Error is:" + error.errorString());

return;

}

else if (!message.isObject()) {

showToast("Received JSON message that is not an object:" + r_text);

return;

}

人比黄花受

关注

0
点赞
踩
13

收藏

觉得还不错? 一键收藏
0
评论
简单实现JS与Qt通过QWebChannel进行交互

Qt 5.12版本，安装时手动选择了QWebEngine组件html加载pcbridge.js实现通信cpp：注册QObject对象，qwebchannel向远端html客户端暴露QObjectjs：连接远端channel进行传输一、驱动文件：qwebchannel.js pcBridge.js要与qWebChannel或webChannel通信，客户端必须使用并且设置...
复制链接

扫一扫

专栏目录