Freigeben über

Win32-Beispiel-App mit visueller Komposition

  • Artikel

In diesem WebView2-Beispiel wird ein WebView2-Steuerelement in eine native Win32-Anwendung eingebettet.

  • Beispielname: WebView2SampleWinComp
  • Repositoryverzeichnis: WebView2SampleWinComp
  • Projektmappendatei: WebView2SampleWinComp.sln

Dieses Beispiel wurde als Win32 Visual Studio 2019-Projekt erstellt. Es verwendet C++ und HTML/CSS/JavaScript in der WebView2-Umgebung.

In diesem Beispiel werden die Windows-Runtime Composition-APIs (auch als Visuelle Ebene bezeichnet) verwendet, um die Features der Windows-Benutzeroberfläche zu nutzen und in C++-Win32-Anwendungen ein besseres Aussehen, Verhalten und Funktionalität zu schaffen.

Dieses Beispiel zeigt eine Auswahl von WebView2-Ereignishandlern und API-Methoden, die es einer nativen Win32-Anwendung ermöglichen, direkt mit einer WebView zu interagieren und umgekehrt.

Wenn Sie WebView zum ersten Mal verwenden, empfiehlt es sich, zuerst das Tutorial Erste Schritte mit WebView2 in Win32-Apps zu befolgen, in dem beschrieben wird, wie Sie eine WebView2 erstellen und einige grundlegende WebView2-Funktionen durchlaufen.

Siehe auch Infodatei für WebView2SampleWinComp.

Schritt 1: Installieren von Visual Studio mit C++-Unterstützung

Microsoft Visual Studio ist erforderlich. Microsoft Visual Studio Code wird für dieses Beispiel nicht unterstützt.

Dieses Beispiel wurde als Win32 Visual Studio 2019-Projekt erstellt.

  1. Wenn Visual Studio (erforderliche Mindestversion) noch nicht installiert ist, finden Sie weitere Informationen in einem separaten Fenster oder einer separaten Registerkarte unter Installieren von Visual Studio unter Einrichten Ihrer Entwicklungsumgebung für WebView2. Führen Sie die Schritte in diesem Abschnitt aus, kehren Sie dann zu dieser Seite zurück, und fahren Sie mit den folgenden Schritten fort.

  2. Wenn Sie Visual Studio 2017 verwenden möchten, ändern Sie das Plattformtoolset des Projekts unter Projekteigenschaften > Konfigurationseigenschaften > Allgemeines > Plattformtoolset. Möglicherweise müssen Sie auch die Windows SDK in die neueste Version ändern, die Ihnen zur Verfügung steht.

Weitere Voraussetzungen

  • WebView2 SDK: In diesem Beispielprojekt ist bereits eine Vorabversion des WebView2 SDK installiert. Im Folgenden werden die Schritte zum optionalen Aktualisieren des SDK gezeigt.

  • Windows 10 SDK: Standardmäßig verwendet diese Beispiel-App die neueste Windows 10 SDK-Version, die auf Ihrem Computer installiert ist. Es gibt jedoch ein Problem mit Windows 10 SDK, Version 2004 (10.0.19041.0), das die Erstellung dieser Beispiel-App verhindert. Im Folgenden finden Sie die Schritte zum Installieren einer kompatiblen Version des Windows 10 SDK.

Schritt 2: Klonen oder Herunterladen des WebView2Samples-Repositorys

  1. Falls noch nicht geschehen, klonen Sie das Repository, oder laden Sie es WebView2Samples auf Ihr lokales Laufwerk herunter. In einem separaten Fenster oder einer separaten Registerkarte finden Sie weitere Informationen unter Herunterladen des WebView2Samples-Repositorys unter Einrichten Ihrer Entwicklungsumgebung für WebView2. Führen Sie die Schritte in diesem Abschnitt aus, kehren Sie dann zu dieser Seite zurück, und fahren Sie weiter unten fort.

Schritt 3: Öffnen der Projektmappe und Festlegen des Windows SDK Ziels

  1. Öffnen Sie die .sln Datei auf Ihrem lokalen Laufwerk in Visual Studio im Verzeichnis:

    • <your-repos-directory>/WebView2Samples/SampleApps/WebView2SampleWinComp/WebView2SampleWinComp.sln

    oder:

    • <your-repos-directory>/WebView2Samples-main/SampleApps/WebView2SampleWinComp/WebView2SampleWinComp.sln

    Möglicherweise wird ein Dialogfeld Projektmappenaktionen überprüfen geöffnet, in dem Sie aufgefordert werden, welche installierten Windows SDK, das Projekt neu zuzuweisen:

    Dialogfeld

  2. Wählen Sie in der Dropdownliste Windows SDK Versiondie Option 10.0.20348.0 oder höher oder 10.0.18362.0 oder früher aus. Wählen Sie nicht 10.0.19041.0 aus. Klicken Sie dann auf die Schaltfläche OK . Wenn diese Versionen nicht verfügbar sind, führen Sie die Schritte im Abschnitt "Installieren der Windows SDK" unten aus. Fahren Sie andernfalls mit dem Abschnitt darunter fort.

Wenn die Lösung bereits geöffnet ist, können Sie das Ziel wie folgt ändern:

  • Klicken Sie Projektmappen-Explorer mit der rechten Maustaste auf das Projekt WebView2SampleWinComp (keine Projektmappe), und klicken Sie dann auf Projekte neu festlegen.

Schritt 4: Installieren des Windows SDK

Standardmäßig verwendet diese Beispiel-App die neueste Windows 10 SDK-Version, die Sie installiert haben. Es liegt ein Problem mit Windows 10 SDK, Version 2004 (10.0.19041.0) verhindert, dass diese Beispiel-App erstellt wird. Wenn dieses Problem vorliegt, installieren Sie entweder eine neuere Version wie Windows 10 SDK-Version 2104 (10.0), und legen Sie dieses Projekt neu an, um es zu verwenden.20348.0) oder eine frühere Version, z. B. 10.0. 18362.1.

So installieren Sie ein Windows 10 SDK:

  1. Wechseln Sie zu Windows SDK- und Emulatorarchiv.

  2. Klicken Sie in einer der folgenden Zeilen auf den Link SDK installieren :

    • Windows 10 SDK Version 2104 (10.0.20348.0) (oder höher)
    • Windows 10 SDK, Version 1903 (10.0.18362.1)

    Eine versionsspezifische Kopie von winsdksetup.exe wird in Ihr Downloads Verzeichnis heruntergeladen.

  3. Öffnen Sie in Ihrem Downloads Verzeichnis die Kopie von winsdksetup.exe , die Sie gerade heruntergeladen haben.

  4. Das Fenster Windows SDK Setup wird geöffnet:

    Windows SDK Setup

  5. Klicken Sie auf die Schaltfläche Weiter , und folgen Sie dann den Anweisungen. Sie können die Standardwerte übernehmen. Am Ende der Installation wird der Windows SDK Willkommensbildschirm für die ausgewählte Version angezeigt:

    Willkommen beim Windows SDK

  6. Klicken Sie auf die Schaltfläche Schließen .

Führen Sie den vorherigen Schritt aus: "Öffnen Sie die Projektmappe, und legen Sie das Windows SDK Ziel fest". Wenn die Projektmappe bereits geöffnet ist, klicken Sie in Projektmappen-Explorer mit der rechten Maustaste auf das Projekt WebView2SampleWinComp (keine Projektmappe), und klicken Sie dann auf Projekte neu festlegen.

Schritt 5: Installieren von Workloads, wenn Sie dazu aufgefordert werden

  • Wenn Sie dazu aufgefordert werden, installieren Sie alle angeforderten Visual Studio-Workloads. In einem separaten Fenster oder einer separaten Registerkarte finden Sie weitere Informationen unter Installieren von Visual Studio-Workloads unter Einrichten Ihrer Entwicklungsumgebung für WebView2. Führen Sie die Schritte in diesem Abschnitt aus, kehren Sie dann zu dieser Seite zurück, und fahren Sie weiter unten fort.

Schritt 6: Erstellen und Ausführen des Projekts

Nachdem Sie die Projektmappe in Visual Studio (oben) geöffnet und auf Setup- oder Installationsaufforderungen reagiert haben, wird das Projekt in Visual Studio geöffnet und zeigt das Projekt WebView2SampleWinComp in Projektmappen-Explorer an:

Das WebView2SampleWinComp-Projekt in Visual Studio

Legen Sie oben in Visual Studio das Buildziel wie folgt fest:

  1. Wählen Sie in der Dropdownliste Projektmappenkonfigurationendie Option Debuggen oder Freigeben aus.

  2. Wählen Sie in der Dropdownliste Lösungsplattformendie Option x86, x64 oder ARM64 aus.

  3. Klicken Sie in Projektmappen-Explorer mit der rechten Maustaste auf das Projekt WebView2SampleWinComp, und wählen Sie dann Erstellen aus.

    Dadurch wird die Projektdatei SampleApps/WebView2SampleWinComp/WebView2SampleWinComp.vcxprojerstellt.

  4. Wählen Sie Debuggen>Debuggen starten (F5) aus.

    Das Beispiel-App-Fenster wird geöffnet:

    WebView2SampleWinComp-App-Fenster

  5. Wählen Sie in Visual Studio Debuggen>Debuggen Debuggen beenden aus. Visual Studio schließt die App.

Schritt 7: Aktualisieren der installierten Pakete

Dieser Schritt ist optional. Das Beispiel ist vorinstalliert:

  • Eine Version des WebView2-Vorabversions-SDK.
  • Eine Version der Windows-Implementierungsbibliotheken (WIL).

  1. Klicken Sie in Projektmappen-Explorer mit der rechten Maustaste auf das Projekt WebView2SampleWinComp (nicht auf den Knoten Projektmappe), und wählen Sie dann NuGet-Pakete verwalten aus. Die Registerkarte NuGet-Paket-Manager wird geöffnet.

  2. Aktivieren Sie das Kontrollkästchen Vorabversion einschließen .

  3. Klicken Sie auf die Registerkarte Installiert . Beachten Sie für jedes Paket, ob zwei Versionen aufgeführt sind (die aktuelle Version und eine verfügbare aktualisierte Versionsnummer).

  4. Klicken Sie auf die Registerkarte Updates.

  5. Wenn eine neuere Vorabversion des Microsoft.Web.WebView2 SDK aufgeführt ist, können Sie optional auf die Schaltfläche Aktualisieren klicken. Eine Vorabversion hat das Suffix "-prerelease", z. B. 1.0.1248-prerelease. Wenn Sie Details zu diesem Schritt in einem separaten Fenster oder einer separaten Registerkarte anzeigen möchten, lesen Sie Installieren oder Aktualisieren des WebView2 SDK unter Einrichten Ihrer Entwicklungsumgebung für WebView2. Führen Sie die Schritte in diesem Abschnitt aus, kehren Sie dann zu dieser Seite zurück, und fahren Sie weiter unten fort.

    Registerkarte

  6. Wenn eine neuere Version der Windows-Implementierungsbibliotheken (WINDOWS Implementation Libraries, WIL) aufgeführt ist, können Sie optional auf die Schaltfläche Aktualisieren klicken.

  7. Befolgen Sie die Anweisungen, um die Aktualisierung der Pakete fortzusetzen.

  8. Erstellen Sie das Projekt, und führen Sie es erneut aus, und verwenden Sie nun die aktualisierten Pakete.

Schritt 8: Untersuchen des Codes

  1. Untersuchen Sie den Code im Code-Editor von Visual Studio:

    WebView2SampleWinComp-Projekt in Visual Studio

Siehe auch