一、資料從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()->run
 
javascript(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,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",116.387)))),QVariant(QVariantMap,39程式設計客棧.921))("lng",QVariant(www.cppcns.comdouble,116.387))))))

我們發現，

① QT把JS的物件陣列，封裝成了QVariantList， 也即QList<QVariant>，

② 這個list的每個成員又都被QT封裝成了QVariantMap， 也即QMap<QString,QVariant>

③ 每個map中的key都是QString，value都是QVariant，且這個QVariant是double。

經過上述分析步驟，我們就可輕易地解析出JS向QT傳來的任意資料了。

到此這篇關於QTeQcoMNtv與javascriptwww.cppcns.com互動資料的實現的文章就介紹到這了,更多相關QT與javascript互動 內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！