Win32-Beispiel-App mit Visual Composition

In diesem WebView2-Beispiel wird das Erstellen einer Anwendung veranschaulicht, die ein WebView2-Steuerelement in eine systemeigene Win32-Anwendung einbettet.

Es wird als Win32 Visual Studio 2019-Projekt erstellt und nutzt sowohl C++ als auch HTML/CSS/JavaScript in der WebView2-Umgebung.

Außerdem werden Windows-Runtime Kompositions-APIs (auch als visuelle Ebene bezeichnet) verwendet, um die Windows-UI-Features zu nutzen und ein besseres Aussehen, Verhalten und eine bessere Funktionalität in C++-Win32-Anwendungen zu erzielen.

• Beispielname: WebView2SampleWinComp
• Repositoryverzeichnis: WebView2SampleWinComp
• Lösungsdatei: WebView2SampleWinComp.sln

So verwenden Sie dieses Beispiel (allgemeine Schritte):

Die Schritte auf der vorliegenden Seite sind allgemeingültige. Sehen Sie sich die beispielspezifischen Schritte in den README-Abschnitten an, die die aktuelle Seite überschreiben können.

Schritt 1 : Anzeigen der Infodatei

1. Lesen Sie in einem separaten Fenster oder einer separaten Registerkarte die gerenderte README.md Datei für dieses Projekt auf GitHub: README-Datei für WebView2SampleWinComp. Kehren Sie dann zu dieser Seite zurück, und fahren Sie mit den nachstehenden Schritten fort.

   • README > Voraussetzungen

   • README > Erstellen des WebView2-Beispiels "WinComp"

   Sie können auch die README.md Quelldatei (nicht gerendert) in Visual Studio anzeigen. Öffnen Sie die Datei im Datei-Manager oder in Visual Studio > Projektmappen-Explorer:

   <your-repos-directory>/WebView2Samples/SampleApps/WebView2SampleWinComp/README.md

   oder:

   <your-repos-directory>/WebView2Samples-main/SampleApps/WebView2SampleWinComp/README.md

Schritt 2 : Installieren von Visual Studio

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

1. Wenn Visual Studio (mindestens erforderliche Version) noch nicht installiert ist, lesen Sie visual Studio in einem separaten Fenster oder einer separaten Registerkarte unter "Installieren von Visual Studio " unter "Einrichten Ihrer Dev-Umgebung 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 nachstehenden Schritten fort.

Schritt 3: Installieren eines Vorschaukanals von Microsoft Edge

1. Wenn noch kein Vorschaukanal von Microsoft Edge (Beta, Dev oder Canary) in einem separaten Fenster oder einer separaten Registerkarte installiert ist, lesen Sie "Installieren eines Vorschaukanals von Microsoft Edge " in "Einrichten Ihrer Dev-Umgebung 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 nachstehenden Schritten fort.

Schritt 4 : Herunterladen oder Klonen des WebView2Samples-Repositorys

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

Schritt 5: Öffnen der Lösung 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, für welches installierte Windows SDK das Projekt neu ausgerichtet werden soll:

   

2. Wählen Sie in der Dropdownliste der Windows SDK-Version 10.0.20348.0 oder höher oder 10.0.18362.0 oder früher aus. wählen Sie 10.0.19041.0 nicht aus. Klicken Sie dann auf die Schaltfläche " OK ". Wenn diese Versionen nicht verfügbar sind, führen Sie die Schritte im Abschnitt "Installieren des 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 in Projektmappen-Explorer mit der rechten Maustaste auf das WebView2SampleWinComp-Projekt (keine Lösung), und klicken Sie dann auf "Projekte neu anordnen".

Schritt 6 : Installieren des Windows SDK

Standardmäßig verwendet diese Beispiel-App die neueste Windows 10 SDK-Version, die Sie installiert haben. Es gibt ein Problem mit Windows 10 SDK, Version 2004 (10.0.** 19041.0**), das die Erstellung dieser Beispiel-App verhindert. Wenn dieses Problem auftritt, müssen Sie entweder eine höhere Version installieren (und dieses Projekt neu anordnen), z. B. Windows 10 SDK-Version 2104 (10.0).** 20348.0**) oder eine frühere Version, z. B. 10.0. 18362.1.

So installieren Sie ein Windows 10 SDK:

1. Wechseln Sie zum 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, die winsdksetup.exe Sie soeben heruntergeladen haben.

4. Das Windows SDK-Setupfenster wird geöffnet:

   

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

   

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

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

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

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

Schritt 8 : Anzeigen des geöffneten Projekts

Das Projekt wird in Visual Studio mit dem WebView2SampleWinComp-Projekt in Projektmappen-Explorer geöffnet:

Um den Screenshot zu zoomen, klicken Sie mit der rechten Maustaste auf > Bild auf der neuen Registerkarte öffnen.

Schritt 9 – Installieren oder Aktualisieren des WebView2-Vorabversions-SDK

Dieser Schritt ist optional. Im Beispiel wurde eine Version des WebView2-Vorabversions-SDK vorinstalliert.

1. Klicken Sie in Projektmappen-Explorer mit der rechten Maustaste auf das WebView2SampleWinComp-Projekt (nicht auf den Projektmappenknoten), 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 Aktualisierungen.

4. Wenn eine neuere Vorabversion des Microsoft.Web.WebView2 SDK aufgeführt ist, klicken Sie auf die Schaltfläche " Aktualisieren ". Eine Vorabversion weist ein Suffix "-prerelease" auf, 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 des WebView2 SDK " unter "Einrichten ihrer Dev-Umgebung für WebView2". Führen Sie die Schritte in diesem Abschnitt aus, kehren Sie dann zu dieser Seite zurück, und fahren Sie unten fort.

Um den Screenshot zu zoomen, klicken Sie mit der rechten Maustaste auf > Bild auf der neuen Registerkarte öffnen.

Schritt 10 – Installieren oder Aktualisieren der Windows-Implementierungsbibliotheken (WIL)

Dieser Schritt ist optional. Im Beispiel wurde eine Version der Windows-Implementierungsbibliotheken (WIL) vorinstalliert.

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

2. Installieren oder aktualisieren Sie die Windows-Implementierungsbibliotheken (WIL) auf dem Projektknoten (nicht auf dem Lösungsknoten) in Projektmappen-Explorer. Wenn das WebView2-Vorabversions-SDK bereits installiert ist und eine neuere Vorabversion auf der Registerkarte "Aktualisieren" aufgeführt ist, aktualisieren Sie es. In einem separaten Fenster oder einer separaten Registerkarte lesen Sie "Installieren des WebView2 SDK " in "Einrichten Ihrer Dev-Umgebung für WebView2". Führen Sie die Schritte in diesem Abschnitt aus, kehren Sie dann zu dieser Seite zurück, und fahren Sie unten fort.

Schritt 11 : Erstellen des Projekts

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

1. Wählen Sie in der Dropdownliste " Lösungskonfigurationen " die Option "Debuggen " oder " Freigeben" aus.

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

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

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

Schritt 12 – Ausführen (Debuggen) des Projekts

1. Wählen Sie in Visual Studio nach dem Erstellen des Projekts Debuggen > starten (F5) aus.

   Das Beispiel-App-Fenster wird geöffnet:

   

2. Verwenden Sie die Beispiel-App. siehe README-Datei für WebView2SampleWinComp.

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

Schritt 13 – Überprüfen des Codes

1. Überprüfen Sie den Code im Visual Studio-Code-Editor:

   

Weitere Informationen

• Erste Schritte mit WebView2 in Win32-Apps