QT与javascript交互数据的实现


Posted in Javascript onMay 26, 2021

一、数据从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交互 内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
JS判断不同分辨率调用不同的CSS样式文件实现思路及测试代码
Jan 23 Javascript
jquery mobile实现拨打电话功能的几种方法
Aug 05 Javascript
node.js操作mongodb学习小结
Apr 25 Javascript
ECMAScript6新增值比较函数Object.is
Jun 12 Javascript
JavaScript绑定事件监听函数的通用方法
May 14 Javascript
全面接触神奇的Bootstrap导航条实战篇
Aug 01 Javascript
JS正则匹配中文的方法示例
Jan 06 Javascript
Node.js调试技术总结分享
Mar 12 Javascript
javaScript中的空值和假值
Dec 18 Javascript
Node.js引入UIBootstrap的方法示例
May 11 Javascript
Layui组件Table绑定行点击事件和获取行数据的方法
Aug 19 Javascript
浅谈Vue的computed计算属性
Mar 21 Vue.js
小程序实现筛子抽奖
详解vue身份认证管理和租户管理
ES6 解构赋值的原理及运用
vue点击弹窗自动触发点击事件的解决办法(模拟场景)
js Proxy的原理详解
May 25 #Javascript
解析原生JS getComputedStyle
80行代码写一个Webpack插件并发布到npm
You might like
php入门小知识
2008/03/24 PHP
PHP fgetcsv 定义和用法(附windows与linux下兼容问题)
2012/05/29 PHP
destoon切换城市后实现logo旁边显示地区名称的方法
2014/08/21 PHP
PHP数组与对象之间使用递归实现转换的方法
2015/06/24 PHP
基于PHP生成简单的验证码
2016/06/01 PHP
Mac下php 5升级到php 7的步骤详解
2017/04/26 PHP
JS解密入门 最终变量劫持
2008/06/25 Javascript
JavaScript入门教程(11) js事件处理
2009/01/31 Javascript
js 通用javascript函数库整理
2011/08/14 Javascript
读取input:file的路径并显示本地图片的方法
2013/09/23 Javascript
动态加载jquery库的方法
2014/02/12 Javascript
jQuery中:contains选择器用法实例
2014/12/30 Javascript
jQuery Validate验证框架经典大全
2015/09/23 Javascript
JS把内容动态插入到DIV的实现方法
2016/07/19 Javascript
使用Electron构建React+Webpack桌面应用的方法
2017/12/15 Javascript
JS实现标签滚动切换效果
2017/12/25 Javascript
JavaScript使用math.js进行精确计算操作示例
2018/06/19 Javascript
浅析vue插槽和作用域插槽的理解
2019/04/22 Javascript
对于防止按钮重复点击的尝试详解
2019/04/22 Javascript
Python中属性和描述符的正确使用
2016/08/23 Python
python机器学习理论与实战(一)K近邻法
2021/01/28 Python
python使用selenium实现批量文件下载
2019/03/11 Python
简单了解django orm中介模型
2019/07/30 Python
基于python实现对文件进行切分行
2020/04/26 Python
使用pytorch实现论文中的unet网络
2020/06/24 Python
资产评估专业学生的自我鉴定
2013/11/14 职场文书
《长相思》听课反思
2014/04/10 职场文书
大学社团计划书
2014/05/01 职场文书
构建和谐校园倡议书
2015/01/19 职场文书
写给父母的感谢信
2015/01/22 职场文书
党课主持词大全
2015/06/30 职场文书
2016小学新学期寄语
2015/12/04 职场文书
某药房的新员工入职告知书!
2019/07/15 职场文书
MySQL 表空间碎片的概念及相关问题解决
2021/05/07 MySQL
HTML+JS实现在线朗读器
2022/02/15 Javascript
Python 的演示平台支持 WSGI 接口的应用
2022/04/20 Python