QT JS交互、调用JS、传值

这篇具有很好参考价值的文章主要介绍了QT JS交互、调用JS、传值。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

        本文详细的介绍了QT JS交互、调用JS、传值的各种操作,包括QT向JS传递String字符串、包括QT向JS传递Int数字、包括QT向JS传递List数组,同时也接收JS向QT返回的List数组、JS向QT返回的Json、JS向QT返回的数字、JS向QT返回的字符串。

QT JS交互、调用JS、传值

本文作者原创,未经允许禁止转载。

QT JS交互、调用JS、传值目录

1 setStr

2 setInt

3 setList

4 getArr

5 getObj

6 getNum

7 getStr

8 JS代码


报错 : js: Uncaught SyntaxError: missing ) after argument list

主要是传递字符串的问题例如:

    QString str = "hello word!";
    //错误写法
    strText = "QDataStr(" + str + ")";

    //正确写法。双引号内,若有字符串要使用引号时,应该使用单引号。
    //正确写法。单引号内,若有字符串要使用引号时,应该使用双引号。
    strText = "QDataStr('"+ str + "')";
    ui->widget->page()->runJavaScript(strText);

1 setStr

        QT给JS传String类型参数

    QString str = "hello word!";

    //正确写法。双引号内,若有字符串要使用引号时,应该使用单引号。
    //正确写法。单引号内,若有字符串要使用引号时,应该使用双引号。
    strText = "QDataStr('"+ str + "')";
    ui->widget->page()->runJavaScript(strText);

QT JS交互、调用JS、传值

2 setInt

        QT给JS传Int类型参数

    int a = 100;
    int b = 100;

    numInt << a << b;

    strText = QString("QDataInt(" + QString(QJsonDocument(numInt).toJson()) + ")");

    ui->widget->page()->runJavaScript(strText, [](const QVariant &v)
    {
        qDebug() << "QDataInt() = " << v.toInt();
    });

QT JS交互、调用JS、传值

3 setList

        QT给JS传List类型参数

    numList << 0 << 0 << 0 << 0 << 0 << 0 << 0 << 0 << 0 << 0 << 0 << 0 << 0 << 0 << 0 << 0 << 0 << 0 << 0 << 0 << 0 << 0 << 0 << 0 ;
    strText = QString("QDataList(" + QString(QJsonDocument(numList).toJson()) + ")");
    ui->widget->page()->runJavaScript(strText);

QT JS交互、调用JS、传值QT JS交互、调用JS、传值

4 getArr

        QT调用JS函数接收ArrayList类型返回值

    strText = "QReturnArr()";
    ui->widget->page()->runJavaScript(strText, [](const QVariant &v)
    {
        QJsonArray ja = v.toJsonArray();
        for (int i=0;i<ja.size();i++) {
            qDebug() << "QReturnArr["<< i <<"] = " << ja.at(i).toDouble();
        }
    });

QT JS交互、调用JS、传值

5 getObj

         QT调用JS函数接收Json类型返回值

    strText = "QReturnObj()";
    ui->widget->page()->runJavaScript(strText, [](const QVariant &v)
    {
        QJsonObject jo = v.toJsonObject();
        qDebug() << "QReturnObj = " << jo;
    });

QT JS交互、调用JS、传值

6 getNum

         QT调用JS函数接收Double类型返回值

    strText = "QReturnNum()";
    ui->widget->page()->runJavaScript(strText, [](const QVariant &v)
    {
        qDebug() << "QReturnNum = " << v.toDouble();
    });

QT JS交互、调用JS、传值

7 getStr

         QT调用JS函数接收QString类型返回值

    strText = "QReturnStr()";
    ui->widget->page()->runJavaScript(strText, [](const QVariant &v)
    {
        qDebug() << "QReturnStr = " << v.toString();
    });

QT JS交互、调用JS、传值文章来源地址https://www.toymoban.com/news/detail-449192.html

8 JS代码

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>qjs</title>

  </head>
  <body>
    <div id="main" "></div>
    <script type="text/javascript">

	
		var numList;

		
		var jsArr = [180.123456789, 22, 33, 44];//js array
		var jsObj = {"num":[100.123456789, 22, 33, 44], "name":"Tom"};//json
		var jsNum = 10.1234567;
		var jsString = "hello word!";


		function QDataStr(numStr)
		{
			alert("js alert:" + numStr);
		}
		
		function QDataInt(numInt)
		{
			return numInt[0] + numInt[1];
		}
		
		function QDataList(numList)
		{
			alert("js alert[0]: numList" );//显示qt传来数组第0个元素
			alert(numList);//显示qt传来所有数组
		}
		

		function QReturnArr() {
			return jsArr;
		}
		
		function QReturnObj() {
			return jsObj;
		}
		
		function QReturnNum() {
			return jsNum;
		}
		
		function QReturnStr() {
			return jsString;
		}
    </script>
  </body>
</html>

到了这里,关于QT JS交互、调用JS、传值的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • Qt QWebSocket实现JS调用C++

    本篇主要介绍实现JS调用C++的另一种方式,即QWebSocket+QWebChannel。与之前的一篇文章QWebEngine 加载网页及交互,实现C++与JS 相互调用中提到的仅通过QWebChannel 实现JS调C++相比,本文介绍的这种方式,更灵活,能实现更加复杂的业务功能。 这篇文章中提到的QWebChannel实现JS调用C++,

    2024年01月16日
    浏览(40)
  • 你知道C语言函数调用的2种方式吗?传值调用 && 传址调用

    本篇博客会讲解C语言函数调用的2种方式,分别是:传值调用和传址调用。这2种函数调用方式有什么区别呢?为什么会有不同的效果呢?分别有哪些用途呢?下面我会一一展开。 传值调用,即通过传递变量的值来调用函数。 传址调用,即通过传递变量的地址来调用函数。 比

    2023年04月27日
    浏览(52)
  • PHP表单传值和文件上传:深入解析数据交互与文件处理技术

    目录 表单传值 为什么要表单传值? 表单传值的方式 GET传值 POST传值 GET和POST两种传参方式的不同: PHP接受数据的三种方式 PHP处理复选框数据 复选框表单的命名方式 复选框数据的接受形式 复选框数据的常见处理 复选框细节: 文件上传 原理 表单写法 $_FILES变量详解 移动临

    2024年02月12日
    浏览(91)
  • Qt+QtWebApp开发笔记(六):http服务器html实现静态相对路径调用第三方js文件

    若该文为原创文章,转载请注明原文出处 本文章博客地址:https://hpzwl.blog.csdn.net/article/details/131244269 红胖子网络科技博文大全:开发技术集合(包含Qt实用技术、树莓派、三维、OpenCV、OpenGL、ffmpeg、OSG、单片机、软硬结合等等)持续更新中… 上一篇:《Qt+QtWebApp开发笔记(五

    2024年02月13日
    浏览(58)
  • 微信小程序路由跳转,API调用,页面传值

    wx.switchTab 跳转到 tabBar 页面,并关闭其他所有非 tabBar 页面。 wx.reLaunch 关闭所有页面,打开到应用内的某个页面。 wx.redirectTo 关闭当前页面,跳转到应用内的某个页面。但是不能跳转到 tabbar 页面。 wx.navigateTo 保留当前页面,跳转到应用内的某个页面。但是不能跳到 tabbar 页面

    2024年02月12日
    浏览(45)
  • uniapp:引用百度地图,创建地面图片叠加层及html页面向uniapp页面传值交互

    1.第一步,创建html页面,引用百度地图,创建地面图片叠加层 根据官方指示,创建html页面位置 在html页面里引用uni.webview.1.5.4文件 在html页面里创建地面图片叠加层: var map = new BMapGL.Map(\\\'container\\\');     map.centerAndZoom(new BMapGL.Point(105.753869, 34.571069), 18);     map.enableScrollWheelZoo

    2024年02月09日
    浏览(39)
  • 前端vue中父子组件之间的传值(修改值)和事件的相互调用

    目录 父组件向子组件传值 子组件修改父组件中的值: 方法1 方法2 子组件调用父组件里的函数 方法1 方法2 父组件调用子组件的函数 : 子组件中的 data 属性是用来存储子组件自身的数据,而不是用来接收父组件传递的数据的。父组件向子组件传递数据的常用方式是通过 pro

    2024年02月07日
    浏览(57)
  • Qt子窗口给父窗口传值(信号与槽机制)

    1、父窗口和子窗口名称介绍 父窗口:Test_7 子窗口:testnew 2、父窗口与子窗口内容介绍 子窗口:声明信号、发送信号 父窗口:声明槽函数,定义槽函数,connect连接 3、在父窗口中(Test_7.cpp),完整代码如下: 4、父窗口中(Test_7.h),完整代码如下:  5、子窗口(testnew.cp

    2024年02月11日
    浏览(40)
  • 项目中使用iframe引入html 解决路由错乱问题以及父子组件传值调用方法

    父组件 子组件: 方法一、通过子组件iframe1向父组件传值,再通过父组件向子组件iframe2传值可达到目的; 注意:模拟时 需要开启服务器,否则会出现跨域问题! 看图你应该就明白了 在项目中使用iframe引入html,引入的html中有路由跳转,当点击html页面中的路由跳转时,浏览器

    2024年02月01日
    浏览(49)
  • 【colab】谷歌colab免费服务器训练自己的模型,本文以yolov5为例介绍流程

    目录 一.前言 二.准备工作 1.注册Google drive(谷歌云盘) Google Driver官网:https://drive.google.com/drive/ Colab官网:https://colab.research.google.com/ 2.上传项目文件 3.安装Colaboratory 4.colab相关操作和命令 5.项目相关操作  三.异常处理         本文介绍了在谷歌开放平台Google colab上租用免

    2023年04月08日
    浏览(53)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包