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中的数学函数集合
May 08 Javascript
js设置cookie过期及清除浏览器对应名称的cookie
Oct 24 Javascript
js对文章内容进行分页示例代码
Mar 05 Javascript
详解jQuery UI库中文本输入自动补全功能的用法
Apr 23 Javascript
js获取form表单所有数据的简单方法
Aug 18 Javascript
原生js实现ajax方法(超简单)
Sep 20 Javascript
详解vue2.0 使用动态组件实现 Tab 标签页切换效果(vue-cli)
Aug 30 Javascript
JS实现不用中间变量temp 实现两个变量值得交换方法
Feb 04 Javascript
Vue+webpack项目配置便于维护的目录结构教程详解
Oct 14 Javascript
layui对工具条进行选择性的显示方法
Sep 19 Javascript
微信小程序如何通过用户授权获取手机号(getPhoneNumber)
Jan 21 Javascript
vue如何实现动态加载脚本
Feb 05 Javascript
小程序实现筛子抽奖
详解vue身份认证管理和租户管理
ES6 解构赋值的原理及运用
vue点击弹窗自动触发点击事件的解决办法(模拟场景)
js Proxy的原理详解
May 25 #Javascript
解析原生JS getComputedStyle
80行代码写一个Webpack插件并发布到npm
You might like
PHP 中的批处理的实现
2007/06/14 PHP
php验证码的制作思路和实现方法
2015/11/12 PHP
yii2使用GridView实现数据全选及批量删除按钮示例
2017/03/01 PHP
php+js实现的拖动滑块验证码验证表单操作示例【附源码下载】
2020/05/27 PHP
CL vs ForZe BO5 第四场 2.13
2021/03/10 DOTA
Jquery Ajax 学习实例2 向页面发出请求 返回JSon格式数据
2010/03/15 Javascript
js控制web打印(局部打印)方法整理
2013/05/29 Javascript
ubuntu下安装nodejs以及升级的办法
2015/05/08 NodeJs
基于canvas实现的绚丽圆圈效果完整实例
2016/01/26 Javascript
jQuery+css实现的tab切换标签(兼容各浏览器)
2016/01/28 Javascript
JQuery的Pager分页器实现代码
2016/05/03 Javascript
codeMirror插件使用讲解
2017/01/16 Javascript
JS实现点击表头表格自动排序(含数字、字符串、日期)
2017/01/22 Javascript
JavaScript纯色二维码变成彩色二维码
2020/07/23 Javascript
关于javascript作用域的常见面试题分享
2017/06/18 Javascript
微信小程序时间戳转日期的详解
2019/04/30 Javascript
vue excel上传预览和table内容下载到excel文件中
2019/12/10 Javascript
Vue使用JSEncrypt实现rsa加密及挂载方法
2020/02/07 Javascript
Node.js API详解之 net模块实例分析
2020/05/18 Javascript
vue项目中播放rtmp视频文件流的方法
2020/09/17 Javascript
[04:41]2014DOTA2国际邀请赛 Liquid顺利突围晋级正赛
2014/07/09 DOTA
基于Python对数据shape的常见操作详解
2018/12/25 Python
Python判断变量名是否合法的方法示例
2019/01/28 Python
基于django ManyToMany 使用的注意事项详解
2019/08/09 Python
python 读取更新中的log 或其它文本方式
2019/12/24 Python
Python根据字典的值查询出对应的键的方法
2020/09/30 Python
python爬取youtube视频的示例代码
2021/03/03 Python
HTML5实现简单图片上传所遇到的问题及解决办法
2016/01/20 HTML / CSS
医药类个人求职的自我评价
2014/02/12 职场文书
我读书我快乐演讲稿
2014/05/07 职场文书
经济管理专业求职信
2014/06/09 职场文书
2014年工作总结与下年工作计划
2014/11/27 职场文书
2015中秋节晚会开场白
2015/07/30 职场文书
Python实现随机生成迷宫并自动寻路
2021/06/13 Python
IDEA2021.2配置docker如何将springboot项目打成镜像一键发布部署
2021/09/25 Java/Android
Minikube搭建Kubernetes集群
2022/03/31 Servers