Qml内嵌网页

# Qml内嵌网页

有些HTML原生的应用可利用Qt自带的QtWebView或QtWebEngine直接嵌入到桌面应用中，比如地图应用，不追求性能的情况下将现有的web应用直接嵌入到应用中是非常方便的。这里我将地图网页应用Cesium（3D地图引擎）嵌入到了Qml里面。

虽说方便，但也要解决嵌入和通信这两个问题，这里先解决嵌入web，交互准备采用 websocket，这个下节再说。

开发环境：

python3.6.8

PyQt5==5.15.4

PyQtWebEngine==5.15.5

入口函数：

import sys
from PyQt5.QtCore import QUrl
from PyQt5.QtGui import QGuiApplication
from PyQt5.QtQuick import QQuickView
from PyQt5.QtWebEngine import QtWebEngine

if __name__ == '__main__':
    QtWebEngine.initialize()
    app = QGuiApplication(sys.argv)

    view = QQuickView()
    view.setSource(QUrl.fromLocalFile('main.qml'))  # 替换为你的QML文件路径

    view.show()

    sys.exit(app.exec_())

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

Qml代码：

import QtQuick 2.15
import QtWebView 1.1
import QtWebEngine 1.8

Item {
    width: 800
    height: 600

    WebEngineView {
        id: webView
        anchors.fill: parent
        url: "index.html"
    }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

HTML代码：自己准备

#Qml #web

上次更新: 2023/12/06, 13:43:10

Qwebsocket收发测试→