Пример приложения 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. Установка 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.

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

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

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

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

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

    или

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

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

    Диалоговое окно

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

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

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

Шаг 4. Установка 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. Откроется окно настройки Windows SDK:

    настройка Windows SDK

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

    Добро пожаловать в Windows SDK

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

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

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

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

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

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

Проект WebView2SampleWinComp в Visual Studio

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

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

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

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

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

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

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

    Окно приложения WebView2SampleWinComp

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

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

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

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

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

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

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

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

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

    Вкладка Обновления диспетчера пакетов NuGet после первоначального открытия решения WebView2SampleWinComp

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

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

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

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

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

    Проект WebView2SampleWinComp в Visual Studio

См. также