QT与JavaScript交互数据实战：从QT到JS与反向流动

本文档详细介绍了如何在JavaScript与Qt之间实现数据交互，涵盖了数据从Qt流向JavaScript以及从JavaScript流向Qt的两种情况，并提供了具体的代码示例。 在Qt与JavaScript的交互过程中，数据传递主要涉及基本类型如int、bool、string、double等。对于数组的传递，需要将Qt中的数组转换为QJsonArray，进一步转化为QString，以便JavaScript能够识别为标准的JS数组。以下是一些关键点的解释： 1. 数据从Qt到JavaScript的传递： - 方式1：Qt可以通过调用JavaScript的函数并传入参数来传递数据。例如，创建QJsonArray，然后将其转换为字符串，通过`runJavaScript`方法执行JS函数。 ```cpp QJsonArray ja; ja << 3 << 4 << 5; QString jpar = QString(QJsonDocument(ja).toJson()); QString cmd = QString("qtPara(%0)").arg(jpar); webView->page()->runJavaScript(cmd); ``` 在JavaScript端，可以定义一个接受字符串参数的函数，解析这个字符串并处理数据。 ```javascript function qtPara(numList) { alert("jsalert:" + numList); // 显示qt传来的整个数组 alert("jsalert[0]:" + numList[0]); // 显示qt传来数组第0个元素 } ``` 2. 数据从JavaScript到Qt的传递： - 方式1：JavaScript可以调用Qt暴露的函数，并通过函数参数传递数据。例如，JS可以返回一个值，Qt接收到后进行相应的类型转换。 ```cpp webView->page()->runJavaScript("jsString()", [](const QVariant& v) { if (v.type() == QVariant::Double) { qDebug() << "qtcalljs=" << v.toDouble(); // 当js返回数字时 } else if (v.type() == QVariant::String) { qDebug() << "qtcalljs" << v.toString(); // 当js返回字符串时 } }); ``` 在JavaScript端，定义一个返回特定类型值的函数，如返回字符串或数字。 ```javascript function jsString() { return "js返回的字符串"; } ``` 3. 对于更复杂的类型，如JS对象，可以通过QJsonObject进行转换。JS对象传递到Qt时，可以将其转换为JSON字符串，Qt再解析为QJsonObject。 通过这种方式，Qt和JavaScript可以实现双向的数据交换，支持多种数据类型的传递，包括基本类型、数组以及更复杂的对象结构。这种交互机制使得在Qt应用中嵌入JavaScript代码变得更加灵活，便于实现丰富的用户界面和动态功能。