Erste Schritte mit WebView2 (Entwicklervorschau)

Der folgende Inhalt führt Sie durch die häufig verwendeten Funktionen von WebView2 (Developer Preview) und stellt einen Ausgangspunkt zum Erstellen Ihrer ersten WebView2-App bereit. Weitere Informationen zu einzelnen WebView2-APIs finden Sie unter API-Referenz.

Voraussetzungen

  • Microsoft Edge (Chrom) ist auf unterstützten Betriebssystemen installiert \ (derzeit Windows 10, Windows 8,1 und Windows 7).

    Hinweis

    Das WebView-Team empfiehlt die Verwendung des Canary-Kanals, und die erforderliche Mindestversion ist 82.0.488.0.

  • Visual Studio 2015 oder höher mit installierter C++-Unterstützung.

Schritt 1 – Erstellen einer Win32-App für ein einzelnes Fenster

Beginnen Sie mit einem einfachen Desktopprojekt, das ein einzelnes Hauptfenster enthält. Um die exemplarische Vorgehensweise besser zu fokussieren, verwenden Sie den geänderten Beispielcode aus Exemplarische Vorgehensweise: Erstellen einer herkömmlichen Windows-Desktop Anwendung (C++) für Ihre Beispiel-app. Informationen zum Herunterladen des geänderten Beispiels und erste Schritte finden Sie unter WebView2-Beispiele.

Öffnen Sie in Visual Studio WebView2GettingStarted.sln . Wenn Sie eine ältere Version von Visual Studio verwenden, zeigen Sie mit der Maus auf das WebView2GettingStarted -Projekt, öffnen Sie das Kontextmenü \ (Klicken Sie mit der rechten Maustaste auf ), und wählen Sie Eigenschaftenaus. Ändern Sie unter Konfigurationseigenschaften > Allgemeindie Windows SDK-Version und das Platform-Toolset , um das Win10-SDK und das Visual Studio-Toolset \ (vs Toolset ) zu verwenden, das Ihnen zur Verfügung steht.

Tool Version

Tool Version

In Visual Studio werden möglicherweise Fehler aufgrund fehlender WebView2-Headerdatei angezeigt, die nach Abschluss von Schritt 2 verschwinden sollten.

Schritt 2 – Installieren des WebView2 SDK

Fügen Sie das WebView2-SDK in das Projekt ein. Für die Entwicklervorschau können Sie das Win32-SDK mithilfe von Nuget installieren.

  1. Zeigen Sie mit der Maus auf das Projekt, öffnen Sie das Kontextmenü \ (Klicken Sie mit der rechten Maustaste auf ), und wählen Sie Nuget-Pakete verwaltenaus.

    Verwalten von Nuget-Paketen

    Verwalten von Nuget-Paketen

  2. Installieren Sie die Windows-Implementierungs Bibliothek.

    1. Geben Sie Microsoft.Windows.ImplementationLibrary in der Suchleiste Microsoft. Windows. ImplementationLibrary aus den Ergebnissen ein, und wählen Sie im rechten Fenster Installieren aus. Nuget downloadet das SDK auf Ihren Computer.

      Hinweis

      Die Windows-Implementierungs Bibliothek und die Windows-Runtime-C++-Vorlagenbibliothek sind optional und wurden hinzugefügt, um die Arbeit mit com für das Beispiel zu vereinfachen.

      Windows-Implementierungs Bibliothek

      Windows-Implementierungs Bibliothek

  3. Installieren Sie das WebView2-SDK.

    1. Geben Sie Microsoft.Web.WebView2 in der Suchleiste Microsoft. Web. WebView2 aus den Ergebnissen ein, und wählen Sie im rechten Fenster Installieren aus. Nuget downloadet das SDK auf Ihren Computer.

      Nuget

      Nuget

  4. Fügen Sie WebView2-Kopfzeile zu Ihrem Projekt hinzu.

    Öffnen HelloWebView.cpp , kopieren Sie den folgenden Codeausschnitt, und fügen Sie ihn HelloWebView.cpp nach der letzten #include Zeile ein.

    // include WebView2 header
    #include "WebView2.h"
    

    Der Abschnitt include sollte ähnlich wie der folgende Codeausschnitt aussehen.

    ...
    #include <wrl.h>
    #include <wil/com.h>
    // include WebView2 header
    #include "WebView2.h"
    

Sie sind für die Verwendung und Erstellung von WebView2-APIs eingestellt.

Erstellen der leeren Beispiel-App

Drücken Sie F5 , um die Beispiel-APP zu erstellen und auszuführen. Es sollte eine App angezeigt werden, die ein leeres Fenster anzeigt.

Leere App

Leere App

Schritt 3 – Erstellen einer einzelnen WebView im übergeordneten Fenster

Fügen Sie dem Hauptfenster eine WebView hinzu. Verwenden Sie die CreateCoreWebView2Environment Methode zum Einrichten der Umgebung, und suchen Sie den Microsoft Edge \ (Chrom )-Browser, der das Steuerelement steuert. Sie können die Methode auch verwenden, CreateCoreWebView2EnvironmentWithOptions Wenn Sie den Browser Speicherort, den Benutzerordner, die Browser Kennzeichnung usw. angeben möchten, anstatt die Standardeinstellung zu verwenden. Nach Abschluss der CreateCoreWebView2Environment Methode können Sie die ICoreWebView2Environment::CreateCoreWebView2Controller Methode innerhalb des ICoreWebView2CreateCoreWebView2EnvironmentCompletedHandler Rückrufs ausführen und die Methode ausführen, ICoreWebView2Controller::get_CoreWebView2 um die zugeordnete WebView abzurufen.

Legen Sie im Rückruf einige zusätzliche Einstellungen an, ändern Sie die Größe der WebView, um 100% des übergeordneten Fensters zu übernehmen, und navigieren Sie zu Bing.

Kopieren Sie den folgenden Codeausschnitt, und fügen Sie ihn HelloWebView.cpp nach der // <-- WebView2 sample code starts here --> Notiz und vor der // <-- WebView2 sample code ends here --> Notiz ein.

// Step 3 - Create a single WebView within the parent window
// Locate the browser and set up the environment for WebView
CreateCoreWebView2EnvironmentWithOptions(nullptr, nullptr, nullptr,
    Callback<ICoreWebView2CreateCoreWebView2EnvironmentCompletedHandler>(
        [hWnd](HRESULT result, ICoreWebView2Environment* env) -> HRESULT {
        
            // Create a CoreWebView2Controller and get the associated CoreWebView2 whose parent is the main window hWnd
            env->CreateCoreWebView2Controller(hWnd, Callback<ICoreWebView2CreateCoreWebView2ControllerCompletedHandler>(
                [hWnd](HRESULT result, ICoreWebView2Controller* controller) -> HRESULT {
                if (controller != nullptr) {
                    webviewController = controller;
                    webviewController->get_CoreWebView2(&webviewWindow);
                }
                
                // Add a few settings for the webview
                // this is a redundant demo step as the values are the default settings
                ICoreWebView2Settings* Settings;
                webviewWindow->get_Settings(&Settings);
                Settings->put_IsScriptEnabled(TRUE);
                Settings->put_AreDefaultScriptDialogsEnabled(TRUE);
                Settings->put_IsWebMessageEnabled(TRUE);
                
                // Resize WebView to fit the bounds of the parent window
                RECT bounds;
                GetClientRect(hWnd, &bounds);
                webviewController->put_Bounds(bounds);
                
                // Schedule an async task to navigate to Bing
                webviewWindow->Navigate(L"https://www.bing.com/");
                
                // Step 4 - Navigation events
                
                // Step 5 - Scripting
                
                // Step 6 - Communication between host and web content
                
                return S_OK;
            }).Get());
        return S_OK;
    }).Get());

Erstellen einer Bing-Beispiel-App

Drücken Sie F5 , um die APP zu erstellen und auszuführen. Nun wird ein WebView-Fenster mit der Bing-Seite angezeigt.

Bing-Fenster

Bing-Fenster

Schritt 4 – Navigationsereignisse

Das WebView-Team hat bereits die Navigation zur URL unter Verwendung der ICoreWebView2::Navigate Methode im letzten Schritt abgedeckt. Während der Navigation löst WebView eine Abfolge von Ereignissen aus, an die der Host möglicherweise lauscht.

  1. NavigationStarting
  2. SourceChanged
  3. ContentLoading
  4. HistoryChanged
  5. NavigationCompleted

Weitere Informationen finden Sie unter Navigationsereignisse.

Navigationsereignisse

Navigationsereignisse

In Fehlerfällen können eines oder mehrere der folgenden Ereignisse auftreten, je nachdem, ob die Navigation auf einer Fehlerseite fortgesetzt wird.

  • SourceChanged
  • ContentLoading
  • HistoryChanged

Im Fall einer HTTP-Umleitung gibt es mehrere NavigationStarting Ereignisse in einer Zeile.

Als Beispiel für die Verwendung der Ereignisse registrieren Sie einen Handler für das NavigationStarting Ereignis, um nicht-HTTPS-Anforderungen abzubrechen. Kopieren Sie den folgenden Codeausschnitt, und fügen Sie ihn in ein HelloWebView.cpp .

// register an ICoreWebView2NavigationStartingEventHandler to cancel any non-https navigation
EventRegistrationToken token;
webviewWindow->add_NavigationStarting(Callback<ICoreWebView2NavigationStartingEventHandler>(
    [](ICoreWebView2* webview, ICoreWebView2NavigationStartingEventArgs * args) -> HRESULT {
        PWSTR uri;
        args->get_Uri(&uri);
        std::wstring source(uri);
        if (source.substr(0, 5) != L"https") {
            args->put_Cancel(true);
        }
        CoTaskMemFree(uri);
        return S_OK;
    }).Get(), &token);

Jetzt wird die APP nicht zu allen nicht-HTTPS-Websites navigiert. Sie können einen ähnlichen Mechanismus verwenden, um andere Aufgaben auszuführen, wie etwa das Einschränken der Navigation in ihrer eigenen Domäne.

Schritt 5 – Skripting

Die Host-App kann auch JavaScript in WebView einfügen. Sie können Aufgaben-WebView ausführen, um beliebiges JavaScript auszuführen oder Initialisierungsskripts hinzuzufügen. Hinzugefügte Initialisierungsskripts gelten für alle zukünftigen Dokument-und untergeordneten Frame-Navigationselemente auf oberster Ebene, bis Sie entfernt werden, und führen Sie nach dem Erstellen des globalen Objekts und vor dem Ausführen anderer Skripts, die im HTML-Dokument enthalten sind.

Kopieren Sie den folgenden Codeausschnitt, und fügen Sie ihn in ein HelloWebView.cpp .

// Schedule an async task to add initialization script that freezes the Object object
webviewWindow->AddScriptToExecuteOnDocumentCreated(L"Object.freeze(Object);", nullptr);
// Schedule an async task to get the document URL
webviewWindow->ExecuteScript(L"window.document.URL;", Callback<ICoreWebView2ExecuteScriptCompletedHandler>(
    [](HRESULT errorCode, LPCWSTR resultObjectAsJson) -> HRESULT {
        LPCWSTR URL = resultObjectAsJson;
        //doSomethingWithURL(URL);
        return S_OK;
    }).Get());

WebView sollte das Objekt nun immer fixieren Object und das Seiten Dokument einmal zurückgeben.

Hinweis

Die Skript Injektions-APIs \ (und einige andere WebView2-APIs ) sind asynchron, Sie sollten Rückrufe verwenden, wenn Code in einer bestimmten Reihenfolge ausgeführt werden muss.

Schritt 6 – Kommunikation zwischen Host-und Webinhalten

Der Host und der Webinhalt können über die Methode auch miteinander kommunizieren postMessage . Die Webinhalte, die in einer WebView ausgeführt werden, können über die Methode an den Host gesendet werden window.chrome.webview.postMessage , und die Nachricht wird von jedem registrierten ICoreWebView2WebMessageReceivedEventHandler Ereignishandler auf dem Host verarbeitet. Ebenso kann der Host den Webinhalt über oder die ICoreWebView2::PostWebMessageAsString ICoreWebView2::PostWebMessageAsJSON Methode Nachrichten, die von Handlern abgefangen wird, die vom Listener hinzugefügt werden window.chrome.webview.addEventListener . Mithilfe des Kommunikationsmechanismus können Webinhalte systemeigene Funktionen verwenden, indem Sie Nachrichten übergeben, um den Host zu bitten, systemeigene APIs aufzurufen.

Als Beispiel, um den Mechanismus zu verstehen, treten die folgenden Schritte auf, wenn Sie versuchen, die Dokument-URL in WebView zu drucken.

  1. Der Host registriert einen Handler, um die empfangene Nachricht zurück an den Webinhalt zurückzugeben
  2. Der Host injiziert einem Webinhalt ein Skript, das einen Handler registriert, um eine Nachricht vom Host zu drucken.
  3. Der Host injiziert einem Webinhalt ein Skript, das die URL an den Host sendet.
  4. Der Handler des Hosts wird ausgelöst und gibt die Nachricht \ (die URL ) an den Webinhalt zurück.
  5. Der Handler des Webinhalts wird ausgelöst, und die Nachricht wird vom Host \ (der URL ) gedruckt.

Kopieren Sie den folgenden Codeausschnitt, und fügen Sie ihn in ein HelloWebView.cpp .

// Set an event handler for the host to return received message back to the web content
webviewWindow->add_WebMessageReceived(Callback<ICoreWebView2WebMessageReceivedEventHandler>(
    [](ICoreWebView2* webview, ICoreWebView2WebMessageReceivedEventArgs * args) -> HRESULT {
        PWSTR message;
        args->TryGetWebMessageAsString(&message);
        // processMessage(&message);
        webview->PostWebMessageAsString(message);
        CoTaskMemFree(message);
        return S_OK;
    }).Get(), &token);

// Schedule an async task to add initialization script that
// 1) Add an listener to print message from the host
// 2) Post document URL to the host
webviewWindow->AddScriptToExecuteOnDocumentCreated(
    L"window.chrome.webview.addEventListener(\'message\', event => alert(event.data));" \
    L"window.chrome.webview.postMessage(window.document.URL);",
nullptr);

Erstellen einer Beispiel-App für die Show-URL

Drücken Sie F5 , um die APP zu erstellen und auszuführen. Sie sollten die URL in einem Popupfenster sehen, bevor Sie zu einer Seite navigieren.

URL anzeigen

URL anzeigen

Herzlichen Glückwunsch, Sie haben soeben Ihre erste WebView2-App erstellt!

Nächste Schritte

Viele der WebView2-Funktionen, die auf dieser Seite nicht behandelt werden, im folgenden Abschnitt wurden zusätzliche Ressourcen bereitgestellt.

Weitere Informationen

  • Ein umfassendes Beispiel für WebView2-Funktionen finden Sie unter Beispiel für die WebView2-API.
  • Eine Beispielanwendung, die mit WebView2 erstellt wurde, finden Sie unter WebView2Browser.
  • Ausführliche Informationen zur WebView2-API finden Sie unter API-Referenz.

Kontakt mit dem WebView2-Team

Helfen Sie, ein reicheres WebView2-Erlebnis zu schaffen, indem Sie Ihr Feedback austauschen! Besuchen Sie das Feedback-Repo auf GitHub, um Funktionsanforderungen oder Fehlerberichte zu übermitteln oder nach bekannten Problemen zu suchen.