Implementation of interactive data between QT and javascript

1. Data flows from QT to JS
1. QT calls the JS function, and JS obtains the value of QT through the parameter
2. JS calls QT's function, and the return value of the QT function enters JS
2. Data flows from JS to QT
1. JS calls QT's function, and QT obtains the value of JS through the formal parameter
2. QT calls the JS function, and the return value of the JS function enters QT

1. QT passes array to JS

Basic types can be passed directly, such as int, bool, string, double, etc.

When qt passes an array to js, ​​it is necessary to convert the array into QJsonArray, and then convert the QJsonArray into QString. In this way, js will receive a basic type string, and this string is directly a standard js array in js.

QT code example: Call a js function and pass an array as a parameter to the js function

    //Method 1: Construct QJsonArray and then convert it to QString
    QJsonArray ja;
    ja << 3 << 4 << 5;
    QString jpar = QString(QJsonDocument(ja).toJson());
    QString cmd = QString("qtPara(%0)").arg(QString(QJsonDocument(ja).toJson()));
    //Method 2: Write the array directly as a string
// QString cmd = QString("qtPara([13,14,15])");
 
    //Run js function webView->page()->runJavaScript(cmd);

The javascript function called by the above code is:

 function qtPara(numList)
 { 
  alert("js alert: " + numList); //Display the entire array sent by qt alert("js alert[0]: " + numList[0]); //Display the 0th element of the array sent by qt }

2. JS passes array to QT

If JS passes an array to QT, QT will convert this value into QJsonArray

JS can also pass any JS object to QT, so QT needs to convert it into QJsonObject

QT end sample code:

    QString cmd = QString("jsString()");
 
    webView->page()->runJavaScript(cmd, [](const QVariant &v)
    {
        //Case 1: When js returns a number qDebug() << "qt call js = " << v.toDouble();
        //Case 2: When js returns a string value qDebug() << "qt call js = " << v.toString();
        //Case 3: When js returns a js array QJsonArray ja = v.toJsonArray();
        qDebug() << "j[0] = " << ja.at(0).toDouble();
        //Case 4: When js returns a js object QJsonObject jo = v.toJsonObject();
        qDebug() << jo;
    });

The JS function called by the above code:

// 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 passes any type of data to QT

The QT side receives it with the QVariant type, and then qDebug this value, you can see how this JS value is encapsulated as a QVariant, and then we can

For example, JS returns a value like this to QT, which is an array of JS objects, each element of which is a Point object, and this Point object has lng and lat attribute values.

path = [new Point(116.387112,39.920977), new Point(116.387112,39.920977)];

After QT receives it, it qDebugs it as follows:

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))))))

We found that

① QT encapsulates the JS object array into QVariantList, that is, QList<QVariant>,

② Each member of this list is encapsulated by QT into a QVariantMap, that is, QMap<QString, QVariant>

③ The key in each map is QString, the value is QVariant, and this QVariant is double.

After the above analysis steps, we can easily parse out any data sent from JS to QT.

This is the end of this article about the implementation of interactive data between QT and javascript. For more relevant content about QT and javascript interaction, please search for previous articles on 123WORDPRESS.COM or continue to browse the following related articles. I hope you will support 123WORDPRESS.COM in the future!