WinUI 2-Beispiel-App (UWP)

In diesem WebView2-Beispiel wird veranschaulicht, wie Sie das WebView2-Steuerelement und webView2-APIs verwenden, um einen Webbrowser in einer WinUI 2-App (UWP) zu implementieren.

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

Installierte NuGet-Pakete

Dieses Beispiel enthält die folgenden NuGet-Pakete:

• Microsoft.NETCore.UniversalWindowsPlatform
• Microsoft.UI.Xaml – Vorabversion – enthält das Microsoft.Web.WebView2 SDK als Abhängigkeit.

Um die neuesten Features zu veranschaulichen, ist dieses Beispiel im WebView2Samples-Repository so eingerichtet, dass anstelle einer stabilen Version eine Vorabversion des WinUI 2 SDK (im NuGet-Paket-Manager als Microsoft.UI.Xaml aufgeführt) verwendet wird. Das WinUI 2 SDK enthält eine kompatible Version des WebView2 SDK als Abhängigkeit von Microsoft.UI.Xaml.

Informationen zu webview2_sample_uwp finden Sie auch in der README-Datei.

Schritt 1: 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 (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.

Schritt 2: 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, finden Sie weitere Informationen unter Installieren eines Vorschaukanals von Microsoft Edge 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.

Schritt 3: Klonen oder Herunterladen des WebView2Samples-Repositorys

1. Falls noch nicht geschehen, klonen Sie das Repository, oder laden Sie es WebView2Sample 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 4: Öffnen der Projektmappe in Visual Studio

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

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

   oder:

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

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

1. 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 mithilfe vorinstallierter Pakete

Projektmappen-Explorer zeigt das webview2_sample_uwp-Projekt an:

Erstellen Sie das Projekt, und führen Sie es aus, indem Sie die Versionen der NuGet-Pakete verwenden, die im Beispiel aus dem Repository installiert wurden:

1. Wählen Sie in der Dropdownliste Projektmappenkonfigurationen eine Konfiguration aus, z. B . Debuggen.

2. Wählen Sie in der Dropdownliste Lösungsplattformen eine Plattform aus, z. B. x64.

   

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

   Das Projekt wird erstellt.

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

   Ein leeres Rasterfenster wird zunächst für einen Moment angezeigt:

   

   Im Beispiel-App-Fenster werden dann Webseiteninhalte angezeigt:

   

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

Aktualisieren Sie als Nächstes die NuGet-Pakete für das Projekt gemäß den folgenden Abschnitten.

Schritt 7: Aktualisieren der NuGet-Pakete

In diesem Schritt aktualisieren wir die NuGet-Pakete des Projekts, um die neueste Vorabversion des WinUI 2 SDK zu erhalten. Das WinUI 2 SDK enthält eine kompatible Vorabversion oder Releaseversion des WebView2 SDK.

Aktualisieren Sie die NuGet-Pakete des Projekts:

1. Klicken Sie in Visual Studio in Projektmappen-Explorer mit der rechten Maustaste auf das projekt webview2_sample_uwp (nicht auf den darüber stehenden Projektmappenknoten), und wählen Sie dann NuGet-Pakete verwalten aus.

   Der Bereich NuGet-Paket-Manager wird in Visual Studio geöffnet.

2. Klicken Sie im NuGet-Paket-Manager auf die Registerkarte Installiert .

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

   Eine Vorabversion des Pakets Microsoft.UI.Xaml ist aufgeführt, die das WinUI 2 SDK angibt. Das Paket Microsoft.UI.Xaml enthält das WebView2 SDK. Microsoft.Web.WebView2 ist im Abschnitt Abhängigkeiten des Pakets Microsoft.UI.Xaml aufgeführt. Das Aktualisieren des Microsoft.UI.Xaml-Pakets führt auch zu einer Aktualisierung des kompatiblen WebView2 SDK.

4. Klicken Sie im NuGet-Paket-Manager auf die Registerkarte Updates.

5. Klicken Sie auf der linken Seite auf die Karte Microsoft.UI.Xaml.

6. Vergewissern Sie sich, dass im Textfeld Versiondie Option Neueste Vorabversion ausgewählt ist.

7. Klicken Sie auf der rechten Seite auf die Schaltfläche Aktualisieren :

   

   Nachdem Sie die neuesten Pakete erhalten haben, was einige Minuten dauern kann, wird das Dialogfeld Vorschau der Änderungen geöffnet. Microsoft.Web.WebView2 (das WebView2 SDK) ist separat im Dialogfeld Vorschauänderungen aufgeführt:

   

8. Klicken Sie auf die Schaltfläche OK .

9. Das Dialogfeld Lizenzakzeptanz wird angezeigt:

   

10. Klicken Sie auf die Schaltfläche Ich stimme zu . In Visual Studio wird die Datei mit der readme.txt Meldung angezeigt, dass Sie das WinUI-Paket installiert haben:

    

    In der Infodatei sind einige Codezeilen aufgeführt, die dem ähneln, was wir hinzufügen.

11. Aktualisieren Sie das NuGet-Paket Microsoft.NETCore.UniversalWindowsPlatform mit ähnlichen Schritten.

    Nachdem Sie die neuesten UWP-Pakete erhalten haben, was einige Minuten dauern kann, wird das Dialogfeld Vorschau der Änderungen angezeigt:

    

12. Wählen Sie Datei>Alle speichern aus.

    Sie haben nun das Microsoft.UI.Xaml-Paket ,WinUI (WinUI 2) für Ihr Projekt installiert. Überprüfen Sie die resultierenden installierten Pakete wie folgt:

13. Klicken Sie im NuGet-Paket-Manager auf die Registerkarte Installiert , und überprüfen Sie die aktualisierten Pakete:

    • Microsoft.NETCore.UniversalWindowsPlatform
    • Microsoft.UI.Xaml – Vorabversion

    

14. Schließen Sie das Fenster NuGet-Paket-Manager .

Schritt 8: Erstellen und Ausführen des Projekts mit aktualisierten Paketen

Nachdem die NuGet-Pakete nun aktualisiert wurden, erstellen Sie das Projekt, und führen Sie es erneut aus:

1. Klicken Sie in Projektmappen-Explorer mit der rechten Maustaste auf das projekt webview2_sample_uwp, und wählen Sie dann Erstellen aus.

   Das Projekt wird erstellt.

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

   Ein leeres Rasterfenster wird zunächst für einen Moment angezeigt:

   

   Im Beispiel-App-Fenster werden dann Webseiteninhalte angezeigt:

   

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

Schritt 9: Untersuchen des Codes

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

   

Siehe auch

• WebView2-API-Referenz
• Erste Schritte mit WebView2 in WinUI 2-Apps (UWP)