Einrichten Ihrer Entwicklungsumgebung für WebView2

Artikel
04/30/2023

In diesem Artikel wird die allgemeine Einrichtung Ihrer Entwicklungsumgebung für die WebView2-Entwicklung behandelt. Einige Erste Schritte Tutorials verweisen hier auf vorläufige Einrichtungsschritte und fügen dann plattformspezifische oder projektspezifische Einrichtungsschritte hinzu.

Installieren von Visual Studio

Installieren Sie Visual Studio 2015 oder höher, z. B. Visual Studio Professional 2019 oder Visual Studio 2022 Community Edition. Die meisten WebView2-Beispiele wurden mit Visual Studio 2019 erstellt und getestet. Wenn ein Beispiel mit Visual Studio 2019 erstellt wurde, sollten Sie das Beispiel in Visual Studio 2019 erstellen und ausführen, bevor Sie das Beispiel in Visual Studio 2022 verwenden.

Die WebView2-Beispiele sind für Microsoft Visual Studio und nicht für Microsoft Visual Studio Code konzipiert.

Wenn Sie Visual Studio installieren, können Sie vorerst die Standardwerte übernehmen. Sie können auf Installieren klicken und die Installation der Workloads zu diesem Zeitpunkt 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

Installieren Sie einen beliebigen Microsoft Edge-Vorschaukanal (Beta, Dev oder Canary) auf einem unterstützten Betriebssystem:

Windows 10
Windows 11

Wechseln Sie dazu zu Microsoft Edge-Insider werden. Die Vorschaukanäle werden auch als Insider-Kanäle bezeichnet.

Es wird empfohlen, den Canary-Kanal zu verwenden. Die erforderliche Mindestversion ist 82.0.488.0.

Die Vorschaukanäle von Microsoft Edge sind erforderlich, um eine Vorabversion des WebView2 SDK verwenden zu können. Mit einem Vorabversions-SDK können Sie Ihre App mit den neuesten APIs testen und die neuesten APIs ausprobieren.

Herunterladen des WebView2Samples-Repositorys

Es gibt zwei Repositorys, die WebView2-Beispiele enthalten:

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

Wenn Sie das Repository (als .zip Datei) herunterladen, erhalten Sie eine Momentaufnahme Kopie 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 Datei) herunter .zip :

Öffnen Sie das WebView2Samples-Repository (oder das WebView2Browser-Repository) in einem neuen Fenster oder einer neuen Registerkarte.
Klicken Sie oben rechts im GitHub-Repository auf die grüne Schaltfläche Code , und klicken Sie dann auf ZIP herunterladen.

Das Popupfenster Herunterladen wird in Microsoft Edge angezeigt:

Wenn das Popupfenster Herunterladen in Microsoft Edge nicht angezeigt wird, klicken Sie auf Einstellungen und mehr (...) und dann auf Downloads.
Zeigen Sie im Popupfenster Downloads auf die rechte Seite, WebView2Samples-main.zip und klicken Sie dann auf das Symbol In Ordner (Ordner) anzeigen.

Es wird empfohlen, nicht auf den Link Datei öffnen zu klicken, da die Datei sofort in Ihrem Downloadbereich entpackt wird, wodurch es schwieriger (und langsamer) wird, an den gewünschten Speicherort zu wechseln.
Kopieren oder schneiden Sie die WebView2Samples-main.zip Datei aus Dem Verzeichnis Downloads in ein normales Verzeichnis aus, z Documents. B. .
Entzippen Sie die WebView2Samples-main.zip Datei, und notieren Sie sich den Speicherort der entzippten Dateien.
Untersuchen Sie die Aufschlüsselung von Standard Verzeichnissen.

-mainist der Name des Repositorybranchs, den dieses heruntergeladene Verzeichnis Momentaufnahme darstellt. Es ist möglich, auf GitHub zu einem anderen Branch zu wechseln und dann herunterzuladen, WebView2Samples-smoketest-1.0.1054.27-prerelease-testing.zipz. B. . In diesem Fall ist die heruntergeladene .zip Datei eine Momentaufnahme des smoketest-1.0.1054.27-prerelease-testing Branchs des Repositorys. In dieser Dokumentation wird davon ausgegangen, dass Sie den main Branch des Repositorys heruntergeladen haben.
Empfohlen: Benennen Sie das Stammverzeichnis von in WebView2Samples-main um WebView2Samples, um dem Namen und Pfad des Repositorys 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 Momentaufnahme Kopie 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 (oder das WebView2Browser Repository) zu klonen, müssen Sie zuerst Git installieren. Sie können das Repository wie oben beschrieben herunterladen oder klonen.

Installieren von Git

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

Öffnen Sie das WebView2Samples-Repository in einem neuen Fenster oder einer neuen Registerkarte.
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).
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 Ihrem lokalen Laufwerk. Führen Sie dazu die unten angegebenen Schritte 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 Ihrem lokalen Laufwerk zu klonen:

Wählen Sie in Visual StudioDatei-Klonrepository> aus.
Geben Sie die URL ein, die Sie aus dem GitHub-Repository kopiert haben.
Im selben Dialogfeld oder in einem Datei-Explorer-Hilfsprogramm können Sie einen universellen 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 z. B. das Repository im übergeordneten Ordner erstellen: C:\Users\myUserName\Documents\GitHub\, damit beim 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 von GitHub Desktop

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

Installieren Sie GitHub Desktop.
Wählen Sie in GitHub Desktop Datei>klonenRepository aus.
Geben Sie in Visual Studio oder GitHub Desktop die URL ein, die Sie aus dem GitHub-Repository kopiert haben.
Im selben Dialogfeld oder in einem Datei-Explorer-Hilfsprogramm können Sie einen universellen 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 z. B. das Repository im übergeordneten Ordner erstellen: C:\Users\myUserName\Documents\GitHub\, damit beim 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:

Klonen Sie das Repository auf Ihrem lokalen 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
```
Das Verzeichnis wird auf Ihrem lokalen Laufwerk in dem pfad erstellt, den Sie angegeben haben, z. B. in der folgenden Abbildung:

Sie haben das Repository auf Ihr lokales Laufwerk geklont.

Siehe auch:

Klonen eines Repositorys : GitHub-Dokumentation.
Herunterladen oder Klonen des Demos-Repositorys in Beispielcode für DevTools.
Schritt 6: Einrichten eines localhost-Servers unter Installieren der DevTools-Erweiterung für Visual Studio Code.

Öffnen einer WebView2Samples-.sln-Datei in Visual Studio

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

Suchen Sie in Ihrer lokalen Kopie der Repositoryverzeichnisstruktur nach einer .sln Datei. Die README-Datei der obersten Ebene im WebView2Samples-Repository bietet eine ähnliche Übersicht.
Öffnen Sie eine .sln Datei in Visual Studio. Öffnen Sie beispielsweise Ihre lokale Kopie von WebView2Samples.sln. Die Projektmappendateien dieses Repositorys erfordern Visual Studio und nicht Visual Studio Code.
Öffnen Sie eine der .sln Dateien. Öffnen Sie beispielsweise Ihre lokale Kopie der Standard Win32-Projektmappendatei WebView2Samples/SampleApps/WebView2Samples.sln (als Pfad WebView2Samples-main/SampleApps/WebView2Samples.slnheruntergeladen) in Microsoft Visual Studio. Wenn Sie diese Projektmappendatei in Visual Studio öffnen, enthält Projektmappen-Explorer die folgenden Projekte:

Für die allgemeine, anfängliche Einrichtung der .sln 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 Tutorials 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 das Dialogfeld "Kann nicht geöffnet" angezeigt.

Klicken Sie auf die Schaltfläche OK . Dann wird möglicherweise ein Workloadinstallationsprogramm angezeigt, z. B.:

.
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:

.

Möglicherweise wird eine Protokolldateiseite für den Migrationsbericht geöffnet, z. B. unter file:///C:/Users/username/Documents/WebView2Samples-main/WebView2Samples-main/SampleApps/UpgradeLog.htm:

Klicken Sie zum Zoomen mit der rechten Maustaste auf >Bild in neuer 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:

Installieren oder Aktualisieren 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, in dem es installiert ist.

Anstatt das Microsoft.Web.WebView2 SDK-NuGet-Paket von nuget.org herunterzuladen, installieren Sie das WebView2 SDK NuGet-Paket über den Bereich NuGet-Paket-Manager in Visual Studio. Nachdem Sie das WebView2Samples-Repository geklont oder heruntergeladen haben, öffnen Sie eine der Dateien des Repositorys .sln in Visual Studio, und klicken Sie mit der rechten Maustaste auf einen Projektknoten in der Projektmappe. 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. Für den Einstieg wird eine Releaseversion empfohlen.

Installieren oder aktualisieren Sie das Release- oder Vorabversions-WebView2 SDK wie folgt:

Öffnen Sie eine .sln Datei in Visual Studio. Öffnen Sie beispielsweise Ihre lokale Kopie von WebView2Samples.sln. Die Projektmappendateien dieses Repositorys erfordern Visual Studio und nicht Visual Studio Code.
Klicken Sie in Projektmappen-Explorer mit der rechten Maustaste auf die Projektknoten der Projektmappe, z. B. den Projektknoten WebView2GettingStarted (nicht den Projektmappenknoten), und wählen Sie dann NuGet-Pakete verwalten aus.

Die folgende Abbildung zeigt eine bestimmte .sln Datei und projekt; Verwenden Sie das Projekt, für das Sie das SDK installieren möchten:

Die Registerkarte NuGet-Paket-Manager wird in Visual Studio geöffnet.
Klicken Sie im NuGet-Fenster auf die Registerkarte Durchsuchen .
Deaktivieren Sie auf der rechten Seite der Suchleiste das Kontrollkästchen Vorabversion einschließen , oder legen Sie es fest, wenn Sie eine Vorabversion des SDK wünschen, die experimentelle APIs enthält.
Geben Sie in der Suchleiste oben links Microsoft.Web.WebView2 ein.
Klicken Sie unter der Suchleiste auf die Karte Microsoft.Web.WebView2.
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.

Klicken Sie zum Zoomen mit der rechten Maustaste auf >Bild in neuer Registerkarte öffnen.
Schließen Sie die Registerkarte NuGet-Paket-Manager .

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