WebEngine Qt Quick 最小範例

以 Qt Quick 集成 Qt WebEngine 顯示網頁。

WebEngine Qt Quick Minimal Example 演示如何使用 WebEngineView item to render a web page. It shows the minimum amount of code needed to load and display an HTML page, and can be used as a basis for further experimentation.

運行範例

要運行範例從 Qt Creator ，打開歡迎模式，然後選擇範例從範例。更多信息，拜訪構建和運行範例 .

C++ 代碼

在 main.cpp we use only the QGuiApplication and QQmlApplicationEngine classes. We also include qtwebengineglobal.h to be able to use QtWebEngine::initialize .

#include <QGuiApplication>
#include <QQmlApplicationEngine>
#include <qtwebengineglobal.h>

在 main function we first set the QCoreApplication::organizationName property. This affects the locations where Qt WebEngine stores persistent and cached data (see also WebEngineProfile::cachePath and WebEngineProfile::persistentStoragePath ).

We also set the Qt::AA_EnableHighDpiScaling attribute. This lets the web view automatically scale on high-dpi displays. Then we instantiate a QGuiApplication 對象。

Next, we call QtWebEngine::initialize , which makes sure that OpenGL contexts can be shared between the main process and the dedicated renderer process ( QtWebEngineProcess ). This method needs to be called before any OpenGL context is created.

Then we create a QQmlApplicationEngine , and tell it to load main.qml 從 Qt 資源係統 .

最後， QGuiApplication::exec () launches the main event loop.

int main(int argc, char *argv[])
{
    QCoreApplication::setOrganizationName("QtExamples");
    QCoreApplication::setAttribute(Qt::AA_EnableHighDpiScaling);
    QCoreApplication::setAttribute(Qt::AA_ShareOpenGLContexts);
    QtWebEngine::initialize();
    QGuiApplication app(argc, argv);
    QQmlApplicationEngine engine;
    engine.load(QUrl(QStringLiteral("qrc:/main.qml")));
    return app.exec();
}

QML 代碼

在 main.qml we create the top level window, set a sensible default size and make it visible. The window will be filled by a WebEngineView item loading the Qt Homepage .

import QtQuick 2.0
import QtQuick.Window 2.0
import QtWebEngine 1.0
Window {
    width: 1024
    height: 750
    visible: true
    WebEngineView {
        anchors.fill: parent
        url: "https://www.qt.io"
    }
}

要求

The example requires a working internet connection to render the Qt Homepage . An optional system proxy should be picked up automatically.

範例工程 @ code.qt.io