Einrichten Ihrer Dev-Umgebung für WebView2

  • Artikel
  • 8 Minuten Lesedauer

Dieser Artikel befasst sich mit der allgemeinen Einrichtung Ihrer Entwicklungsumgebung für die WebView2-Entwicklung. Einige Erste Schritte Lernprogramme verweisen hier auf vorbereitende Einrichtungsschritte und fügen dann plattform- oder projektspezifische Setupschritte hinzu.

Installieren von Visual Studio

  1. Installieren Sie Visual Studio 2015 oder höher, z. B. Visual Studio Professional 2022.

    Die WebView2-Beispiele wurden für Microsoft Visual Studio und nicht für Microsoft Visual Studio Code entwickelt.

    Wenn Sie Visual Studio 2022 installieren, können Sie die Standardeinstellungen vorerst übernehmen. Sie können zu diesem Zeitpunkt auf "Installieren" klicken und die Installation der Workloads ablehnen. Visual Studio fordert Sie später beim Öffnen einer bestimmten .sln Datei auf, die plattformgerechten Workloads zu installieren.

Installieren eines Vorschaukanals von Microsoft Edge

  1. Installieren Sie einen beliebigen Microsoft Edge Insider -Kanal (Vorschau) (Beta, Dev oder Canary) unter einem unterstützten Betriebssystem (Betriebssystem):
    • Windows 7
    • Windows8.1
    • Windows 10
    • Windows 11

Wir empfehlen die Verwendung des Canary-Kanals. Die mindestens erforderliche Version ist 82.0.488.0.

Installieren der WebView2-Runtime

  1. Installieren Sie optional die WebView2-Runtime. Wechseln Sie dazu zu Microsoft Edge WebView2.

Wenn Sie sich nicht sicher sind, überspringen Sie diesen Schritt. Sie können stattdessen den Microsoft Edge Preview-Kanal aus dem vorherigen Schritt verwenden.

Weitere Informationen finden Sie unter Grundlegendes zu den verschiedenen WebView2 SDK-Versionen.

Herunterladen des WebView2Samples-Repositorys

Sie können das Repository als .zip Datei herunterladen oder das Repository klonen.

  • Wenn Sie das Repository (als .zip Datei) herunterladen, erhalten Sie eine Momentaufnahmekopie des Repositorys. Sie können dann später eine weitere, aktualisierte Kopie des Repositorys herunterladen.

  • Wenn Sie das Repository klonen, können Sie Ihre lokale Kopie mithilfe von Git-Befehlen oder Features verschiedener Dev-Apps aktualisieren.

So laden Sie das Repository (als .zip Datei) herunter:

  1. Öffnen Sie das WebView2Samples-Repository in einem neuen Fenster oder einer neuen Registerkarte.

  2. Klicken Sie oben rechts im GitHub-Repository auf die grüne Schaltfläche " Code ", und klicken Sie dann auf "ZIP herunterladen".

    Das WebView2Samples-Repository wird heruntergeladen.

    Das Popup "Herunterladen" wird in Microsoft Edge angezeigt:

    Das Symbol "Einstellungen und mehr" auf der Symbolleiste von Microsoft Edge.

    Wenn in Microsoft Edge das Popup "Herunterladen " nicht angezeigt wird, klicken Sie auf "Einstellungen" und mehr (...) und dann auf "Downloads".

  3. Zeigen Sie im Popupfenster "Downloads " auf die rechte Seite, WebView2Samples-main.zip und klicken Sie dann auf das Symbol " Im Ordner anzeigen".

    Es wird empfohlen, nicht auf den Link " Datei öffnen " zu klicken, da dadurch die Datei sofort in Ihrem Downloadbereich entpackt wird, wodurch es schwieriger (und langsamer) wird, an den gewünschten Speicherort zu wechseln.

  4. Kopieren oder ausschneiden Sie die WebView2Samples-main.zip Datei aus Ihrem Downloads-Verzeichnis in ein normales Verzeichnis, z Documents. B. .

  5. Entzippen Sie die WebView2Samples-main.zip Datei, und notieren Sie sich den Speicherort der entpackten Dateien.

    Das heruntergeladene, entpackte WebView2Samples-Repository.

  6. Untersuchen Sie die Auflösung von Hauptverzeichnissen.

    -main ist der Name der Repositoryverzweigung, die diese heruntergeladene Verzeichnismomentaufnahme darstellt. Es ist möglich, zu einem anderen Branch bei GitHub zu wechseln und dann beispielsweise WebView2Samples-smoketest-1.0.1054.27-prerelease-testing.zipherunterzuladen. In diesem Fall ist die heruntergeladene .zip Datei eine Momentaufnahme des smoketest-1.0.1054.27-prerelease-testing Zweigs des Repositorys. In dieser Dokumentation wird davon ausgegangen, dass Sie den main Branch des Repositorys heruntergeladen haben.

  7. Empfohlen: Benennen Sie das Stammverzeichnis von WebView2Samples-main in WebView2Samplesum, um dem Repositorynamen und Pfad zu entsprechen.

Klonen des WebView2Samples-Repositorys

Sie können das Repository als .zip Datei herunterladen oder das Repository klonen.

  • Wenn Sie das Repository (als .zip Datei) herunterladen, erhalten Sie eine Momentaufnahmekopie des Repositorys. Sie können dann später eine weitere, aktualisierte Kopie des Repositorys herunterladen.

  • Wenn Sie das Repository klonen, können Sie Ihre lokale Kopie mithilfe von Git-Befehlen oder Features verschiedener Dev-Apps aktualisieren.

Um das WebView2Samples Repository zu klonen, müssen Sie zuerst Git installieren. Sie können das Repository herunterladen, wie oben beschrieben, oder es klonen.

Git installieren

  1. Wenn Sie das WebView2Samples Repository klonen möchten (anstatt es herunterzuladen), und wenn Git noch nicht installiert ist, laden Sie git herunter , und installieren Sie es.

Abrufen der URL zum Klonen des WebView2Samples-Repositorys

  1. Öffnen Sie das WebView2Samples-Repository in einem neuen Fenster oder einer neuen Registerkarte.

  2. Klicken Sie oben rechts im GitHub-Repository auf die grüne Schaltfläche "Code ", wählen Sie "Klonen" aus, und klicken Sie dann auf das Symbol " Kopieren " (oder wählen Sie die HTTPS-URL-Zeichenfolge im Textfeld aus, und kopieren Sie sie).

    Klonen des WebView2Samples-Repositorys.

  3. Entscheiden Sie, welches Tool Sie zum lokalen Klonen des Repositorys verwenden möchten:

    • Visual Studio
    • GitHub Desktop
    • Git Bash-Shell oder Eingabeaufforderung

Klonen Sie als Nächstes das GitHub-Repository auf Ihr lokales Laufwerk. Führen Sie dazu die entsprechenden Schritte unten für das Tool aus, das Sie verwenden möchten.

Klonen des Repositorys mithilfe von Visual Studio

Wenn Sie Visual Studio verwenden möchten, um das GitHub-Repository auf Ihr lokales Laufwerk zu klonen:

  1. Wählen Sie in Visual Studio das Repository "Datei > klonen" aus.

  2. Geben Sie die URL ein, die Sie aus dem GitHub-Repository kopiert haben.

  3. Im selben Dialogfeld oder in einem Datei-Explorer-Dienstprogramm können Sie einen allgemeinen Stamm git oder GitHub Ordner an einem beschreibbaren Speicherort erstellen und dann dieses Verzeichnis auswählen, damit das Repository dort als neues Verzeichnis geklont wird.

    Sie können beispielsweise das Repository im übergeordneten Ordner erstellen: C:\Users\myUserName\Documents\GitHub\, sodass durch den Klonvorgang das neue Verzeichnis C:\Users\myUserName\Documents\GitHub\WebView2Sampleserstellt wird.

Sie haben das Repository auf Ihr lokales Laufwerk geklont. Fahren Sie mit dem nächsten Hauptabschnitt weiter unten fort.

Klonen des Repositorys mit gitHub Desktop

Wenn Sie GitHub Desktop verwenden möchten, um das GitHub-Repository auf Ihr lokales Laufwerk zu klonen:

  1. Installieren Sie GitHub Desktop.

  2. Wählen Sie in GitHub Desktop das Repository "Datei****klonen" > aus.

  3. Geben Sie in Visual Studio oder GitHub Desktop die URL ein, die Sie aus dem GitHub-Repository kopiert haben.

  4. Im selben Dialogfeld oder in einem Datei-Explorer-Dienstprogramm können Sie einen allgemeinen Stamm git oder GitHub Ordner an einem beschreibbaren Speicherort erstellen und dann dieses Verzeichnis auswählen, damit das Repository dort als neues Verzeichnis geklont wird.

    Sie können beispielsweise das Repository im übergeordneten Ordner erstellen: C:\Users\myUserName\Documents\GitHub\, sodass durch den Klonvorgang das neue Verzeichnis C:\Users\myUserName\Documents\GitHub\WebView2Sampleserstellt wird.

Sie haben das Repository auf Ihr lokales Laufwerk geklont. Fahren Sie mit dem nächsten Hauptabschnitt weiter unten fort.

Klonen des Repositorys mithilfe der Git Bash-Shell oder einer Eingabeaufforderung

Wenn Sie stattdessen das Repository mithilfe einer Git Bash-Shell oder einer Eingabeaufforderung klonen möchten:

  1. Klonen Sie das Repository auf Ihr lokales Laufwerk, und geben Sie die URL-Zeichenfolge ein, die Sie aus dem GitHub-Repository kopiert haben:

    # example location where the repo directory will be added:
cd c:/users/myusername/documents/github/
git clone https://github.com/MicrosoftEdge/WebView2Samples.git

    Verwenden der Git Bash-Shell zum Eingeben des Git-Klonbefehls in das gewünschte lokale Ziel-Git- oder GitHub-Repositoryverzeichnis.

    Das Verzeichnis wird auf Ihrem lokalen Laufwerk in dem angegebenen Pfad erstellt, wie in der folgenden Abbildung dargestellt:

    Explorer das Verzeichnis für das geklonte WebView2Samples-Repository anzeigen.

    Sie haben das Repository auf Ihr lokales Laufwerk geklont.

Öffnen einer SLN-Datei "WebView2Samples" in Visual Studio

Nachdem Sie das WebView2Samples Repository heruntergeladen oder geklont haben, öffnen Sie eine .sln Datei in Visual Studio.

  1. Suchen Sie in Ihrer lokalen Kopie der Repository-Verzeichnisstruktur nach einer .sln Datei. Die README-Datei auf oberster Ebene im WebView2Samples-Repository bietet eine ähnliche Übersicht.

  2. Öffnen Sie eine .sln Datei in Visual Studio. Öffnen Sie beispielsweise Ihre lokale Kopie von "WebView2Samples.sln". Die Lösungsdateien dieses Repositorys erfordern Visual Studio, nicht Visual Studio Code.

  3. Öffnen Sie eine der .sln Dateien. Öffnen Sie beispielsweise Ihre lokale Kopie der Win32-Hauptlösungsdatei "WebView2Samples/SampleApps/WebView2Samples.sln " (als Pfad WebView2Samples-main/SampleApps/WebView2Samples.slnheruntergeladen) in Microsoft Visual Studio. Wenn Sie diese Lösungsdatei in Visual Studio öffnen, enthält Projektmappen-Explorer die folgenden Projekte:

    Projektmappen-Explorer für das WebView2Samples-Repository, das die WebView2-Beispiele als Projekte anzeigt.

Für die allgemeine Einrichtung der .sln ersten Dev-Umgebung können Sie jeden Dateityp aus dem WebView2Samples Repository öffnen:

  • Eine plattformspezifische .sln Datei in einem Unterverzeichnis des GettingStartedGuides Verzeichnisses. Diese entsprechen den Erste Schritte-Lernprogrammen und sind abgeschlossene Beispiele, die einige API-Features veranschaulichen.

  • Die Win32-Datei .sln mit mehreren Plattformprojekten im SampleApps Verzeichnis. Dies ist eine umfassende API-Demonstration.

  • Eine plattformspezifische .sln Datei in einem Unterverzeichnis des SampleApps Verzeichnisses. Dies sind umfassende API-Demonstrationen.

Installieren von Visual Studio-Workloads

Installieren Sie Visual Studio-Workloads, wenn Sie dazu aufgefordert werden. Wenn Sie eine .sln Datei aus dem geklonten oder heruntergeladenen WebView2Samples Repository in Microsoft Visual Studio 2019 oder 2022 öffnen, wird möglicherweise ein Dialogfeld "Kann nicht geöffnet" angezeigt.

  1. Klicken Sie auf die Schaltfläche " OK ". Dann wird möglicherweise ein Workload-Installationsprogramm angezeigt, z. B.:

    Visual Studio-Installationsprogramm für die .NET-Desktopentwicklungsworkload..

  2. Aktivieren Sie das Kontrollkästchen, und klicken Sie dann auf die Schaltfläche " Installieren ".

    Das Visual Studio-Installationsprogramm wird für die Workload der Plattform ausgeführt:

    Visual Studio-Installationsprogramm, Installieren der .NET Desktop-Entwicklungsarbeitslast..

    Möglicherweise wird eine Protokolldateiseite des Migrationsberichts geöffnet, z. B. unter file:///C:/Users/username/Documents/WebView2Samples-main/WebView2Samples-main/SampleApps/UpgradeLog.htm:

    Visual Studio 2022 Workload Installer Migration Report for the multi-platform, comprehensive-API sample.

    Klicken Sie zum Zoomen mit der rechten Maustaste auf > Bild auf der neuen Registerkarte öffnen.

    Oben ist das -main Verzeichnissuffix für die heruntergeladene .zip Datei des Repositorys vorhanden, nicht, wenn Sie das Repository geklont haben.

    Visual Studio öffnet die ausgewählte .sln Datei in Projektmappen-Explorer:

    Visual Studio 2022 nach dem Ausführen des Workload-Installers beim Öffnen des Beispiels für die multiplattformübergreifende, umfassende API.

Installieren des WebView2 SDK

Das WebView2 SDK enthält das WebView2-Steuerelement, das von Microsoft Edge unterstützt wird, und ermöglicht Es Ihnen, Webtechnologien (HTML, CSS und JavaScript) in Ihre nativen Anwendungen einzubetten.

Sie installieren das WebView2 SDK einmal pro Projektknoten jeder .sln Datei. Die WebView2 SDK-Installation gilt nur für das Projekt, auf dem sie installiert ist.

Anstatt das Microsoft.Web.WebView2 SDK NuGet-Paket von nuget.org herunterzuladen, installieren Sie das WebView2 SDK NuGet-Paket über den NuGet Package Manager-Bereich in Visual Studio. Nachdem Sie das WebView2Samples-Repository heruntergeladen oder geklont haben, öffnen Sie eine der Repositorydateien .sln in Visual Studio, und klicken Sie mit der rechten Maustaste auf einen Projektknoten innerhalb der Lösung. Sie verwenden den Bereich "NuGet-Paket-Manager ", um das Microsoft.Web.WebView2 SDK als NuGet-Paket zu installieren.

Das Microsoft.Web.WebView2 SDK ist in Release- und Vorabversionen verfügbar. Um zu beginnen, wird eine Release-Version empfohlen.

Installieren Sie das WebView2 SDK wie folgt:

  1. Öffnen Sie eine .sln Datei in Visual Studio. Öffnen Sie beispielsweise Ihre lokale Kopie von "WebView2Samples.sln". Die Lösungsdateien dieses Repositorys erfordern Visual Studio, nicht Visual Studio Code.

  2. Klicken Sie in Projektmappen-Explorer mit der rechten Maustaste auf die Projektknoten der Lösung, z. B. auf den Projektknoten "WebView2GettingStarted" (nicht auf den Lösungsknoten), und wählen Sie dann "NuGet-Pakete verwalten" aus.

    Die folgende Abbildung zeigt eine bestimmte SLN-Datei und ein bestimmtes Projekt. Verwenden Sie das Projekt, in dem Sie das SDK installieren möchten:

    Verwalten von NuGet-Paketen.

    Die Registerkarte "NuGet-Paket-Manager " wird in Visual Studio geöffnet.

  3. Klicken Sie im NuGet-Fenster auf die Registerkarte "Durchsuchen ".

  4. Deaktivieren Sie auf der rechten Seite der Suchleiste das Kontrollkästchen " Vorabversion einschließen " (es sei denn, Sie wissen, dass Sie eine Vorabversion des SDK wünschen).

  5. Geben Sie in der Suchleiste oben links "Microsoft.Web.WebView2" ein.

  6. Klicken Sie unter der Suchleiste auf die Karte "Microsoft.Web.WebView2 ".

  7. Klicken Sie im rechten Bereich auf die Schaltfläche " Installieren (oder Aktualisieren)". NuGet lädt das WebView2 SDK zur Verwendung durch dieses Projekt auf Ihren Computer herunter.

    Auswählen des Pakets "Microsoft.Web.WebView2" im NuGet-Paket-Manager in Visual Studio.

    Klicken Sie zum Zoomen mit der rechten Maustaste auf > Bild auf der neuen Registerkarte öffnen.

  8. Schließen Sie die Registerkarte "NuGet-Paket-Manager ".

Das WebView2 SDK ist jetzt installiert, sodass Ihre Entwicklungsumgebung jetzt so eingerichtet ist, dass WebView2-Features zu WebView2-Apps hinzugefügt werden.

Siehe auch NuGet.org > Microsoft.Web.WebView2 SDK.