Пример приложения Win32 с визуальной композицией

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

• Имя примера: WebView2SampleWinComp
• Каталог репозитория: WebView2SampleWinComp
• Файл решения: WebView2SampleWinComp.sln

Этот пример создан как проект Win32 Visual Studio 2019. Он использует C++ и HTML,CSS/JavaScript в среде WebView2.

В этом примере используются API композиции среда выполнения Windows (также называемые визуальным уровнем), чтобы воспользоваться преимуществами функций пользовательского интерфейса Windows и создать более удобный внешний вид, интерфейс и функциональность в приложениях Win32 на C++.

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

Если вы впервые используете WebView, рекомендуется сначала ознакомиться с руководством Начало работы с WebView2 в приложениях Win32, в котором рассматривается создание WebView2 и рассматриваются некоторые основные функции WebView2.

См. также файл readme для WebView2SampleWinComp.

Шаг 1. Установка канала предварительной версии Microsoft Edge

Мы рекомендуем использовать последнюю версию канала Edge Canary.

1. Если канал предварительной версии Microsoft Edge (бета-версия, разработка или Canary) еще не установлен, в отдельном окне или на вкладке см. статью Установка канала предварительной версии Microsoft Edge в статье Настройка среды разработки для WebView2. Выполните действия, описанные в этом разделе, а затем вернитесь на эту страницу и выполните указанные ниже действия.

Шаг 2. Установка Visual Studio с поддержкой C++

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

Этот пример создан как проект Win32 Visual Studio 2019.

1. Если Visual Studio (минимальная требуемая версия) еще не установлена, в отдельном окне или на вкладке см . статью Установка Visual Studioстатьи Настройка среды разработки для WebView2. Выполните действия, описанные в этом разделе, а затем вернитесь на эту страницу и выполните указанные ниже действия.

2. Если вы хотите использовать Visual Studio 2017, измените набор инструментов платформы проекта в разделе Свойства проекта > . Свойства конфигурации. > Общие > набор инструментов платформы. Вам также может потребоваться изменить windows SDK на последнюю доступную вам версию.

Другие предварительные требования

• Пакет SDK для WebView2 — предварительная версия пакета SDK для WebView2 уже установлена в этом примере проекта. Ниже приведены инструкции по обновлению пакета SDK при необходимости.

• пакет SDK Windows 10. По умолчанию этот пример приложения будет использовать последнюю версию пакета SDK для Windows 10, установленную на вашем компьютере. Однако существует проблема с пакетом SDK для Windows 10 версии 2004 (10.0.19041.0), из-за чего этот пример приложения не будет создаваться. Ниже приведены инструкции по установке совместимой версии пакета SDK для Windows 10.

Шаг 3. Клонирование или скачивание репозитория WebView2Samples

Первым шагом для создания этого примера является получение локальной копии репозитория примеров.

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

Шаг 4. Откройте решение и задайте целевой объект Windows SDK

1. На локальном .sln диске откройте файл в Visual Studio в каталоге :

   • <your-repos-directory>/WebView2Samples/SampleApps/WebView2SampleWinComp/WebView2SampleWinComp.sln

   или

   • <your-repos-directory>/WebView2Samples-main/SampleApps/WebView2SampleWinComp/WebView2SampleWinComp.sln

   Может открыться диалоговое окно "Просмотр действий решения ", в котором предлагается выбрать установленный пакет SDK для Windows, чтобы перенацелить проект на:

   

2. В раскрывающемся списке Версия пакета WINDOWS SDK выберите 10.0.20348.0 или более поздней версии или 10.0.18362.0 или более ранней версии. Не выбирайте 10.0.19041.0. Затем нажмите кнопку ОК . Если эти версии недоступны, выполните действия, описанные в разделе "Установка пакета SDK для Windows" ниже. В противном случае перейдите к разделу ниже.

Если решение уже открыто, вы можете изменить целевой объект следующим образом:

• В Обозреватель решений щелкните правой кнопкой мыши проект WebView2SampleWinComp (не решение) и выберите команду Перенацелить проекты.

Шаг 5. Установка пакета WINDOWS SDK

По умолчанию этот пример приложения использует последнюю версию пакета SDK для Windows 10, которую вы установили. Возникла проблема с пакетом SDK для Windows 10 версии 2004 (10.0). 19041.0), который остановит сборку этого примера приложения. При возникновении этой проблемы установите (и перенацелите этот проект для использования) более позднюю версию, например пакет SDK для Windows 10 версии 2104 (10.0). 20348.0), или более раннюю версию, например 10.0. 18362.1.

Чтобы установить пакет SDK для Windows 10, выполните приведенные далее действия.

1. Перейдите к windows SDK и архиву эмулятора.

2. В одной из следующих строк щелкните ссылку Установить пакет SDK :

   • пакет SDK Windows 10 версии 2104 (10.0.20348.0) (или более поздней)
   • пакет SDK для Windows 10 версии 1903 (10.0.18362.1)

   Копия файла для конкретной winsdksetup.exe версии загружается в ваш Downloads каталог.

3. В каталоге Downloads откройте копию winsdksetup.exe , которую вы только что скачали.

4. Откроется окно установки Пакета SDK для Windows :

   

5. Нажмите кнопку Далее и следуйте инструкциям. Вы можете принять значения по умолчанию. В конце установки появится экран приветствия windows SDK для выбранной версии:

   

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

Выполните предыдущий шаг: "Откройте решение и задайте целевой объект Windows SDK". Или, если решение уже открыто, в Обозреватель решений щелкните правой кнопкой мыши проект WebView2SampleWinComp (не решение) и выберите команду Перенацелить проекты.

Шаг 6. Установка рабочих нагрузок при появлении запроса

• При появлении запроса установите все запрошенные рабочие нагрузки Visual Studio. В отдельном окне или вкладке см . статью Установка рабочих нагрузок Visual Studioстатьи Настройка среды разработки для WebView2. Выполните действия, описанные в этом разделе, а затем вернитесь на эту страницу и продолжите работу ниже.

Шаг 7. Сборка и запуск проекта

После открытия решения в Visual Studio (выше) и ответа на любые запросы на установку или установку проект откроется в Visual Studio, где проект WebView2SampleWinComp отображается в Обозреватель решений:

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

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

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

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

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

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

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

   

5. В Visual Studio выберите Отладка>Остановить отладку. Visual Studio закрывает приложение.

Шаг 8. Обновление установленных пакетов

Это действие необязательно. Пример предустановлен:

• Версия предварительного пакета SDK для WebView2.
• Версия библиотек реализации Windows (WIL).

1. В Обозреватель решений щелкните правой кнопкой мыши проект WebView2SampleWinComp (не узел Решение), а затем выберите Управление пакетами NuGet. Откроется вкладка Диспетчер пакетов NuGet .

2. Установите флажок Включить предварительную версию .

3. Перейдите на вкладку Установленные . Для каждого пакета обратите внимание, есть ли в списке две версии (текущая версия и доступный обновленный номер версии).

4. Перейдите на вкладку Обновления.

5. Если указана более новая предварительная версия пакета SDK для Microsoft.Web.WebView2 , при необходимости можно нажать кнопку Обновить . Предварительная версия имеет суффикс "-prerelease", например 1.0.1248-prerelease. Если вы хотите просмотреть подробные сведения об этом шаге, в отдельном окне или на вкладке см. статью Установка или обновление пакета SDK для WebView2статьи Настройка среды разработки для WebView2. Выполните действия, описанные в этом разделе, а затем вернитесь на эту страницу и продолжите работу ниже.

   

6. Если указан более новый выпуск библиотек реализации Windows (WIL), при необходимости можно нажать кнопку Обновить .

7. Следуйте инструкциям, чтобы продолжить обновление пакетов.

8. Выполните сборку и запустите проект снова, используя обновленные пакеты.

Шаг 9. Проверка кода

1. В редакторе кода Visual Studio проверьте код:

   

См. также

• Начало работы с WebView2 в приложениях Win32
• Справочник по API WebView2