QML WebEngine Qt端与Web端数据交互

Leyeeeee

已于 2022-08-03 18:24:22 修改

阅读量816

点赞数

文章标签：前端 qt 交互

于 2022-07-21 15:06:22 首次发布

本文链接：https://blog.csdn.net/qq_38159549/article/details/125912389

版权

Qt Demo保存专栏收录该内容

1 篇文章 0 订阅

订阅专栏

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代码：


<html>
<body>
  <script>

    function qmlToWebData(event) {
      // 接收QML端发来的数据
      alert(event)
    }

    function getFromWebData() {
      return "Test"
    }
  </script>
</body>
</html>