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实现倒计时(距离结束还有)示例代码
Jul 24 Javascript
jquery使用$(element).is()来判断获取的tagName
Aug 24 Javascript
angular中使用路由和$location切换视图
Jan 23 Javascript
jQuery使用removeClass方法删除元素指定Class的方法
Mar 26 Javascript
易被忽视的js事件问题总结
May 14 Javascript
JS表格组件神器bootstrap table详解(强化版)
May 26 Javascript
Bootstrap输入框组件使用详解
Jun 09 Javascript
移动设备手势事件库Touch.js使用详解
Aug 18 Javascript
深入解析ES6中的promise
Nov 08 Javascript
JavaScript中BOM对象原理与用法分析
Jul 09 Javascript
三步实现ionic3点击退出app程序
Sep 17 Javascript
使用vue引入maptalks地图及聚合效果的实现
Aug 10 Javascript
小程序实现筛子抽奖
详解vue身份认证管理和租户管理
ES6 解构赋值的原理及运用
vue点击弹窗自动触发点击事件的解决办法(模拟场景)
js Proxy的原理详解
May 25 #Javascript
解析原生JS getComputedStyle
80行代码写一个Webpack插件并发布到npm
You might like
解析PHP中的正则表达式以及模式匹配
2013/06/19 PHP
codeigniter集成ucenter1.6双向通信的解决办法
2014/06/12 PHP
php新浪微博登录接口用法实例
2014/12/23 PHP
简单介绍win7下搭建apache+php+mysql开发环境
2015/08/06 PHP
PHP针对多用户实现更换头像功能
2016/09/04 PHP
php使用curl代理实现抓取数据的方法
2017/02/03 PHP
php实现批量上传数据到数据库(.csv格式)的案例
2017/06/18 PHP
laravel如何开启跨域功能示例详解
2017/08/31 PHP
jQuery开发者都需要知道的5个小技巧
2010/01/08 Javascript
jquery学习笔记 用jquery实现无刷新登录
2011/08/08 Javascript
js获取或设置当前窗口url参数的小例子
2013/10/14 Javascript
Json和Jsonp理论实例代码详解
2013/11/15 Javascript
jquery制作居中遮罩层效果分享
2014/02/21 Javascript
js监控IE火狐浏览器关闭、刷新、回退、前进事件
2014/07/23 Javascript
jQuery.parseJSON(json)将JSON字符串转换成js对象
2014/07/27 Javascript
javascript使用正则获取url上的某个参数
2014/09/04 Javascript
详解Bootstrap的aria-label和aria-labelledby应用
2016/01/04 Javascript
微信js-sdk预览图片接口及从拍照或手机相册中选图接口用法示例
2016/10/13 Javascript
常见的浏览器Hack技巧整理
2017/06/29 Javascript
vue递归获取父元素的元素实例
2020/08/07 Javascript
JS将指定的某个字符全部转换为其他字符实例代码
2020/10/13 Javascript
js用正则表达式筛选年月日的实例方法
2021/01/04 Javascript
在Python中使用Mako模版库的简单教程
2015/04/08 Python
详解Python循环作用域与闭包
2019/03/21 Python
python中yield的用法详解——最简单,最清晰的解释
2019/04/04 Python
Python如何实现动态数组
2019/11/02 Python
ESDlife健康生活易:身体检查预订、搜寻及比较
2019/05/10 全球购物
最新远光软件笔试题面试题内容
2013/11/08 面试题
高级护理实习生自荐信
2013/09/28 职场文书
运动会入场词200字
2014/02/15 职场文书
2014年客房服务员工作总结
2014/11/18 职场文书
内勤岗位职责
2015/02/10 职场文书
2019财务毕业实习报告
2019/06/27 职场文书
MySQL数据库必备之条件查询语句
2021/10/15 MySQL
豆瓣2021评分最高动画剧集-豆瓣评分最高的动画剧集2021
2022/03/18 日漫
Nginx实现会话保持的两种方式
2022/03/18 Servers