Пример приложения Win32

Приложение WebView2APISample демонстрирует использование элемента управления WebView2 и API WebView2 для добавления функций в приложение Win32 C++. Это пример main Win32, который содержит тестовые веб-страницы для новейших функций и API, а также сотни menuitem для тестирования различных API.

• Имя примера: WebView2APISample
• Каталог репозитория: WebView2APISample
• Файл решения: WebView2Samples.sln (находится в родительском каталоге, \SampleApps\)
• Имя проекта в Обозреватель решений: WebView2APISample

WebView2APISample внедряет элемент управления WebView2 в собственное приложение Win32.

В этом примере используется C++ и HTML,CSS/JavaScript в среде WebView2.

WebView2APISample демонстрирует ряд обработчиков событий WebView2 и методов API, которые позволяют собственному приложению Win32 напрямую взаимодействовать с элементом управления WebView2 и наоборот.

Этот пример и файл решения уникальны: он содержит копию других примеров в Обозреватель решений.

WebView2APISample — это гибридное приложение, созданное с помощью элемента управления WebView2 Microsoft Edge; то есть это приложение сочетает в себе собственную сторону и сторону веб-приложения браузера. См. раздел Подход к гибридному приложению в статье Общие сведения о Microsoft Edge WebView2.

В окне запущенного приложения WebView2APISample отображается версия пакета SDK для WebView2, а также версия и путь к среде выполнения WebView2. Существует множество полезных меню и элементов меню для тестирования и демонстрации API WebView2.

Последовательность статей

Чтобы приступить к изучению WebView2, используйте предлагаемую последовательность статей и примеров проектов:

1. Получите эту программу WebView2APISample для сборки и запуска с помощью этой статьи, даже если ваше приложение предназначено для другой платформы.

2. Если вы больше всего заинтересованы в платформе, отличной от Win32, используйте пример статьи для своей платформы. См . раздел Примеры приложений.

3. Используйте статью Начало работы для интересующей вас платформы; См. руководства по начало работы.

Шаг 1. Установка Visual Studio 2022

1. Нажмите клавишу Windows , введите Visual Studio 2022 и нажмите кнопку Открыть.

   Откроется диалоговое окно Открыть последнюю версию Visual Studio.

   Microsoft Visual Studio Code не поддерживается в этом примере.

2. Если Visual Studio 2022 не установлен, перейдите на страницу Visual Studio 2022 и нажмите кнопку Скачать visual Studio со списком.

Перейдите к следующему шагу: Шаг 2. Клонирование репозитория WebView2Samples.

Более старые версии Visual Studio

Также поддерживаются Visual Studio 2019 и 2017.

Visual Studio 2019

Этот пример был создан в Visual Studio 2019 в качестве проекта Visual Studio 2019. Чтобы открыть проект этого примера как есть, можно использовать Visual Studio 2019.

Visual Studio 2017

Если вы хотите открыть этот пример с помощью Visual Studio 2017:

1. Откройте решение в Visual Studio 2017.

2. Измените набор инструментов платформы проекта в разделе Свойства > проекта Свойства проекта Свойства > конфигурации Общие > набор инструментов платформы.

3. Также может потребоваться установить на компьютере последние Windows SDK.

Шаг 2. Клонирование репозитория WebView2Samples

1. Нажмите клавиши Windows+E.

   Откроется окно проводник.

2. Перейдите к месту, где вы клонировали или планируете клонировать репозиторий WebView2Samples .

   Пример пути:

   C:\Users\localAccount\GitHub\WebView2Samples

3. Если это еще не сделано, клонируйте репозиторий на WebView2Samples локальный диск. В отдельном окне или вкладке см. статью Клонирование репозитория WebView2Samplesстатьи Настройка среды разработки для WebView2. Выполните действия, описанные в этом разделе, а затем вернитесь на эту страницу и продолжите работу ниже.

4. Если он еще не открыт, откройте командную строку git bash: нажмите клавишу Windows и введите git bash.

   Фиксации по запросу

5. Переключитесь в каталог клонированного репозитория:

   cd C:/Users/localAccount/GitHub/WebView2Samples`
   

   Замените путь, по которому вы клонировали репозиторий WebView2Samples .

6. Извлеките последние фиксации в локальную копию репозитория:

   git pull
   

   Создание рабочей ветви

7. Создайте рабочую ветвь и переключитесь на нее:

   git checkout -b test
   

   Возвращает: Switched to branch 'test'

Теперь вы можете изменять код в рабочей ветви, не изменяя код, который находится в ветви "main" репозитория. Позже вам может потребоваться вернуться к ветви "main", например, чтобы извлечь новые фиксации или создать другую ветвь на основе ветви "main".

Шаг 3. Открытие решения в Visual Studio

Открытие и сборка примера приведет к изменению примера. Рекомендуется избежать изменения кода в ветви "main", создав и переключившись на рабочую ветвь, что можно сделать в Visual Studio.

1. Нажмите клавишу Windows , введите Visual Studio 2022 и нажмите кнопку Открыть.

   Откроется диалоговое окно Открыть последнюю версию Visual Studio:

   

2. Нажмите кнопку Продолжить без кода в правом нижнем углу.

3. В Visual Studio 2022 выберите Файл>Открыть>проект или решение.

   Откроется диалоговое окно Открыть проект или решение .

4. Перейдите к файлу WebView2Samples\SampleApps\WebView2Samples.sln и нажмите кнопку Открыть .

   Пример пути:

   C:\Users\localAccount\GitHub\WebView2Samples\SampleApps\WebView2Samples.sln
   

   В отличие от некоторых других примеров, в каталоге репозитория примера нет выделенного .sln файла, содержащего файл readme этого примера. Вместо этого .sln файл для этого примера (включая другие примеры проектов) находится в родительском каталоге.

   Может открыться диалоговое окно Просмотр изменений проекта и решения :

   

5. Нажмите кнопку ОК .

   Решение откроется в Visual Studio:

   

Шаг 4. Обновление набора инструментов

Далее можно открыть диалоговое окно Проверка действий решения: перенацеливание проектов :

На этом снимку экрана показано следующее:

• Windows SDK версия:10.0 (последняя установленная версия)
• Набор инструментов платформы:обновление до версии 143

Эти параметры перечислены для этих проектов:

• WebView2APISample.vcxproj — настоящий, main пример.

• WebView2APISampleWinComp.vcxproj — другой пример.

• Если откроется это диалоговое окно, нажмите кнопку ОК .

  На панели Вывод в Visual Studio отображаются следующие результаты:

  Upgrading project 'WebView2APISample'...
  Configuration 'Debug|ARM64': changing Platform Toolset to 'v143' (was 'v142').
  Configuration 'Debug|Win32': changing Platform Toolset to 'v143' (was 'v142').
  Configuration 'Debug|x64': changing Platform Toolset to 'v143' (was 'v142').
  Configuration 'Release|Win32': changing Platform Toolset to 'v143' (was 'v142').
  Configuration 'Release|ARM64': changing Platform Toolset to 'v143' (was 'v142').
  Configuration 'Release|x64': changing Platform Toolset to 'v143' (was 'v142').
  Upgrading project 'WebView2SampleWinComp'...
  Configuration 'Debug|Win32': changing Platform Toolset to 'v143' (was 'v142').
  Configuration 'Debug|x64': changing Platform Toolset to 'v143' (was 'v142').
  Configuration 'Release|Win32': changing Platform Toolset to 'v143' (was 'v142').
  Configuration 'Release|x64': changing Platform Toolset to 'v143' (was 'v142').
  Retargeting End: 2 completed, 0 failed, 0 skipped
  

  В браузере откроется страница "Отчет о миграции ", например: file:///C:/Users/localAccount/GitHub/WebView2Samples/SampleApps/UpgradeLog.htm

Шаг 5. Обновление .NET

Продолжение выше. В Visual Studio в Обозреватель решений в правом верхнем углу может появиться сообщение: Этот проект предназначен для версии .NET, которая не установлена.

1. Если вы получите это сообщение, щелкните ссылку Установить рядом с сообщением.

   Откроется диалоговое окно Visual Studio Installer:

   

2. Нажмите кнопку Установить .

   Откроется диалоговое окно Контроль учетных записей пользователей .

3. Нажмите кнопку Да .

   В диалоговом окне Visual Studio Installer отображается ход загрузки и установки, а затем отображается сообщение Установка завершена.

4. Нажмите кнопку Закрыть .

   Диалоговое окно Visual Studio Installer закрывается.

   Обозреватель решений отображается без сообщения "Не установлен".

Шаг 6. Установка рабочей нагрузки C++ для Visual Studio

Далее: если при попытке сборки проекта появится запрос на установку рабочих нагрузок:

1. В Visual Studio выберите Сервис>Получить средства и компоненты.

   Откроется диалоговое окно Visual Studio Installer, а затем откроется диалоговое окно Изменение.

2. На вкладке Рабочие нагрузки выберите карта Разработка классических приложений на C++, чтобы на нем появилась галочка.

3. В разделе Сведения об установке справа разверните узел Разработка классических приложений на C++.

4. Нажмите кнопку Обновить или Установить .

   Установщик закроется.

См. также:

• Шаг 4. Установка рабочих нагрузок при появлении запроса в разделе Начало работы с WebView2 в приложениях Win32.
• Установите рабочие нагрузки Visual Studio в разделе Настройка среды разработки для WebView2.

Для продолжения установки WiX не требуется; для другого проекта в этом файле решения. Установка WiX описана в Пакете записи WiX для развертывания среды выполнения WebView2.

Шаг 7. Сборка и запуск с помощью пакета SDK более ранних версий

В верхней части Visual Studio задайте целевой объект сборки следующим образом:

1. В раскрывающемся списке Конфигурации решений выберите Отладка.

2. В раскрывающемся списке Платформы решений выберите x64.

3. В Обозреватель решений щелкните правой кнопкой мыши проект WebView2APISample и выберите Сборка.

   

   При этом создается файл SampleApps/WebView2APISample/WebView2APISample.vcxprojпроекта .

4. Выберите Отладка>Начать отладку (F5).

   Откроется окно приложения WebView2APISample :

   

5. Закройте окно примера приложения.

Шаг 8. Обновление предварительной версии пакета SDK для WebView2

В версии репозитория этого примера установлена предварительная версия пакета SDK для WebView2. Ниже вы обновите пакет SDK для WebView2 до последней предварительной версии (если еще не установлен последний пакет SDK для предварительной версии). Пакет SDK для предварительной версии поддерживает последние экспериментальные API и последние api "Stable in Prerelease".

1. Проверьте номер версии предварительного пакета SDK, который находится в копии репозитория приложения WebView2APISample на сайте GitHub: см .packages.config.

   Например:

   <package id="Microsoft.Web.WebView2" version="1.0.2950-prerelease" targetFramework="native" />
   <package id="Microsoft.Windows.ImplementationLibrary" version="1.0.220201.1" targetFramework="native" />
   

2. Проверьте номер последней предварительной версии в разделе Заметки о выпуске пакета SDK для WebView2.

3. В Visual Studio в Обозреватель решений щелкните правой кнопкой мыши проект WebView2APISample (не узел решения над ним), а затем выберите Управление пакетами NuGet.

   В Visual Studio откроется панель Диспетчер пакетов NuGet .

4. В диспетчере пакетов NuGet перейдите на вкладку Установленные :

   

5. Справа от текстового поля Поиск выберите поле Включить предварительную версию проверка.

6. В левой части экрана выберите Microsoft.Web.WebView2.

7. Справа в раскрывающемся списке Версия выберите последнюю версию -prerelease .

8. Справа от раскрывающегося списка Версия нажмите кнопку Обновить .

   Откроется диалоговое окно Предварительный просмотр изменений :

   

9. Нажмите кнопку Применить .

10. Повторите описанные выше действия, чтобы обновить Microsoft.Windows.Implementation.Library, но вы можете выбрать последний выпуск, а не последнюю предварительную версию.

    Для этого проекта теперь установлена последняя предварительная версия пакета SDK для WebView2.

См. также:

• Этапы добавления API в заметках о выпуске пакета SDK для WebView2.

Шаг 9. Сборка и запуск с помощью обновленного пакета SDK

Если вы обновили предварительную версию пакета SDK для WebView2, выполните сборку и запустите пример еще раз:

1. В Обозреватель решений щелкните правой кнопкой мыши проект WebView2APISample и выберите Сборка.

2. Выберите Отладка>Начать отладку (F5).

   Откроется окно приложения WebView2APISample :

   

3. Закройте окно примера приложения.

Вы получили, обновили, создали и запустили пример приложения Win32.

Шаг 10. Изучение примера

В следующих разделах описано, как работает пример.

Просмотр файлов проекта

В этих шагах предполагается, что вы получили, обновили, создали и запустили пример приложения Win32 в соответствии с приведенными выше шагами.

Пример и проект WebView2APISample — это пример main Win32.

1. Откройте WebView2Samples.sln в Visual Studio.

   Пример пути:

   C:\Users\localAccount\GitHub\WebView2Samples\SampleApps\WebView2Samples.sln
   

   Этот файл решения содержит пример main (WebView2APISample) и другие примеры:

   

2. В Обозреватель решений разверните проект WebView2APISample:

   

Архитектура гибридного приложения

Приложение WebView2APISample является примером гибридного приложения с собственной частью Win32 и частью WebView:

• Часть Win32 может напрямую обращаться к собственным API Windows. Верхняя часть приложения WebView2APISample — это компонент Win32, написанный на C++. Эта часть приложения принимает входные данные пользовательского интерфейса от пользователя и использует их для управления WebView.

• WebView — это контейнер для стандартных веб-технологий (HTML, CSS и JavaScript). Main частью приложения WebView2APISample является WebView, который можно перепрофилировать с помощью стандартных веб-технологий (HTML/CSS/JavaScript). WebView можно переходить на веб-сайты или локальное содержимое.

Этот гибридный подход позволяет создавать и выполнять итерации быстрее с помощью веб-технологий, при этом при этом можно использовать преимущества собственных функций. Приложение WebView2APISample демонстрирует, как компонент Win32 и компонент WebView могут взаимодействовать друг с другом.

Этот пример приложения содержит более 100 элементов menuitem, которые демонстрируют множество API WebView2 на платформе Win32/C++. В следующих разделах основное внимание уделяется основам реализации гибридного приложения.

Файлы проекта

В этом разделе кратко описаны некоторые ключевые файлы в репозитории. Приложение WebView2APISample делится по вертикали на компоненты, а не по горизонтали на слои. Каждый компонент реализует весь рабочий процесс категории примеров функций, от прослушивания команд меню до вызова методов API WebView для их реализации.

App.cpp

Это файл верхнего уровня, в котором выполняется приложение WebView2APISample . Он считывает параметры командной строки, настраивает среду процесса и обрабатывает модель потоков приложения.

AppWindow.cpp (меню "Окно")

Этот файл реализует окно приложения, выполнив следующие действия:

1. Настройте все элементы управления Win32.

2. Инициализируйте среду WebView и WebView.

3. Добавьте обработчики событий в WebView и создайте все компоненты, обрабатывающие различные функции приложения.

Класс AppWindow обрабатывает команды из меню окна примера приложения.

Этот файл более подробно описан в разделе Основные функции в AppWindow.cpp ниже.

FileComponent.cpp (меню "Файл")

Этот компонент обрабатывает команды из меню Файл (за исключением выхода), а также DocumentTitleChanged событие.

ScriptComponent.cpp (меню "Скрипт")

Этот компонент обрабатывает команды из меню скрипта , которые включают взаимодействие с WebView путем внедрения JavaScript, публикации WebMessages, добавления собственных объектов на веб-страницу или использования протокола DevTools для взаимодействия с веб-страницей.

ProcessComponent.cpp (меню "Процесс")

Этот компонент обрабатывает команды из меню Процесс , которые включают взаимодействие с процессом браузера. Он также обрабатывает ProcessFailed событие, если процесс браузера или один из его процессов отрисовки завершается сбоем или не отвечает.

SettingsComponent.cpp (меню "Параметры")

Этот компонент обрабатывает команды из меню Параметры . Этот компонент также отвечает за копирование параметров из старого WebView при создании нового. Большая часть кода, взаимодействующего с интерфейсом ICoreWebView2Settings , находится здесь.

ViewComponent.cpp (меню "Вид")

Этот компонент обрабатывает команды из меню Вид и все функциональные возможности, связанные с изменением размера и видимостью WebView. Когда размер окна приложения изменится, свернуто или восстановлено, ViewComponent будет изменяться размер, скрываться или отображаться WebView в ответ. Он также реагирует на ZoomFactorChanged событие.

ScenarioWebMessage.cpp и ScenarioWebMessage.html (меню "Сценарий")

Компонент ScenarioWebMessage создается при выборе пункта меню Сценарий>веб-сообщений . Этот компонент реализует пример приложения с частью C++ и частью HTML+JavaScript, которые взаимодействуют друг с другом, асинхронно публикуя и получая сообщения.

Этот компонент более подробно описан в разделе ScenarioWebMessage (.html, .cpp и .h) ниже.

ScenarioAddHostObject.cpp и ScenarioAddHostObject.html (меню "Сценарий")

Этот компонент создается при выборе пункта меню Объекты узла сценариев>. Он демонстрирует взаимодействие между собственным приложением и веб-страницей HTML с помощью внедрения объекта узла. Интерфейс ведущего объекта объявляется в HostObjectSample.idl, а сам объект реализуется в HostObjectSampleImpl.cpp.

См. также:

• Вызов собственного кода из веб-кода

Ключевые функции в AppWindow.cpp

AppWindow.cpp реализует окно приложения, выполнив следующие действия:

1. Настройте все элементы управления Win32.

2. Инициализируйте среду WebView и WebView.

3. Добавьте обработчики событий в WebView и создайте все компоненты, обрабатывающие различные функции приложения.

Класс AppWindow обрабатывает команды из меню окна примера приложения. Ниже приведены некоторые ключевые функции в AppWindow.cpp.

InitializeWebView()

InitializeWebView() В AppWindow.cppфункция создает среду WebView2 с помощью CreateCoreWebView2EnvironmentWithOptions.

Чтобы увидеть эти вызовы API в действии, проверьте следующий код из InitializeWebView():

HRESULT hr = CreateCoreWebView2EnvironmentWithOptions(
    subFolder, nullptr, options.Get(),
    Callback<ICoreWebView2CreateCoreWebView2EnvironmentCompletedHandler>(
        this, &AppWindow::OnCreateEnvironmentCompleted)
        .Get());
if (!SUCCEEDED(hr))
{
    if (hr == HRESULT_FROM_WIN32(ERROR_FILE_NOT_FOUND))
    {
        MessageBox(
            m_mainWindow,
            L"Couldn't find Edge installation. "
            "Do you have a version installed that's compatible with this "
            "WebView2 SDK version?",
            nullptr, MB_OK);
    }
    else
    {
        ShowFailure(hr, L"Failed to create webview environment");
    }
}

OnCreateEnvironmentCompleted()

После создания среды мы создаем WebView с помощью CreateCoreWebView2Controller.

Функция обратного OnCreateEnvironmentCompleted вызова передается CreateCoreWebView2EnvironmentWithOptions в .InitializeWebView() Обратный вызов сохраняет указатель среды, а затем использует его для создания нового WebView:

HRESULT AppWindow::OnCreateEnvironmentCompleted(
    HRESULT result, ICoreWebView2Environment* environment)
{
    CHECK_FAILURE(result);

    m_webViewEnvironment = environment;

    CHECK_FAILURE(m_webViewEnvironment->CreateCoreWebView2Controller(
        m_mainWindow, Callback<ICoreWebView2CreateCoreWebView2ControllerCompletedHandler>(
                            this, &AppWindow::OnCreateCoreWebView2ControllerCompleted)
                            .Get()));
    return S_OK;
}

OnCreateCoreWebView2ControllerCompleted()

Функция обратного OnCreateCoreWebView2ControllerCompleted вызова передается CreateCoreWebView2Controller в .InitializeWebView() Этот обратный вызов:

• Инициализирует состояние, связанное с WebView.
• Регистрирует некоторые обработчики событий.
• Создает компоненты приложения.

RegisterEventHandlers()

Функция RegisterEventHandlers вызывается в .CreateCoreWebView2Controller Он настраивает некоторые обработчики событий, используемые приложением, и добавляет их в WebView.

Дополнительные сведения об обработчиках событий в WebView2 см. в разделе ICoreWebView2.

Ниже приведен фрагмент кода из RegisterEventHandlers(), где мы настроили обработчик событий для NewWindowRequested события. Это событие возникает, когда JavaScript на веб-странице вызывает .window.open() ICoreWebView2NewWindowRequestedEventHandler создает объект и AppWindow передает webView нового окна обратно в браузер, чтобы он смог вернуть его из window.open() вызова. В отличие от наших вызовов к и CreateCoreWebView2Controllerвместо того, чтобы CreateCoreWebView2EnvironmentWithOptions предоставить метод для обратного вызова, мы просто предоставляем лямбда-лямбда C++ прямо тогда и там:

CHECK_FAILURE(m_webView->add_NewWindowRequested(
    Callback<ICoreWebView2NewWindowRequestedEventHandler>(
        [this](
            ICoreWebView2* sender,
            ICoreWebView2NewWindowRequestedEventArgs* args) {
            wil::com_ptr<ICoreWebView2Deferral> deferral;
            CHECK_FAILURE(args->GetDeferral(&deferral));

            auto newAppWindow = new AppWindow(L"");
            newAppWindow->m_isPopupWindow = true;
            newAppWindow->m_onWebViewFirstInitialized = [args, deferral, newAppWindow]() {
                CHECK_FAILURE(args->put_NewWindow(newAppWindow->m_webView.get()));
                CHECK_FAILURE(args->put_Handled(TRUE));
                CHECK_FAILURE(deferral->Complete());
            };

            return S_OK;
        })
        .Get(),
    nullptr));

ScenarioWebMessage (.html, .cpp и .h)

В ScenarioWebMessage файлах показано, как узел Win32 может изменять WebView, как WebView может изменять узел Win32 и как WebView может изменять себя, используя доступ к информации из узла Win32. Это выполняется асинхронно.

Компонент ScenarioWebMessage создается при выборе пункта меню Сценарий>веб-сообщений . Компонент ScenarioWebMessage реализует пример приложения с частью C++ и частью HTML+JavaScript, которые взаимодействуют друг с другом, асинхронно публикуя и получая сообщения:

В следующих разделах показано, как работает каждая дискретная функция с помощью приложения WebView2APISample , а затем объясняется, как реализовать эту функцию.

Сначала перейдите к веб-приложению ScenarioWebMessage в примере приложения:

1. Откройте (запустите) приложение WebView2APISample .

2. В меню Сценарий выберите Веб-обмен сообщениями.

   WebView отображает веб-страницу с именем Пример страницы WebMessage (ScenarioWebMessage.html):

   

Чтобы изучить эту функцию ScenarioWebMessage , следуйте инструкциям на странице или выполните указанные ниже действия.

Публикация сообщений с узла Win32 в WebView

Ниже показано, как узел Win32 может изменять WebView. В этом примере вы повернете текст синим цветом:

1. Откройте страницу примера WebMessage (ScenarioWebMessage.html), как описано выше.

2. В меню Скрипт выберите Post Web Message JSON.

   Откроется диалоговое окно с предварительно написанным кодом {"SetColor":"blue"} .

3. Нажмите кнопку OK.

   Текст в разделе Публикация сообщений на странице изменится с черного на синий.

Принципы действия

1. В ScriptComponent.cppвызов PostWebMessageAsJson отправляет входные данные пользователя в ScenarioMessage.html веб-приложение:

   // Prompt the user for some JSON and then post it as a web message.
   void ScriptComponent::SendJsonWebMessage()
   {
      TextInputDialog dialog(
         m_appWindow->GetMainWindow(),
         L"Post Web Message JSON",
         L"Web message JSON:",
         L"Enter the web message as JSON.",
         L"{\"SetColor\":\"blue\"}");
      if (dialog.confirmed)
      {
         m_webView->PostWebMessageAsJson(dialog.input.c_str());
      }
   }
   

2. В веб-приложении прослушиватели событий используются для получения веб-сообщения и реагирования на него. Приведенный ниже фрагмент кода находится из ScenarioWebMessage.html. Прослушиватель событий изменяет цвет текста, если аргумент имеет значение SetColor:

   window.chrome.webview.addEventListener('message', arg => {
      if ("SetColor" in arg.data) {
         document.getElementById("colorable").style.color = arg.data.SetColor;
      }
   });
   

Получение сообщений (из WebView на узел Win32)

Ниже показано, как WebView может изменить ведущее приложение Win32, изменив название приложения Win32.

1. Откройте страницу примера WebMessage (ScenarioWebMessage.html), как описано выше.

2. Обратите внимание на название приложения WebView2APISample , которое отображается в левом верхнем углу окна рядом со значком. Изначально это WebView2APISample — Microsoft Edge WebView2.

3. В разделе Получение сообщений на странице введите новое название и нажмите кнопку Отправить .

4. Обратите внимание на новый заголовок, отображаемый в строке заголовка приложения WebView2APISample .

Принципы действия

1. В ScenarioWebMessage.htmlwindow.chrome.webview.postMessage() отправляет входные данные пользователя в ведущее приложение:

   function SetTitleText() {
      let titleText = document.getElementById("title-text");
      window.chrome.webview.postMessage(`SetTitleText ${titleText.value}`);
   }
   

2. В ScenarioWebMessage.cppиспользуется add_WebMessageReceived для регистрации обработчика событий. При получении события после проверки входных данных мы изменяем заголовок окна приложения (m_appWindow):

   // Setup the web message received event handler before navigating to
   // ensure we don't miss any messages.
   CHECK_FAILURE(m_webview->add_WebMessageReceived(
      Microsoft::WRL::Callback<ICoreWebView2WebMessageReceivedEventHandler>(
         [this](ICoreWebView2* sender, ICoreWebView2WebMessageReceivedEventArgs* args)
   {
      wil::unique_cotaskmem_string uri;
      CHECK_FAILURE(args->get_Source(&uri));
   
      // Always validate that the origin of the message is what you expect.
      if (uri.get() != m_sampleUri)
      {
         return S_OK;
      }
      wil::unique_cotaskmem_string messageRaw;
      CHECK_FAILURE(args->TryGetWebMessageAsString(&messageRaw));
      std::wstring message = messageRaw.get();
   
      if (message.compare(0, 13, L"SetTitleText ") == 0)
      {
         m_appWindow->SetTitleText(message.substr(13).c_str());
      }
      return S_OK;
   }).Get(), &m_webMessageReceivedToken));
   

Сообщения кругового пути (от WebView к узлу обратно в WebView)

Ниже показано, как WebView может получать сведения из узла Win32 и изменять себя, отображая размер приложения Win32.

1. Откройте страницу примера WebMessage (ScenarioWebMessage.html), как описано выше.

2. В разделе Круговой путь страницы нажмите кнопку GetWindowBounds .

   В текстовом поле под кнопкой отображаются границы для приложения WebView2APISample .

Принципы действия

1. При нажатии GetWindowBoundsкнопки Получить границы окна вызывается функция в ScenarioWebMessage.html . GetWindowBounds вызывает window.chrome.webview.postMessage() для отправки сообщения в ведущему приложению:

   function GetWindowBounds() {
       window.chrome.webview.postMessage("GetWindowBounds");
   }
   

2. В ScenarioWebMessage.cppмы используем add_WebMessageReceived для регистрации полученного обработчика событий. После проверки входных данных обработчик событий получает границы окна из окна приложения. PostWebMessageAsJson отправляет границы в веб-приложение:

   if (message.compare(L"GetWindowBounds") == 0)
   {
      RECT bounds = m_appWindow->GetWindowBounds();
      std::wstring reply =
         L"{\"WindowBounds\":\"Left:" + std::to_wstring(bounds.left)
         + L"\\nTop:" + std::to_wstring(bounds.top)
         + L"\\nRight:" + std::to_wstring(bounds.right)
         + L"\\nBottom:" + std::to_wstring(bounds.bottom)
         + L"\"}";
      CHECK_FAILURE(sender->PostWebMessageAsJson(reply.c_str()));
   }
   

3. В ScenarioWebMessage.htmlпрослушиватель событий отвечает на WindowBounds сообщение и отображает границы окна:

   window.chrome.webview.addEventListener('message', arg => {
      if ("WindowBounds" in arg.data) {
         document.getElementById("window-bounds").value = arg.data.WindowBounds;
      }
   });
   

См. также

• Справочник по API WebView2
• Начало работы с WebView2 в приложениях Win32
• Обзор API WebView2
• Этапы добавления API в заметках о выпуске пакета SDK для WebView2.