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 相关文章推荐
如何让div span等元素能响应键盘事件操作指南
Nov 13 Javascript
JavaScript和JQuery的鼠标mouse事件冒泡处理
Jun 19 Javascript
javascript简单实现滑动菜单效果的方法
Jul 27 Javascript
浅析JS动态创建元素【两种方法】
Apr 20 Javascript
从零开始学习Node.js系列教程四:多页面实现数学运算的client端和server端示例
Apr 13 Javascript
koa上传excel文件并解析的实现方法
Aug 09 Javascript
JavaScript类的继承操作实例总结
Dec 20 Javascript
在vue中封装的弹窗组件使用队列模式实现方法
Jul 23 Javascript
JavaScript检测是否开启了控制台(F12调试工具)
Oct 02 Javascript
在vue中使用vant TreeSelect分类选择组件操作
Nov 02 Javascript
Vue 的 v-model用法实例
Nov 23 Vue.js
Vue过滤器,生命周期函数和vue-resource简单介绍
Jan 12 Vue.js
小程序实现筛子抽奖
详解vue身份认证管理和租户管理
ES6 解构赋值的原理及运用
vue点击弹窗自动触发点击事件的解决办法(模拟场景)
js Proxy的原理详解
May 25 #Javascript
解析原生JS getComputedStyle
80行代码写一个Webpack插件并发布到npm
You might like
php的正则处理函数总结分析
2008/06/20 PHP
PHP 解决utf-8和gb2312编码转换问题
2010/03/18 PHP
微信支付开发发货通知实例
2016/07/12 PHP
利用php操作memcache缓存的基础方法示例
2017/08/02 PHP
PHP面向对象五大原则之依赖倒置原则(DIP)详解
2018/04/08 PHP
JS类定义原型方法的两种实现的区别评论很多
2007/09/12 Javascript
JQuery 选择器 xpath 语法应用
2010/05/13 Javascript
jQuery实战之仿淘宝商城左侧导航效果
2011/04/12 Javascript
Javascript面向对象设计一 工厂模式
2011/12/20 Javascript
图片无缝滚动代码(向左/向下/向上)
2013/04/10 Javascript
javascript算法题:求任意一个1-9位不重复的N位数在该组合中的大小排列序号
2015/04/01 Javascript
javascript最基本的函数汇总
2015/06/25 Javascript
jQuery的选择器中的通配符[id^='code']或[name^='code']及jquery选择器总结
2015/12/24 Javascript
JavaScript实现简单的拖动效果
2016/07/02 Javascript
折叠菜单及选择器的运用
2017/02/03 Javascript
对称加密与非对称加密优缺点详解
2017/02/06 Javascript
详解Web使用webpack构建前端项目
2017/09/23 Javascript
小程序页面动态配置实现方法
2019/02/05 Javascript
Vue使用自定义指令实现拖拽行为实例分析
2020/06/06 Javascript
[01:12:08]LGD vs OG 2019国际邀请赛淘汰赛 胜者组 BO3 第一场 8.24
2019/09/10 DOTA
在Python程序中进行文件读取和写入操作的教程
2015/04/28 Python
Python从MP3文件获取id3的方法
2015/06/15 Python
idea创建springMVC框架和配置小文件的教程图解
2018/09/18 Python
pycharm使用matplotlib.pyplot不显示图形的解决方法
2018/10/28 Python
python Web flask 视图内容和模板实现代码
2019/08/23 Python
Python json格式化打印实现过程解析
2020/07/21 Python
局域网定义和特性
2016/01/23 面试题
提高EJB性能都有哪些技巧
2012/03/25 面试题
自我鉴定模板
2013/10/29 职场文书
领导干部培训感言
2014/01/23 职场文书
护理专科毕业生自荐书范文
2014/02/19 职场文书
热门专业求职信
2014/05/24 职场文书
销售经理工作检讨书
2015/02/19 职场文书
2016年国庆节假期旅游工作总结
2016/04/01 职场文书
靠谱准确的求职信
2019/04/02 职场文书
golang协程池模拟实现群发邮件功能
2021/05/02 Golang