Qt+QML+Html的开发模式.

最新推荐文章于 2024-05-17 05:58:46 发布

aseseven

最新推荐文章于 2024-05-17 05:58:46 发布

阅读量4.8k

点赞数 1

分类专栏： QT 文章标签： QT QML HTML5

本文链接：https://blog.csdn.net/aseseven/article/details/82973704

版权

QT 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

不多说,直接上代码.

1.QT.pro文件配置

QT += qml quick webengine

2.QML文件

import QtQuick 2.5
import QtQuick.Window 2.2
import QtWebEngine 1.4
import QtQuick.Controls 2.0
import QtWebSockets 1.1

Window {
    visible: true
    width: 1500
    height: 900
    title: qsTr("Hello World")

    WebEngineView {
        id: eCharts
        anchors.fill: parent
        url: "qrc:/index.html"
        Component.onCompleted: {

        }
    }

    //创建websocket服务对象.
    WebSocketServer {
        id: server
        port: 12335
        listen: true
        onClientConnected: {
            webSocket.onTextMessageReceived.connect(function(message) {
                console.log((qsTr("Server received message: %1").arg(message)));
                webSocket.sendTextMessage(qsTr("Hello html!"));
            });
        }
        onErrorStringChanged: {
            console.log(qsTr("Server error: %1").arg(errorString));
        }

    }

    Button{
        id:btFunc
        text: "PressMe"
        anchors.bottom:eCharts.bottom
        onClicked: {
            //调用html上面的方法sayHelloFromQML,回调函数接收返回值result
            eCharts.runJavaScript("window.sayHelloFromQML(\""+"Hello HTML"+"\")",
                                  function(result) {
                                      console.log(result);
                                  }
                    );
        }
    }

}

3.Html文件

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1 user-scalable=0">
    <title>Qt+QML+HTML</title>

</head>
<body>

    <button onClick="sendMsgToQML()">hello qml</button>

    <script type="text/javascript">
        if ("WebSocket" in window)
        {

        }else{
            alert("您的浏览器不支持 WebSocket!");
        }
        // 打开一个 web socket
        var ws = new WebSocket("ws://localhost:12335/echo");

        ws.onopen = function()
        {
           // Web Socket 已连接上，使用 send() 方法发送数据
           alert("websocket已连接...");
        };

        ws.onmessage = function (evt)
        {
           var received_msg = evt.data;
           alert("数据已接收..."+received_msg);
        };

        ws.onclose = function()
        {
           // 关闭 websocket
           alert("连接已关闭...");
        };

        //定义函数发送数据给QML
        function sendMsgToQML(){
            ws.send("Hello QML");
        }

        //定义函数给QML调用
        function sayHelloFromQML(msg){
            alert(msg)
            return "sayHelloToQML"
        }

    </script>
</body>
</html>

aseseven

关注

1
点赞
踩
11

收藏

觉得还不错? 一键收藏
0
评论
Qt+QML+Html的开发模式.

不多说,直接上代码.1.QT.pro文件配置QT += qml quick webengine2.QML文件import QtQuick 2.5import QtQuick.Window 2.2import QtWebEngine 1.4import QtQuick.Controls 2.0import QtWebSockets 1.1Window { vi...
复制链接

扫一扫