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代码
Jan 28 Javascript
JQuery一种取同级值的方式(比如你在GridView中)
Mar 15 Javascript
jquery click([data],fn)使用方法实例介绍
Jul 08 Javascript
Jquery增加鼠标中间功能mousewheel的实例代码
Sep 05 Javascript
JS实现遮罩层效果的简单实例
Nov 12 Javascript
JavaScript实现删除,移动和复制文件的方法
Aug 05 Javascript
js实现带农历和八字等信息的日历特效
May 16 Javascript
bootstrap modal弹出框的垂直居中
Dec 14 Javascript
深入对Vue.js $watch方法的理解
Mar 20 Javascript
详解Vue 普通对象数据更新与 file 对象数据更新
Apr 26 Javascript
Vue.js 中的实用工具方法【推荐】
Jul 04 Javascript
layui数据表格实现重载数据表格功能(搜索功能)
Jul 27 Javascript
小程序实现筛子抽奖
详解vue身份认证管理和租户管理
ES6 解构赋值的原理及运用
vue点击弹窗自动触发点击事件的解决办法(模拟场景)
js Proxy的原理详解
May 25 #Javascript
解析原生JS getComputedStyle
80行代码写一个Webpack插件并发布到npm
You might like
分享常见的几种页面静态化的方法
2015/01/08 PHP
php和editplus正则表达式去除空白行
2015/04/17 PHP
php eval函数一句话木马代码
2015/05/21 PHP
Zend Framework上传文件重命名的实现方法
2016/11/25 PHP
jQuery当鼠标悬停时放大图片的效果实例
2013/07/03 Javascript
JS两种定义方式的区别、内部原理
2013/11/21 Javascript
jquery实现多屏多图焦点图切换特效的方法
2015/05/04 Javascript
jquery实现的V字形显示效果代码
2015/10/27 Javascript
使用vue.js开发时一些注意事项
2016/04/27 Javascript
IScroll5 中文API参数说明和调用方法
2016/05/21 Javascript
浅谈js键盘事件全面控制
2016/12/01 Javascript
详解微信小程序 wx.uploadFile 的编码坑
2017/01/23 Javascript
详解nodejs异步I/O和事件循环
2017/06/07 NodeJs
微信小程序学习笔记之目录结构、基本配置图文详解
2019/03/28 Javascript
在SSM框架下用laypage和ajax实现分页和数据交互的方法
2019/09/27 Javascript
vue.js实现二级菜单效果
2019/10/19 Javascript
浅谈Vue组件单元测试究竟测试什么
2020/02/05 Javascript
koa2的中间件功能及应用示例
2020/03/05 Javascript
vue中使用v-for时为什么不能用index作为key
2020/04/04 Javascript
Javascript文本框脚本实现方法解析
2020/10/30 Javascript
[50:24]VGJ.S vs Pain 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/20 DOTA
Python实现删除当前目录下除当前脚本以外的文件和文件夹实例
2015/07/27 Python
基于python中staticmethod和classmethod的区别(详解)
2017/10/24 Python
对Python random模块打乱数组顺序的实例讲解
2018/11/08 Python
使用python对文件中的单词进行提取的方法示例
2018/12/21 Python
django-rest-swagger对API接口注释的方法
2019/08/29 Python
Python控制台输出时刷新当前行内容而不是输出新行的实现
2020/02/21 Python
serialVersionUID具有什么样的特征
2014/02/20 面试题
可以使用抽象函数重写基类中的虚函数吗
2013/06/02 面试题
幼儿园园长自我鉴定
2013/10/22 职场文书
实习单位接收函
2014/01/11 职场文书
乡镇平安建设汇报材料
2014/08/25 职场文书
要账委托书范本
2014/09/15 职场文书
2015年美容师个人工作总结
2015/10/14 职场文书
开发一个封装iframe的vue组件
2021/03/29 Vue.js
「女孩的钓鱼慢活」全新版权绘公布
2022/03/21 日漫