Поделиться через

Установщик Visual Studio для развертывания WebView2

  • Статья

В этом примере WV2DeploymentVSInstallerSample показано, как развернуть приложение WebView2 с помощью установщика Visual Studio.

  • Имя примера: WV2DeploymentVSInstallerSample
  • Каталог репозитория: WV2DeploymentVSInstallerSample
  • Файл решения: не указан в репозитории. Вы создадите файл решения, выполнив указанные ниже действия.

Чтобы продемонстрировать, как развернуть среду выполнения Evergreen WebView2 с помощью приложения, в этой статье описывается использование расширения Microsoft Visual Studio Installer Project для Visual Studio. Вы создаете проект типа Setup Project, чтобы создать установщик для примера приложения Win32 (WebView2APISample). Этот установщик, который вы создаете в цепочке, устанавливает среду выполнения Evergreen WebView2.

Сначала нужно изменить project.xml файл из репозитория, а затем в Visual Studio создать проект с помощью шаблона проекта установки из расширения Microsoft Visual Studio Installer Projects.

В этом примере демонстрируется несколько различных подходов к развертыванию:

  • Скачивание начального загрузчика среды выполнения Evergreen WebView2 по ссылке.
  • Упаковка загрузчика среды выполнения Evergreen WebView2 с приложением.
  • Упаковка автономного установщика среды выполнения Evergreen WebView2 с приложением.

Сведения об этих различных подходах см. в статье Развертывание среды выполнения Evergreen WebView2 в разделе Распространение приложения и среды выполнения WebView2.

Шаг 1. Сборка и запуск WebView2APISample

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

  1. Выполните действия в примере приложения Win32 (WebView2APISample), а затем выполните следующие действия.

Предварительные требования. Как указано на приведенной выше странице, требуется Microsoft Visual Studio, включая поддержку C++. Microsoft Visual Studio Code не поддерживается для этого примера WV2DeploymentVSInstallerSample.

Приведенная выше страница поможет клонировать или скачать репозиторий WebView2Samples и установить Visual Studio с поддержкой C++, если это еще не сделано.

Шаг 2. Установка проектов Visual Studio Installer

Если это еще не сделано, установите Visual Studio Installer Projects:

  1. Установите microsoft Visual Studio Installer Projects для Visual Studio 2019. Выполните действия на этой странице, а затем вернитесь на эту страницу и выполните указанные ниже действия.

Установщик VSIX Visual Studio Installer Projects 2019

Если появится диалоговое окно Ожидание следующих процессов завершения работы , закройте Visual Studio.

Шаг 3. Изменение product.xml для настройки распространения среды выполнения WebView2

  1. Откройте Visual Studio. На открываемом экране можно щелкнуть ссылку Продолжить без кода в правом нижнем углу.

  2. Откройте следующий отдельный файл, который находится в локальной копии репозитория: <repo-location>\WebView2Samples\SampleApps\WV2DeploymentVSInstallerSample\product.xml

    Расположение файла в репозитории на сайте GitHub: SampleApps/WV2DeploymentVSInstallerSample/product.xml

    product.xml файл, открытый для редактирования без изменений, в Visual Studio 2019

  3. Проверьте .product.xml Есть три <PackageFile> строки. Изучите комментарий над каждой из трех строк. Ниже приведен упрощенный вид строк с пояснениями.

    В первой <PackageFile> строке используется файл MicrosoftEdgeWebview2Setup.exe, который является загрузчиком среды выполнения Evergreen WebView2 и указывает HomeSite веб-сайт. Используйте следующую строку для подхода 1. Скачивание загрузчика среды выполнения Evergreen WebView2 по ссылке:

    <!-- Download the MicrosoftEdgeWebview2Setup.exe -->
<!-- <PackageFile Name="MicrosoftEdgeWebview2Setup.exe" HomeSite="WebViewRuntime" PublicKey="..."/> -->

    Во второй <PackageFile> строке используется файл MicrosoftEdgeWebview2Setup.exe, который является загрузчиком среды выполнения Evergreen WebView2. Используйте следующую строку для подхода 2. Упаковка загрузчика среды выполнения Evergreen WebView2 с приложением:

    <!-- Package the MicrosoftEdgeWebview2Setup.exe -->
<PackageFile Name="MicrosoftEdgeWebview2Setup.exe" />

    В третьей <PackageFile> строке используется файл MicrosoftEdgeWebView2RuntimeInstallerX64.exe, который является отдельным установщиком среды выполнения Evergreen WebView2 для конкретной платформы. Используйте следующую строку для подхода 3. Упаковка автономного установщика среды выполнения Evergreen WebView2 с приложением:

    <!-- Package the WebView Standalone Installer -->
<!-- <PackageFile Name="MicrosoftEdgeWebView2RuntimeInstallerX64.exe" /> -->

  4. Определите, какой подход вы используете. По умолчанию используется подход 2; то есть строка для использования подхода 2 не закомментирована в файле репозитория product.xml .

  5. Измените product.xml, как показано ниже. Выполните действия, описанные в одном из трех разделов ниже.

Если вы хотите, чтобы приложение скачать загрузчик среды выполнения Evergreen WebView2 (MicrosoftEdgeWebview2Setup.exe) по ссылке:

  1. <PackageFiles CopyAllPackageFiles="false"> В разделе не закомментируйте следующую строку (сохраните значение длинного открытого ключа) и закомментируйте другие строки:

    <PackageFile Name="MicrosoftEdgeWebview2Setup.exe" HomeSite="WebViewRuntime" PublicKey="..."/>

  2. Значение PublicKey начального загрузчика среды выполнения WebView2 может измениться без уведомления. Мы работаем над решением этой проблемы. На данный момент может потребоваться заменить его на product.xml обновленное PublicKey значение.

  3. <Commands Reboot="Defer"> В разделе и </Commands> убедитесьPackageFile, что указывает "MicrosoftEdgeWebview2Setup.exe" на , чтобы установщик Visual Studio использовал загрузчик.

  4. Сохраните файл.

Подход 2. Упаковка загрузчика среды выполнения Evergreen WebView2 с приложением

Если вы хотите упаковать загрузчик среды выполнения Evergreen WebView2 (MicrosoftEdgeWebview2Setup.exe) с приложением:

  1. <PackageFiles CopyAllPackageFiles="false"> В разделе снимите с комментариев следующую строку и закомментируйте другие строки:

    <PackageFile Name="MicrosoftEdgeWebview2Setup.exe" />

  2. <Commands Reboot="Defer"> В разделе убедитесьPackageFile, что указывает "MicrosoftEdgeWebview2Setup.exe" на , чтобы установщик Visual Studio использовал загрузчик.

  3. Сохраните файл.

Подход 3. Упаковка автономного установщика среды выполнения Evergreen WebView2 с приложением

Если вы хотите упаковать автономный установщик среды выполнения Evergreen WebView2 с приложением:

  1. <PackageFiles CopyAllPackageFiles="false"> В разделе снимите с комментариев следующую строку и закомментируйте другие строки:

    <PackageFile Name="MicrosoftEdgeWebView2RuntimeInstallerX64.exe" />

  2. <Commands Reboot="Defer"> В разделе и </Commands> убедитесь PackageFile"MicrosoftEdgeWebView2RuntimeInstallerX64.exe", что указывает на , чтобы установщик Visual Studio использовал автономный установщик.

  3. Если вы используете устройства, отличные от X64, измените MicrosoftEdgeWebView2RuntimeInstallerX64 имя файла, чтобы оно соответствовало правильной архитектуре.

  4. Сохраните файл.

Шаг 4. Скачивание начального загрузчика WebView2 или автономного установщика

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

  1. Скачайте загрузчик Microsoft Edge WebView2 или автономный установщик.

  2. Сохраните скачанный загрузчик или автономный установщик в папке <repo-location>\WebView2Samples\SampleApps\WV2DeploymentVSInstallerSample\ .

Шаг 5. Копирование папки WV2DeploymentVSInstallerSample в папку Packages

Этот шаг применяется ко всем подходам (1, 2 или 3).

  1. Скопируйте папку <repo-location>\WebView2Samples\SampleApps\WV2DeploymentVSInstallerSample\ и вставьте ее в одну из следующих папок:

    • <drive>:\Program Files (x86)\Microsoft SDKs\ClickOnce Bootstrapper\Packages\

    • <Visual Studio install dir>\MSBuild\Microsoft\VisualStudio\BootstrapperPackages\ (требуется как минимум Visual Studio 2019 с обновлением 7)

    Типичный путь для <Visual Studio install dir>:

    • C:\Program Files (x86)\Microsoft Visual Studio\2019\Professional\Common7\IDE\

Шаг 6. Создание проекта установки в Visual Studio

  1. В Visual Studio выберите Файл>Создать>Проект. Откроется окно Создание проекта .

  2. В текстовом поле Поиск шаблонов введите проект установки, а затем выберите шаблон Проект установки . Убедитесь, что выбран шаблон с именем , как показано ниже:

    Visual Studio Installer развертывания WebView2: создание проекта установки

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

    Откроется диалоговое окно Настройка нового проекта: настройка проекта , как показано ниже.

  4. В текстовом поле Имя проекта введите имя, например MyWin32WV2DeploySample.

  5. В текстовом поле Расположение перейдите к расположению, которое не находится в другом каталоге проекта, например <repo-path>\WebView2Samples\ , или к расположению, которое не находится в каталоге репозитория.

    Настройка нового проекта

  6. Нажмите кнопку Создать.

    Новый пустой проект развертывания (2019)

Шаг 7. Добавление среды выполнения WebView2 в качестве необходимого условия

  1. В Visual Studio в Обозреватель решений щелкните проект правой кнопкой мыши и выберите пункт Свойства. Откроется диалоговое окно Страницы свойств .

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

    Visual Studio Installer развертывания WebView2: настройка необходимых компонентов

  3. Установите флажок Среда выполнения Edge WebView2 .

    Если этот флажок отсутствует в списке, это может указывать на то, что необходимый файл не был помещен в папку Packages. Проверьте, какой подход вы используете. Вам может потребоваться выполнить описанные выше действия в разделах Шаг 4. Скачивание начального загрузчика WebView2 или автономного установщика и шаг 5. Скопируйте папку WV2DeploymentVSInstallerSample в папку Packages.

  4. Снимите другие флажки предварительных требований. Затем нажмите кнопку ОК :

    Visual Studio Installer развертывания WebView2: выберите необходимые компоненты

Шаг 8. Создание проекта установки

  1. Нажмите клавишу F5 , чтобы сохранить и выполнить сборку проекта установки.

См. также