QTとJavaScript間のインタラクティブデータの実装

1. QTからJSへのデータフロー
1. QTはJS関数を呼び出し、JSはパラメータを通じてQTの値を取得します。
2. JSがQTの関数を呼び出し、QT関数の戻り値がJSに入る
2. 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 は基本型の文字列を受け取り、この文字列は 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: 配列を文字列として直接書き込む
// QString cmd = QString("qtPara([13,14,15])");
 
    //js 関数を実行します webView->page()->runJavaScript(cmd);

上記のコードによって呼び出される JavaScript 関数は次のとおりです。

 関数 qtPara(numList)
 { 
  alert("js alert: " + numList); //qt によって送信された配列全体を表示します alert("js alert[0]: " + numList[0]); //qt によって送信された配列の 0 番目の要素を表示します }

2. JSは配列をQTに渡す

JSがQTに配列を渡すと、QTはこの値をQJsonArrayに変換します。

JSは任意のJSオブジェクトをQTに渡すこともできるので、QTはそれをQJsonObjectに変換する必要がある。

QT終了サンプルコード:

    QString cmd = QString("jsString()");
 
    webView->page()->runJavaScript(cmd, [](const QVariant &v)
    {
        //ケース 1: js が数値を返す場合 qDebug() << "qt call js = " << v.toDouble();
        //ケース 2: js が文字列値を返す場合 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配列
 // var jObj = {"num":[120.123456789, 22, 33, 44], "name":"Tom"}; //json
var jNum = 120.1234567;
 関数 jsString()
 {
   アラート("jsString");
   //jNum を返します。
   //jArr を返します。
   //jObj を返します。
 }

3. JSはあらゆるタイプのデータをQTに渡す

QT側はQVariant型でそれを受け取り、この値をqDebugすると、このJS値がQVariantとしてカプセル化されていることがわかります。

たとえば、JS は QT に次のような値を返します。これは JS オブジェクトの配列で、各要素は Point オブジェクトであり、この Point オブジェクトには lng 属性値と lat 属性値があります。

パス = [新しいポイント(116.387112,39.920977), 新しいポイント(116.387112,39.920977)];

QT はこれを受信すると、次のように qDebugs を実行します。

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>です。

② このリストの各メンバーはQTによってQVariantMapにカプセル化されます。つまり、QMap<QString, QVariant>

③ 各マップのキーはQString、値はQVariant、このQVariantはdoubleです。

上記の分析手順を実行すると、JS から QT に送信されたデータを簡単に解析できます。

QT と JavaScript 間のインタラクティブデータの実装に関するこの記事はこれで終わりです。QT と JavaScript のインタラクションに関する関連コンテンツをさらにご覧になりたい場合は、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続きご覧ください。今後も 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません: