Freigeben über

Visual Studio-Installationsprogramm für die WebView2-Bereitstellung

  • Artikel

In diesem Beispiel, WV2DeploymentVSInstallerSample, wird veranschaulicht, wie Eine WebView2-App mithilfe des Visual Studio-Installers bereitgestellt wird.

  • Beispielname: WV2DeploymentVSInstallerSample
  • Repositoryverzeichnis: WV2DeploymentVSInstallerSample
  • Lösungsdatei: Im Repository nicht angegeben. In den folgenden Schritten erstellen Sie eine Projektmappendatei.

In diesem Artikel wird die Verwendung der Microsoft Visual Studio-Installer Project-Erweiterung für Visual Studio beschrieben, um zu veranschaulichen, wie Sie die Evergreen WebView2-Runtime mit Ihrer App bereitstellen. Sie erstellen ein Projekt vom Typ SetupProjekt, um ein Installationsprogramm für die Win32-Beispiel-App (WebView2APISample) zu erstellen. Dieses Installationsprogramm, das Sie erstellen, installiert die Evergreen WebView2 Runtime.

Sie bearbeiten zuerst die project.xml Datei aus dem Repository und erstellen dann in Visual Studio ein neues Projekt, indem Sie die Projektvorlage Projekt einrichten aus der Microsoft Visual Studio-Installer Projects-Erweiterung verwenden.

In diesem Beispiel werden verschiedene Bereitstellungsansätze veranschaulicht:

  • Herunterladen des Evergreen WebView2 Runtime Bootstrappers über einen Link.
  • Packen des Evergreen WebView2 Runtime Bootstrappers mit Ihrer App
  • Packen des eigenständigen Installers für Evergreen WebView2 Runtime mit Ihrer App

Informationen zu diesen verschiedenen Ansätzen finden Sie unter Deploying the Evergreen WebView2 Runtime in Distribute your app and the WebView2 Runtime.For information about these different approaches, see Deploying the Evergreen WebView2 Runtime in Distribute your app and the WebView2 Runtime.

Schritt 1: Erstellen und Ausführen von WebView2APISample

Um sich mit der App vertraut zu machen, die in diesem Beispiel verteilt wird, und um sicherzustellen, dass Ihre Umgebung für die allgemeine Win32 WebView2-App-Entwicklung eingerichtet ist, erstellen und führen Sie die Win32-Beispiel-App (WebView2APISample) aus, bevor Sie dieses Bereitstellungsbeispiel verwenden.

  1. Führen Sie die Schritte unter Win32-Beispiel-App (WebView2APISample) aus, und fahren Sie dann weiter unten fort.

Voraussetzung: Wie auf der obigen Seite angegeben, ist Microsoft Visual Studio erforderlich, einschließlich C++-Unterstützung. Microsoft Visual Studio Code wird für dieses WV2DeploymentVSInstallerSample-Beispiel nicht unterstützt.

Auf der obigen Seite können Sie das WebView2Samples-Repository klonen oder herunterladen und Visual Studio mit C++-Unterstützung installieren, falls noch nicht geschehen.

Schritt 2: Installieren von Visual Studio-Installer Projects

Falls noch nicht geschehen, installieren Sie Visual Studio-Installer Projects:

  1. Installieren Sie Microsoft Visual Studio-Installer Projects für Visual Studio 2019. Führen Sie die Schritte auf dieser Seite aus, kehren Sie dann zu dieser Seite zurück, und fahren Sie mit den folgenden Schritten fort.

VSIX Installer Visual Studio-Installer Projects 2019

Wenn das Dialogfeld Warten auf die folgenden Prozesse zum Herunterfahren angezeigt wird, schließen Sie Visual Studio.

Schritt 3: Bearbeiten product.xml zum Konfigurieren der Verteilung der WebView2-Runtime

  1. Öffnen Sie Visual Studio. Im Öffnen des Bildschirms können Sie unten rechts auf den Link Ohne Code fortfahren klicken.

  2. Öffnen Sie die folgende einzelne Datei, die sich in Ihrer lokalen Kopie des Repositorys befindet: <repo-location>\WebView2Samples\SampleApps\WV2DeploymentVSInstallerSample\product.xml

    Speicherort der Datei im Repository auf GitHub: SampleApps/WV2DeploymentVSInstallerSample/product.xml

    product.xml Datei, die unverändert zur Bearbeitung in Visual Studio 2019 geöffnet wurde

  3. Untersuchen Sie product.xml. Es gibt drei <PackageFile> Zeilen. Untersuchen Sie den Kommentar über jeder der drei Zeilen. Hier ist eine vereinfachte Ansicht der Zeilen mit Klarstellungen.

    Die erste <PackageFile> Zeile verwendet die Datei MicrosoftEdgeWebview2Setup.exe, bei der es sich um den Evergreen WebView2 Runtime Bootstrapper handelt, und gibt eine HomeSite Website an. Verwenden Sie diese Zeile für Ansatz 1: Herunterladen des Evergreen WebView2 Runtime Bootstrappers über einen Link:

    <!-- Download the MicrosoftEdgeWebview2Setup.exe -->
<!-- <PackageFile Name="MicrosoftEdgeWebview2Setup.exe" HomeSite="WebViewRuntime" PublicKey="..."/> -->

    In der zweiten <PackageFile> Zeile wird die Datei MicrosoftEdgeWebview2Setup.exeverwendet, bei der es sich um den Evergreen WebView2 Runtime Bootstrapper handelt. Verwenden Sie diese Zeile für Ansatz 2: Packen des Evergreen WebView2 Runtime Bootstrappers mit der App:

    <!-- Package the MicrosoftEdgeWebview2Setup.exe -->
<PackageFile Name="MicrosoftEdgeWebview2Setup.exe" />

    Die dritte <PackageFile> Zeile verwendet die Datei MicrosoftEdgeWebView2RuntimeInstallerX64.exe, bei der es sich um einen plattformspezifischen eigenständigen Installer für Evergreen WebView2 Runtime handelt. Verwenden Sie diese Zeile für Ansatz 3: Packen des eigenständigen Evergreen WebView2 Runtime-Installers mit Ihrer App:

    <!-- Package the WebView Standalone Installer -->
<!-- <PackageFile Name="MicrosoftEdgeWebView2RuntimeInstallerX64.exe" /> -->

  4. Ermitteln Sie, welchen Ansatz Sie verwenden. Ansatz 2 ist die Standardeinstellung. Das heißt, die Zeile für die Verwendung von Ansatz 2 ist in der Datei des Repositorys product.xml nicht auskommentiert.

  5. Bearbeiten Sie product.xml, wie folgt. Führen Sie die Schritte in einem der drei folgenden Abschnitte aus.

Wenn Die App den Evergreen WebView2 Runtime Bootstrapper (MicrosoftEdgeWebview2Setup.exe) über einen Link herunterladen soll:

  1. Heben Sie innerhalb des Abschnitts <PackageFiles CopyAllPackageFiles="false"> den Kommentar für die folgende Zeile auf (behalten Sie den langen Wert für den öffentlichen Schlüssel bei), und kommentieren Sie die anderen Zeilen aus:

    <PackageFile Name="MicrosoftEdgeWebview2Setup.exe" HomeSite="WebViewRuntime" PublicKey="..."/>

  2. Der PublicKey Wert für den WebView2 Runtime Bootstrapper kann ohne Vorheriges geändert werden. Wir arbeiten daran, dieses Problem zu beheben. Vorerst müssen Sie es möglicherweise in product.xml durch einen aktualisierten PublicKey Wert ersetzen.

  3. <Commands Reboot="Defer"> Stellen Sie im Abschnitt und </Commands> sicherPackageFile, dass auf "MicrosoftEdgeWebview2Setup.exe" verweist, damit das Visual Studio-Installationsprogramm den Bootstrapper verwendet.

  4. Speichern Sie die Datei.

Ansatz 2: Packen des Evergreen WebView2 Runtime Bootstrappers mit der App

Wenn Sie den Evergreen WebView2 Runtime Bootstrapper (MicrosoftEdgeWebview2Setup.exe) mit der App packen möchten:

  1. Heben Sie innerhalb des Abschnitts <PackageFiles CopyAllPackageFiles="false"> den Kommentar für die folgende Zeile auf, und kommentieren Sie die anderen Zeilen aus:

    <PackageFile Name="MicrosoftEdgeWebview2Setup.exe" />

  2. <Commands Reboot="Defer"> Stellen Sie im Abschnitt sicherPackageFile, dass auf "MicrosoftEdgeWebview2Setup.exe" verweist, damit der Visual Studio-Installer den Bootstrapper verwendet.

  3. Speichern Sie die Datei.

Ansatz 3: Packen des eigenständigen Installers für Evergreen WebView2 Runtime mit Ihrer App

Wenn Sie den eigenständigen Installer für evergreen WebView2 Runtime mit der App packen möchten:

  1. Heben Sie innerhalb des Abschnitts <PackageFiles CopyAllPackageFiles="false"> den Kommentar für die folgende Zeile auf, und kommentieren Sie die anderen Zeilen aus:

    <PackageFile Name="MicrosoftEdgeWebView2RuntimeInstallerX64.exe" />

  2. Stellen Sie in den <Commands Reboot="Defer"> Abschnitten und </Commands> sicher PackageFile , dass auf "MicrosoftEdgeWebView2RuntimeInstallerX64.exe" verweist, damit das Visual Studio-Installationsprogramm den eigenständigen Installer verwendet.

  3. Wenn Sie Nicht-X64-Geräte als Ziel verwenden, bearbeiten Sie den MicrosoftEdgeWebView2RuntimeInstallerX64 Dateinamen, um die richtige Architektur widerzuspiegeln.

  4. Speichern Sie die Datei.

Schritt 4: Herunterladen des WebView2-Bootstrappers oder des eigenständigen Installers

Wenn Sie entweder den Bootstrapper (Ansatz 2) oder den eigenständigen Installer (Ansatz 3) mit der App packen möchten, führen Sie die Schritte in diesem Abschnitt aus. Fahren Sie andernfalls mit dem nächsten Hauptschrittabschnitt fort.

  1. Laden Sie den Microsoft Edge WebView2-Bootstrapper oder den eigenständigen Installer herunter.

  2. Speichern Sie den heruntergeladenen Bootstrapper oder das eigenständige Installationsprogramm unter dem <repo-location>\WebView2Samples\SampleApps\WV2DeploymentVSInstallerSample\ Ordner.

Schritt 5: Kopieren des Ordners WV2DeploymentVSInstallerSample in einen Paketordner

Dieser Schritt gilt für alle Ansätze (1, 2 oder 3).

  1. Kopieren Sie den <repo-location>\WebView2Samples\SampleApps\WV2DeploymentVSInstallerSample\ Ordner, und fügen Sie ihn in einen der folgenden Ordner ein:

    • <drive>:\Program Files (x86)\Microsoft SDKs\ClickOnce Bootstrapper\Packages\

    • <Visual Studio install dir>\MSBuild\Microsoft\VisualStudio\BootstrapperPackages\ (erfordert mindestens Visual Studio 2019 Update 7)

    Typischer Pfad für <Visual Studio install dir>:

    • C:\Program Files (x86)\Microsoft Visual Studio\2019\Professional\Common7\IDE\

Schritt 6: Erstellen eines Setupprojekts in Visual Studio

  1. Klicken Sie in Visual Studio auf Datei>Neu>Projekt. Das Fenster Neues Projekt erstellen wird angezeigt.

  2. Geben Sie im Textfeld Nach Vorlagen suchen den Text Setupprojekt ein, und wählen Sie dann die Vorlage Projekt einrichten aus. Stellen Sie sicher, dass Sie die Vorlage mit dem Namen genau wie unten gezeigt auswählen:

    WebView2-Bereitstellungs-Visual Studio-Installer: Setupprojekt erstellen

  3. Klicken Sie auf die Schaltfläche Weiter .

    Das Dialogfeld Neues Projekt konfigurieren: Projekt einrichten wird wie unten gezeigt geöffnet.

  4. Geben Sie im Textfeld Projektname einen Namen ein, z. B. MyWin32WV2DeploySample.

  5. Navigieren Sie im Textfeld Speicherort zu einem Speicherort, der sich nicht in einem anderen Projektverzeichnis befindet, z <repo-path>\WebView2Samples\ . B. oder zu einem Speicherort, der sich nicht im Repositoryverzeichnis befindet.

    Konfigurieren eines neuen Projekts

  6. Klicken Sie auf die Schaltfläche Erstellen.

    Neues leeres Bereitstellungsprojekt (2019)

Schritt 7: Hinzufügen von WebView2 Runtime als Voraussetzung

  1. Klicken Sie in Visual Studio in Projektmappen-Explorer mit der rechten Maustaste auf Ihr Projekt, und wählen Sie dann Eigenschaften aus. Das Dialogfeld Eigenschaftenseiten wird geöffnet.

  2. Klicken Sie auf die Schaltfläche Voraussetzungen :

    WebView2-Bereitstellungs-Visual Studio-Installer: Voraussetzungen einrichten

  3. Aktivieren Sie das Kontrollkästchen Edge WebView2 Runtime .

    Wenn dieses Kontrollkästchen nicht aufgeführt ist, kann dies darauf hindeuten, dass eine erforderliche Datei nicht in einem Paketordner abgelegt wurde. Überprüfen Sie, welchen Ansatz Sie verwenden. Möglicherweise müssen Sie die obigen Schritte in den Abschnitten Schritt 4 – Herunterladen des WebView2-Bootstrappers oder des eigenständigen Installers und Schritt 5– Kopieren des Ordners WV2DeploymentVSInstallerSample in einen Ordner Packages ausführen.

  4. Deaktivieren Sie die anderen Kontrollkästchen für erforderliche Komponenten. Klicken Sie dann auf die Schaltfläche OK :

    WebView2-Bereitstellungs-Visual Studio-Installer: Wählen Sie Voraussetzung aus.

Schritt 8: Erstellen des Setupprojekts

  1. Drücken Sie F5 , um das Setupprojekt zu speichern und zu erstellen.

Siehe auch