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 相关文章推荐
Javascript调用C#代码
Jan 17 Javascript
如何确保JavaScript的执行顺序 之jQuery.html并非万能钥匙
Mar 03 Javascript
JS/Jquery判断对象为空的方法
Jun 11 Javascript
JS自动倒计时30秒后按钮才可用(两种场景)
Aug 31 Javascript
WordPress中利用AJAX技术进行评论提交的实现示例
Jan 12 Javascript
AngularJS操作键值对象类似java的hashmap(填坑小结)
Nov 12 Javascript
JavaScript实现垂直向上无缝滚动特效代码
Nov 23 Javascript
jQuery阻止移动端遮罩层后页面滚动
Mar 15 Javascript
vue-quill-editor实现图片上传功能
Aug 08 Javascript
vue-router中的hash和history两种模式的区别
Jul 17 Javascript
vue2.0中set添加属性后视图不能更新的解决办法
Feb 22 Javascript
node中实现删除目录的几种方法
Jun 24 Javascript
小程序实现筛子抽奖
详解vue身份认证管理和租户管理
ES6 解构赋值的原理及运用
vue点击弹窗自动触发点击事件的解决办法(模拟场景)
js Proxy的原理详解
May 25 #Javascript
解析原生JS getComputedStyle
80行代码写一个Webpack插件并发布到npm
You might like
PHP程序员最常犯的11个MySQL错误小结
2010/11/20 PHP
PHP中如何定义和使用常量
2013/02/28 PHP
在云虚拟主机部署thinkphp5项目的步骤详解
2017/12/21 PHP
Nigma vs AM BO3 第二场2.13
2021/03/10 DOTA
JQuery 无废话系列教程(二) jquery实战篇上
2009/06/23 Javascript
JavaScript类和继承 constructor属性
2010/03/04 Javascript
理解Javascript_15_作用域分配与变量访问规则,再送个闭包
2010/10/20 Javascript
关于jQuery object and DOM element
2013/04/15 Javascript
jquery的ajaxSubmit()异步上传图片并保存表单数据演示代码
2013/06/04 Javascript
JavaScript中创建对象和继承示例解读
2014/02/12 Javascript
jquery等待效果示例
2014/05/01 Javascript
node.js中的fs.unlink方法使用说明
2014/12/15 Javascript
浅述Javascript的外部对象
2016/12/07 Javascript
Bootstrap 3 按钮标签实例代码
2017/02/21 Javascript
详解vue组件化开发-vuex状态管理库
2017/04/10 Javascript
vuex 使用文档小结篇
2018/01/11 Javascript
JS动画定时器知识总结
2018/03/23 Javascript
浅析Vue.js中v-bind v-model的使用和区别
2018/12/04 Javascript
浅谈vuex中store的命名空间
2019/11/08 Javascript
ES6中的Javascript解构的实现
2020/10/30 Javascript
列举Python中吸引人的一些特性
2015/04/09 Python
Python学习思维导图(必看篇)
2017/06/26 Python
对python的文件内注释 help注释方法
2018/05/23 Python
解决Django migrate No changes detected 不能创建表的问题
2018/05/27 Python
python创建文件备份的脚本
2018/09/11 Python
python绘制已知点的坐标的直线实例
2019/07/04 Python
纯css3实现的动画按钮的实例教程
2014/11/17 HTML / CSS
Michael Kors美国官网:美式奢侈生活风格的代表
2016/11/25 全球购物
德国电子产品购物网站:TechInTheBasket德国
2018/12/07 全球购物
Nisbets法国:英国最大的厨房和餐饮设备供应商
2019/03/18 全球购物
数百万免费的图形资源:Freepik
2020/09/21 全球购物
生产主管岗位职责
2013/11/10 职场文书
招标承诺书
2014/08/30 职场文书
CSS3 实现NES游戏机的示例代码
2021/04/21 HTML / CSS
pandas中关于apply+lambda的应用
2022/02/28 Python
CentOS7环境下MySQL8常用命令小结
2022/06/10 Servers