Qt+QML+Html的开发模式.

爱被打了一巴掌 2023-05-21 06:00 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>