Настройка среды разработки для WebView2

Статья
04/30/2023

В этой статье рассматривается настройка среды разработки общего назначения для разработки WebView2. В некоторых руководствах по начало работы приведены инструкции по предварительной настройке, а затем добавлены шаги настройки для конкретной платформы или проекта.

Установка Visual Studio

Установите Visual Studio 2015 или более поздней версии, например Visual Studio Professional 2019 или Visual Studio 2022 Community Edition. Большинство примеров WebView2 были созданы и протестированы с помощью Visual Studio 2019. Если пример был создан с помощью Visual Studio 2019, необходимо выполнить сборку и запуск примера в Visual Studio 2019, прежде чем использовать его в Visual Studio 2022.

Примеры WebView2 предназначены для Microsoft Visual Studio, а не для Microsoft Visual Studio Code.

Если вы устанавливаете Visual Studio, вы можете принять значения по умолчанию. Вы можете нажать кнопку Установить, а затем отклонить установку рабочих нагрузок. Позже При открытии определенного .sln файла Visual Studio предложит установить рабочие нагрузки, соответствующие платформе.

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

Установите любой канал предварительной версии Microsoft Edge (бета-версия, разработка или Canary) в поддерживаемой операционной системе:

Windows 10
Windows 11

Для этого перейдите в раздел Стать участником программы предварительной оценки Microsoft Edge. Каналы предварительной версии также называются каналами предварительной оценки.

Рекомендуется использовать канал Canary. Минимальная требуемая версия — 82.0.488.0.

Каналы предварительной версии Microsoft Edge необходимы для использования предварительной версии пакета SDK Для WebView2. Предварительный выпуск ПАКЕТА SDK позволяет тестировать приложение на основе последних API и пробовать последние API.

Скачивание репозитория WebView2Samples

Существует два репозитория, содержащих примеры WebView2:

Вы можете скачать репозиторий в .zip виде файла или клонировать репозиторий.

При скачивании репозитория (в .zip виде файла) вы получите snapshot копию репозитория. Затем вы можете скачать другую обновленную копию репозитория позже.
Если вы клонируете репозиторий, вы можете обновить локальную копию с помощью команд Git или функций различных приложений разработки.

Чтобы скачать репозиторий (в виде файла):.zip

Откройте репозиторий WebView2Samples (или репозиторий WebView2Browser) в новом окне или вкладке.
Нажмите зеленую кнопку Код в правом верхнем углу репозитория GitHub и нажмите кнопку Скачать ZIP-файл.

В Microsoft Edge появится всплывающее окно Скачать :

В Microsoft Edge, если всплывающее окно Скачать не отображается, щелкните Параметры и прочее (...) и нажмите кнопку Загрузки.
Во всплывающем окне Загрузки наведите указатель мыши справа WebView2Samples-main.zip и щелкните значок Показать в папке (папке).

Не рекомендуется щелкать ссылку Открыть файл , так как это немедленно распакует файл в области загрузки, что может затруднить (и замедлить) перемещение в нужное расположение.
Скопируйте или вырезайте WebView2Samples-main.zip файл из каталога Downloads в обычный каталог, например Documents.
Распакуть WebView2Samples-main.zip файл и запишите расположение распакованных файлов.
Изучите возможности main каталогов.

-main— это имя ветви репозитория, которую представляет этот скачанный каталог snapshot. На сайте GitHub можно переключиться на другую ветвь, а затем скачать, например . WebView2Samples-smoketest-1.0.1054.27-prerelease-testing.zip В этом случае скачанный .zip файл является snapshot smoketest-1.0.1054.27-prerelease-testing ветви репозитория. В этой документации предполагается, что вы скачали ветвь main репозитория.
Рекомендуется: переименуйте корневой каталог с WebView2Samples-main на WebView2Samples, чтобы соответствовать имени репозитория и пути.

Клонирование репозитория WebView2Samples

Вы можете скачать репозиторий .zip как файл или клонировать репозиторий.

При скачивании репозитория (в .zip виде файла) вы получите snapshot копию репозитория. Затем вы можете скачать другую обновленную копию репозитория позже.
Если вы клонируете репозиторий, вы можете обновить локальную копию с помощью команд Git или функций различных приложений разработки.

Чтобы клонировать репозиторий WebView2Samples (или репозиторий WebView2Browser ), необходимо сначала установить Git. Вы можете скачать репозиторий, как описано выше, или клонировать его.

Установка Git

Если вы хотите клонировать WebView2Samples репозиторий (вместо того чтобы скачивать его), а если git еще не установлен, скачайте Git и установите его.

Получение URL-адреса для клонирования репозитория WebView2Samples

Откройте репозиторий WebView2Samples в новом окне или вкладке.
Нажмите зеленую кнопку Код в правом верхнем углу репозитория GitHub, выберите Клонировать, а затем щелкните значок Копировать (или выберите строку URL-адреса HTTPS в текстовом поле и скопируйте ее).
Определите, какое средство вы хотите использовать для локального клонирования репозитория:
- Visual Studio
- GitHub Desktop
- Оболочка Git Bash или командная строка

Затем клонируйте репозиторий GitHub на локальный диск. Для этого выполните указанные ниже действия для средства, которое вы хотите использовать.

Клонирование репозитория с помощью Visual Studio

Если вы хотите использовать Visual Studio для клонирования репозитория GitHub на локальный диск:

В Visual Studio выберите Файл>клонировать репозиторий.
Введите URL-адрес, скопированный из репозитория GitHub.
В том же диалоговом окне или в служебной программе проводника можно создать корневой каталог git общего назначения или GitHub папку в доступном для записи расположении, а затем выбрать этот каталог, чтобы репозиторий был клонирован там как новый каталог.

Например, можно создать репозиторий в родительской папке : C:\Users\myUserName\Documents\GitHub\, чтобы операция клонирования создавала новый каталог C:\Users\myUserName\Documents\GitHub\WebView2Samples.

Вы клонировали репозиторий на локальный диск. Перейдите к следующему основному разделу ниже.

Клонирование репозитория с помощью GitHub Desktop

Если вы хотите использовать GitHub Desktop для клонирования репозитория GitHub на локальный диск:

Установите GitHub Desktop.
В GitHub Desktop выберите Файл>клонировать репозиторий.
В Visual Studio или GitHub Desktop введите URL-адрес, скопированный из репозитория GitHub.
В том же диалоговом окне или в служебной программе проводника можно создать корневой каталог git общего назначения или GitHub папку в доступном для записи расположении, а затем выбрать этот каталог, чтобы репозиторий был клонирован там как новый каталог.

Например, можно создать репозиторий в родительской папке : C:\Users\myUserName\Documents\GitHub\, чтобы операция клонирования создавала новый каталог C:\Users\myUserName\Documents\GitHub\WebView2Samples.

Вы клонировали репозиторий на локальный диск. Перейдите к следующему основному разделу ниже.

Клонирование репозитория с помощью оболочки Git Bash или командной строки

Если вы хотите клонировать репозиторий с помощью оболочки Git Bash или командной строки:

Клонируйте репозиторий на локальный диск, введя строку URL-адреса, скопированную из репозитория GitHub:
```
# example location where the repo directory will be added:
cd c:/users/myusername/documents/github/
git clone https://github.com/MicrosoftEdge/WebView2Samples.git
```
Каталог создается на локальном диске по указанному пути, например на следующем рисунке:

Вы клонировали репозиторий на локальный диск.

См. также:

Клонирование репозитория — документация GitHub.
Скачивание или клонирование репозитория демонстраций в примере кода для devTools.
Шаг 6. Настройка сервера localhost в разделе Установка расширения DevTools для Visual Studio Code.

Открытие файла WebView2Samples .sln в Visual Studio

После клонирования или скачивания репозитория WebView2Samples откройте .sln файл в Visual Studio.

В локальной копии структуры каталогов репозитория найдите .sln файл. Файл README верхнего уровня в репозитории WebView2Samples содержит аналогичный обзор.
.sln Откройте файл в Visual Studio. Например, откройте локальную копию WebView2Samples.sln. Для файлов решения этого репозитория требуется Visual Studio, а не Visual Studio Code.
Откройте один из .sln файлов. Например, откройте локальную копию файла решения Main Win32 WebView2Samples/SampleApps/WebView2Samples.sln (скачанный как путьWebView2Samples-main/SampleApps/WebView2Samples.sln) в Microsoft Visual Studio. При открытии этого файла решения в Visual Studio Обозреватель решений содержит следующие проекты:

Для общей начальной настройки среды разработки .sln можно открыть файл любого типа из репозитория WebView2Samples :

Файл, зависящий от .sln платформы, в подкаталоге GettingStartedGuides каталога. Они соответствуют начало работы руководствам и являются полными примерами, демонстрирующими несколько функций API.
Файл Win32 .sln , содержащий несколько проектов платформы, в каталоге SampleApps . Это комплексная демонстрация API.
Файл, зависящий от .sln платформы, в подкаталоге SampleApps каталога. Это комплексные демонстрации API.

Установка рабочих нагрузок Visual Studio

Установите рабочие нагрузки Visual Studio, если появится соответствующий запрос. При открытии .sln файла из клонированного или скачаного WebView2Samples репозитория в Microsoft Visual Studio 2019 или 2022 может появиться диалоговое окно "Не удается открыть".

Нажмите кнопку ОК . Затем может появиться установщик рабочей нагрузки, например:

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

Установщик Visual Studio запускается для рабочей нагрузки платформы:

.

Может открыться страница файла журнала отчета о миграции, например :file:///C:/Users/username/Documents/WebView2Samples-main/WebView2Samples-main/SampleApps/UpgradeLog.htm

Чтобы увеличить масштаб, щелкните правой кнопкой мыши >Открыть изображение на новой вкладке.

Выше суффикс -main каталога присутствует для загруженного .zip файла репозитория, а не для клонированного репозитория.

Visual Studio открывает выбранный .sln файл в Обозреватель решений:

Установка или обновление пакета SDK для WebView2

Пакет SDK для WebView2 включает элемент управления WebView2 на базе Microsoft Edge и позволяет внедрять веб-технологии (HTML, CSS и JavaScript) в собственные приложения.

Пакет SDK для WebView2 устанавливается один раз на каждый узел проекта каждого .sln файла. Установка пакета SDK для WebView2 применяется только к проекту, в котором она установлена.

Вместо того, чтобы скачивать Microsoft.Web.WebView2 пакет NuGet пакета SDK из nuget.org, вы устанавливаете пакет NuGet sdk для WebView2 через панель диспетчера пакетов NuGet в Visual Studio. После клонирования или скачивания репозитория WebView2Samples откройте один из файлов репозитория .sln в Visual Studio и щелкните правой кнопкой мыши узел проекта в решении. Для установки Microsoft.Web.WebView2 пакета SDK в качестве пакета NuGet используйте панель диспетчера пакетов NuGet.

Пакет Microsoft.Web.WebView2 SDK доступен в выпусках и предварительных версиях. Чтобы приступить к работе, рекомендуется использовать версию выпуска.

Установите или обновите пакет SDK для выпуска или предварительной версии WebView2, как показано ниже.

.sln Откройте файл в Visual Studio. Например, откройте локальную копию WebView2Samples.sln. Для файлов решения этого репозитория требуется Visual Studio, а не Visual Studio Code.
В Обозреватель решений щелкните правой кнопкой мыши узлы проекта решения, например узел проекта WebView2GettingStarted (а не узел решения), а затем выберите Управление пакетами NuGet.

На следующем рисунке показан конкретный файл и проект .sln. Используйте любой проект, для которого требуется установить пакет SDK:

В Visual Studio откроется вкладка Диспетчер пакетов NuGet .
В окне NuGet откройте вкладку Обзор .
В правой части панели поиска снимите флажок Включить предварительную версию или установите его, если требуется предварительная версия пакета SDK, которая включает экспериментальные API.
В строке поиска в левом верхнем углу введите Microsoft.Web.WebView2.
Под строкой поиска щелкните карта Microsoft.Web.WebView2.
В правой области нажмите кнопку Установить (или Обновить). NuGet загружает пакет SDK для WebView2 на компьютер для использования в этом проекте.

Чтобы увеличить масштаб, щелкните правой кнопкой мыши >Открыть изображение на новой вкладке.
Закройте вкладку Диспетчер пакетов NuGet .

Теперь установлен пакет SDK для WebView2, поэтому среда разработки теперь настроена для добавления функций WebView2 в приложения WebView2.