WebEngine Qt Quick Minimal Example

WebEngine Qt Quick Minimal Example demonstrates how to use the 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.

Running the Example

To run the example from Qt Creator, open the Welcome mode and select the example from Examples. For more information, visit Building and Running an Example.

C++ Code

In 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>

In the 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 object.

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 from the Qt Resource System.

Finally, 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 Code

In 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"
     }
 }

Requirements

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

Example project @ code.qt.io