QT与javascript交互数据的实现

更新时间：2021年05月26日 15:32:42 作者：暴躁的野生猿

本文主要介绍了QT与javascript交互数据的实现，主要包括数据从QT流向JS以及数据从JS流向QT的几种方法，需要的朋友们下面随着小编来一起学习学习吧

一、数据从QT流向JS
1、QT调用JS的函数，JS通过形参获得QT的值
2、JS调用QT的函数，QT函数的返回值进入JS
二、数据从JS流向QT
1、JS调用QT的函数，QT通过形参获得JS的值
2、QT调用JS的函数，JS函数的返回值进入QT

1、QT向JS传递数组

基本类型可以直接传递，例如 int bool string double等

qt向js传递数组，需要把数组转成QJsonArray，再把QJsonArray转成QString，这样js就会接收到一个基本类型string，而这个string在js中直接就是一个标准的js数组。

QT代码示例：调用js函数，并给这个js函数传递一个数组作为参数

    //方法1：构造QJsonArray，然后转成QString
    QJsonArray ja;
    ja << 3 << 4 << 5;
    QString jpar = QString(QJsonDocument(ja).toJson());
    QString cmd = QString("qtPara(%0)").arg(QString(QJsonDocument(ja).toJson()));
    //方法2：直接把数组写成string
//    QString cmd = QString("qtPara([13,14,15])");
 
    //运行js函数
    webView->page()->runJavaScript(cmd);

上面代码调用的javascript函数为：

 function qtPara(numList)
 { 
  alert("js alert: " + numList);//显示qt传来的整个数组
  alert("js alert[0]: " + numList[0]);//显示qt传来数组第0个元素
 }

2、JS向QT传递数组

JS如果向QT传递数组，那么QT就要把这个值转成 QJsonArray

JS还可以向QT传递任意JS对象，那么QT要转成QJsonObject

QT端示例代码：

    QString cmd = QString("jsString()");
 
    webView->page()->runJavaScript(cmd, [](const QVariant &v)
    {
        //情形1：当js返回数字时
        qDebug() << "qt call js = " << v.toDouble();
        //情形2：当js返回string值时
        qDebug() << "qt call js = " << v.toString();
        //情形3：当js返回 js数组时        
        QJsonArray ja = v.toJsonArray();
        qDebug() << "j[0] = " << ja.at(0).toDouble();
        //情形4：当js返回 js 对象时        
        QJsonObject jo = v.toJsonObject();
        qDebug() << jo;
    });

上述代码所调用的JS端的函数：

// var jArr = [120.123456789, 22, 33, 44];//js array
 // var jObj = {"num":[120.123456789, 22, 33, 44], "name":"Tom"};//json
var jNum = 120.1234567;
 function jsString()
 {
   alert("jsString");
   //return jNum ;
   //return jArr;
   //return jObj;
 }

3、JS向QT传递任意类型数据

QT端用QVariant类型来接收，然后qDebug这个值，就能看到这个JS值是如何被封装为QVariant的，然后我们就能

例如，JS向QT返回一个这样的值，这是一个JS对象数组，每个元素都是一个Point对象，且这个Point对象有lng和lat属性值。

path = [new Point(116.387112,39.920977), new  Point(116.387112,39.920977)];

QT接收到以后qDebug它，如下：

QVariant(QVariantList,
(QVariant(QVariantMap, QMap(("lat", QVariant(double, 39.921))("lng", QVariant(double, 116.387)))),
QVariant(QVariantMap, QMap(("lat", QVariant(double, 39.921))("lng", QVariant(double, 116.387))))))

我们发现，

① QT把JS的对象数组，封装成了QVariantList，也即QList<QVariant>，

② 这个list的每个成员又都被QT封装成了QVariantMap，也即QMap<QString, QVariant>

③ 每个map中的key都是QString，value都是QVariant，且这个QVariant是double。

经过上述分析步骤，我们就可轻易地解析出JS向QT传来的任意数据了。

到此这篇关于QT与javascript交互数据的实现的文章就介绍到这了,更多相关QT与javascript交互内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

如何让PyQt5中QWebEngineView与JavaScript交互

轻轻松松学JS调试（不下载任何工具）
很多人可能遇到这样的问题，JS调试，而且都很郁闷，虽然我的JS学的不是那么透彻，基本上算是初级入门.
2010-04-04
微信小程序实现登陆注册滑块验证
这篇文章主要为大家详细介绍了微信小程序实现登陆注册滑块验证，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2022-05-05
深入探讨JavaScript、JQuery屏蔽网页鼠标右键菜单及禁止选择复制
这篇文章主要介绍了深入探讨JavaScript、JQuery屏蔽网页鼠标右键菜单及禁止选择复制,需要的朋友可以参考下
2014-06-06
JavaScript对象扩展方法的用法详解
JavaScript对象中的可扩展性指的是：是否可以给对象添加新属性。所有的内置对象和自定义对象显示的都是可扩展的，对于宿主对象，则由JavaScript引擎决定
2022-11-11
javascript输入CD-KEY自动分割的代码
开发过程中用写的一个脚本，记录下来以备后用与他用，其中attributes["max"].nodeValue是取HTML自定义的 max属性（兼容Firefox和IE）
2010-10-10
ES6学习教程之对象的扩展详解
这篇文章主要给大家介绍了ES6中对象扩展的相关资料，文中介绍的非常详细，对大家具有一定的参考学习价值，需要的朋友们下面来一起看看吧。
2017-05-05
JavaScript中普通属性和排序属性详解
JavaScript属性是对象中的特性,用于描述对象的状态,每个JavaScript对象都有一组属性,可以通过点号（.）或方括号（[]）访问和操作这些属性,本文将给大家讲讲JavaScript中你所不知道的普通属性和排序属性,需要的朋友可以参考下
2023-09-09
layer更改皮肤的实现方法
今天小编就为大家分享一篇layer更改皮肤的实现方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2019-09-09
VSCode Webview中实现点击下载图片的基本流程
这篇文章主要介绍了VSCode Webview中如何实现点击下载图片,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2023-04-04
详解JS如何解决大数据下滚动页面卡顿问题
之前遇到不分页直接获取到全部数据，前端滚动查看数据，页面就挺卡顿的，所以这篇文章来和大家聊聊如何解决这一问题，感兴趣的小伙伴可以了解下
2023-07-07