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


<html>
<body>
  <script>

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

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

  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
Qt是一个跨平台的C++应用程序开发框架,而QMLQt中的一种声明式语言,用于构建用户界面。QML可以与Qt进行数据交互,具体的方法如下。 首先,我们需要在Qt中定义C++类型的变量或者对象,并将其暴露给QML使用。这可以通过使用QObject的派生类来实现,将类对象注册到QML引擎中。 其次,在QML中,我们可以引用这些已经注册的C++对象或者变量,从而与之进行数据交互。可以使用信号和槽机制来实现数据的传递和处理。 比如,假设我们在Qt中定义了一个名为MyData的类,该类有一个属性message,我们可以将其暴露给QML使用: ```cpp class MyData : public QObject { Q_OBJECT Q_PROPERTY(QString message READ message WRITE setMessage NOTIFY messageChanged) public: QString message() const; void setMessage(const QString& msg); signals: void messageChanged(); }; ``` 然后,在Qt中,我们将这个类对象注册到QML引擎中: ```cpp qmlRegisterType<MyData>("com.example", 1, 0, "MyData"); ``` 接下来,我们可以在QML中使用这个已经注册的C++对象: ```qml import com.example 1.0 MyData { id: myObject message: "Hello World" } Text { text: myObject.message } ``` 这样,我们就可以在QML中使用myObject对象的属性message,并将其显示在Text组件上。当myObject对象的属性发生改变时,Text组件也会相应地更新。 另外,我们还可以在QML中发射C++对象的信号,然后在Qt中捕获这些信号,进行相应的处理。 总之,QMLQt数据交互主要通过在Qt中注册C++对象,并在QML中引用这些对象来实现。这样,我们可以方便地在QML中使用Qt提供的各种功能,并实现复杂的交互逻辑。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值