Share via

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

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

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

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

Шаг 4. Открытие решения в 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

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

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

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

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

Пример webview2_sample_uwp, открытый в Visual Studio в Обозреватель решений

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

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

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

    Задание целевого объекта сборки в верхней части Visual Studio

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

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

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

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

    Запущенный проект webview2_sample_uwp с исходной пустой сеткой

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

    Запущенный проект webview2_sample_uwp, отображающий содержимое веб-страницы

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

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

Шаг 7. Обновление пакетов 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. Нажмите кнопку Обновить справа:

    Диспетчер пакетов NuGet для установки Microsoft.UI.Xaml

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

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

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

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

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

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

    Файл readme.txt после установки пакета Microsoft.UI.Xaml сообщает о том, что вы установили пакет NuGet WinUI.

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

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

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

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

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

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

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

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

    Обновленные установленные пакеты

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

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

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

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

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

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

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

    Запущенный проект webview2_sample_uwp с исходной пустой сеткой

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

    Запущенный проект webview2_sample_uwp, отображающий содержимое веб-страницы

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

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

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

    MainPage.xaml в Visual Studio

См. также