QML WebEngine Qt端与Web端数据交互

QML代码:

import QtQuick              2.15
import QtQuick.Window       2.15
import QtWebEngine          1.5
import QtQuick.Controls     1.4

Window {
    width: 640
    height: 480
    visible: true
    title: qsTr("Hello World")

    property var    _ListArr: [1, 2, 3]
    property var    _jsonStr

    property var testData: {
        "Heading": 90,
        "id": 207,
        "x": _x,
        "y": _y,
        "z": 0
    }

    Timer {
         interval: 500; running: true; repeat: true
         onTriggered: {
            // 将对象转为json对象字符串 
            // 在Web端可识别json对象中的 id/x/y等数据
            var jsonStr = JSON.stringify(testData)
            console.log(jsonStr)

            var func = "onInfoDataChanged(" + jsonStr + ")"
            webView.runJavaScript(func)

            _x++
            _y++
         }
     }

    Component.onCompleted: {
        // 将js数组转为字符串
        _jsonStr = JSON.stringify(_ListArr)
    }

    WebEngineView {
        id:     webView
        url:    "http://localhost/QmlSendtoWebJsonData.html"
        anchors.fill: parent
    }

    Row {
        anchors.centerIn: parent
        spacing: 10

        Button {
            text:   "QML to Web"

            onClicked: {
                var func = "qmlToWebData(" + _ListArr + ")"
                webView.runJavaScript(func)
            }
        }

        Button {
            text:   "Get from Web"

            onClicked: {
                var func = "getFromWebData()"
                webView.runJavaScript(func, function(result) {
                    console.log("result:", result)
                })
            }
        }
    }
}

Html代码:




  

你可能感兴趣的:(前端,qt,交互)