Пример приложения WinUI 2 (UWP)

В этом примере WebView2 показано, как использовать элемент управления WebView2 и API WebView2 для реализации веб-браузера в приложении WinUI 2 (UWP).

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

Установленные пакеты NuGet

Этот пример включает следующие пакеты NuGet:

• Microsoft.NETCore.UniversalWindowsPlatform
• Предварительная версия Microsoft.UI.Xaml включает пакет SDK для Microsoft.Web.WebView2 в качестве зависимости.

Чтобы продемонстрировать последние возможности, этот пример в репозитории WebView2Samples настроен на использование предварительной версии пакета SDK для WinUI 2 (в списке Microsoft.UI.Xaml в диспетчере пакетов NuGet), а не стабильной версии. Пакет SDK для WinUI 2 включает совместимую версию пакета SDK для WebView2 в качестве зависимости от Microsoft.UI.Xaml.

См. также файл README для webview2_sample_uwp.

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

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

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

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

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

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

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

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

   или

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

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

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

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

Обозреватель решений отображается проект webview2_sample_uwp:

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

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

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

   

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

   Выполняется сборка проекта.

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

   На мгновение появляется пустое окно сетки:

   

   Затем в окне примера приложения отображается содержимое веб-страницы:

   

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

Затем обновите пакеты NuGet для проекта согласно следующим разделам.

Шаг 6. Обновление пакетов NuGet

На этом шаге мы обновим пакеты NuGet проекта, чтобы получить последнюю предварительную версию пакета SDK для WinUI 2. Пакет SDK для WinUI 2 включает совместимую предварительную версию или версию пакета SDK для WebView2.

Обновите пакеты NuGet проекта:

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

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

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

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

   Указана предварительная версия пакета Microsoft.UI.Xaml , указывающая на пакет SDK для WinUI 2. Пакет Microsoft.UI.Xaml включает пакет SDK для WebView2; Microsoft.Web.Web.WebView2 указан в разделе Зависимости пакета Microsoft.UI.Xaml . Обновление пакета Microsoft.UI.Xaml также приведет к обновлению совместимого пакета SDK Для WebView2.

4. В диспетчере пакетов NuGet щелкните вкладку Обновления.

5. Щелкните карта Microsoft.UI.Xaml слева.

6. В текстовом поле Версия убедитесь, что выбрана последняя предварительная версия .

7. Нажмите кнопку Обновить справа:

   

   После получения последних пакетов, что может занять несколько минут, откроется диалоговое окно Предварительный просмотр изменений . Microsoft.Web.WebView2 (пакет SDK для WebView2) указан отдельно в диалоговом окне Предварительный просмотр изменений :

   

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

9. Откроется диалоговое окно Принятие лицензии :

   

10. Нажмите кнопку Принимаю . В Visual Studio readme.txt отобразится файл с сообщением о том, что вы установили пакет WinUI:

    

    В средстве чтения перечислены некоторые строки кода, аналогичные тому, который мы добавим.

11. Обновите пакет NuGet Microsoft.NETCore.UniversalWindowsPlatform , выполнив аналогичные действия.

    После получения последних пакетов UWP, что может занять несколько минут, откроется диалоговое окно Предварительный просмотр изменений :

    

12. Выберите Файл>Сохранить все.

    Теперь вы установили пакет Microsoft.UI.Xaml, который является WinUI (WinUI 2) для проекта. Проверьте результирующие установленные пакеты следующим образом:

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

    • Microsoft.NETCore.UniversalWindowsPlatform
    • Microsoft.UI.Xaml — предварительная версия

    

14. Закройте окно диспетчера пакетов NuGet .

Шаг 7. Сборка и запуск проекта с обновленными пакетами

Теперь, когда пакеты NuGet обновлены, выполните сборку и запустите проект снова:

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

   Выполняется сборка проекта.

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

   На мгновение появляется пустое окно сетки:

   

   Затем в окне примера приложения отображается содержимое веб-страницы:

   

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

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

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

   

См. также

• Справочник по API WebView2
• Начало работы с WebView2 в приложениях WinUI 2 (UWP)