Начало работы с WebView2 в WinUI3 (Предварительная версия)

В этой статье приступите к созданию первого приложения WebView2 с помощью WinUI3 и ознакомьтесь с основными возможностями знакомства с Microsoft Edge WebView2 (Предварительная версия). Дополнительные сведения об отдельных API можно найти в справочнике API.

Предварительные условия

Перед переходом к следующей статье убедитесь, что вы установили приведенный ниже список предварительных условий.

Шаг 1: Создание проекта

Начните с базового классического проекта, содержащего одно главное окно.

  1. В Visual Studio выберите создать новый проект.

  2. В раскрывающемся списке Проект выберите C#, Windowsи WinUI соответственно.

    Диалоговое окно создания проекта Visual Studio для WinUI

  3. Выберите пустое приложение, упакованное (WinUI на рабочем столе), а затем нажмите кнопку Далее.

  4. Введите имя проекта, выберите нужные параметры и нажмите кнопку создать.

  5. В новом проекте универсальной платформы Windowsвыберите указанные ниже значения, а затем нажмите кнопку ОК.

    • Целевая версия: Windows 10, версия 1903 (сборка 18362) или более поздняя.
    • Минимальная версия: Windows 10, версия 1803 (сборка 17134).

    Диалоговое окно создания проекта универсальной платформы Windows с выбранными значениями для целевой версии и минимальной версии.

  6. В обозревателе решений создаются два проекта.

    • Название проекта (классическое приложение). Этот проект включает код для вашего приложения. App.XAML.CS определяет Application класс, представляющий экземпляр приложения. MainWindow.XAML.CS определяет MainWindow класс, представляющий главное окно, которое отображается в экземпляре приложения. Эти классы являются производными от типов в Microsoft.UI.Xaml пространстве имен WinUI.

    • Имя проекта (пакет). Этот проект — aWindows пакетов приложений Projectthat настроен для сборки приложения в MSIXный пакет для развертывания. Проект содержит thepackage manifestfor вашего приложения, и по умолчанию он является запускаемым проектом для вашего решения. Дополнительные сведения можно найти в разделе Настройка классического приложения для MSIX упаковки в Visual Studio и Справочник по схеме манифеста пакета для Windows 10.

  7. В обозревателе решений откройте окно MainWindow. XAML , чтобы отобразить код. Выберите F5 , чтобы запустить проект и отобразить окно с кнопкой.

Шаг 2: Добавление элемента управления WebView2 в проект

Затем добавьте элемент управления WebView2 в проект.

  1. Open (открыть) MainWindow.xaml . Добавьте пространство имен XAML WebView2 с помощью вставки в тег следующей строки <Window/> .

    xmlns:controls="using:Microsoft.UI.Xaml.Controls"
    

    Убедитесь, что ваш код MainWindow.xaml похож на следующий фрагмент кода.

    <Window
          x:Class="WinUI_Sample.MainWindow"
          xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
          xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
          xmlns:local="using:WinUI_Sample"
          xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
          xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
          mc:Ignorable="d"
          xmlns:controls="using:Microsoft.UI.Xaml.Controls"
          >
    
          <StackPanel Orientation="Horizontal" HorizontalAlignment="Center" VerticalAlignment="Center">
            <Button x:Name="myButton" Click="myButton_Click">Click Me</Button>
          </StackPanel>
    
    </Window>
    
  2. Чтобы добавить элемент управления WebView2, замените <StackPanel> теги на следующий фрагмент кода. SourceСвойство задает начальный URI, отображаемый в элементе управления WebView2.

    <Grid>
    
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*" />
            <ColumnDefinition Width="Auto" />
        </Grid.ColumnDefinitions>
    
        <controls:WebView2 x:Name="MyWebView"  Grid.Row="1" Grid.ColumnSpan="2" 
            Source="https://www.microsoft.com" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" />
    
    </Grid>
    
  3. Откройте MainWindow.xaml.cs следующую строку и закомментируйте ее.

        // myButton.Content = "Clicked";     
    
  4. Выберите F5 , чтобы выполнить сборку и запустить проект. Убедитесь, что ваш элемент управления WebView2 отображается [https://www.microsoft.com][|::ref1::|Main] .

    Элемент управления WebView2, на котором отображается сайт microsoft.com

Шаг 3: Добавление элементов управления навигацией

Разрешите пользователям управлять веб-страницей, которая отображается в элементе управления WebView2, добавив адресную строку в приложение.

  1. В файле MainWindow. XAMLскопируйте и вставьте следующий фрагмент кода внутри Grid элемента, содержащего WebView2 элемент.

        <TextBox Name="addressBar" Grid.Column="0"/>
        <Button x:Name="myButton" Grid.Column="1" Click="myButton_Click">Go</Button>
    

    Убедитесь, что Grid элемент MainWindow.xaml похож на следующий фрагмент кода.

    <Grid>
    
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*" />
            <ColumnDefinition Width="Auto" />
        </Grid.ColumnDefinitions>
    
        <TextBox Name="addressBar" Grid.Column="0"/>
        <Button x:Name="myButton" Grid.Column="1" Click="myButton_Click">Go</Button>
    
        <WebView2 x:Name="MyWebView"  Grid.Row="1" Grid.ColumnSpan="2" 
            Source="https://www.microsoft.com" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" />
    
    </Grid>
    
  2. В MainWindow.XAML.CSСкопируйте приведенный ниже фрагмент кода myButton_Click , на который будет перемещаться по элементу управления WebView2 на URL-адрес, введенный в адресной строке.

    private void myButton_Click(object sender, RoutedEventArgs e)
    {
        try
        {
            Uri targetUri = new Uri(addressBar.Text);
            MyWebView.Source = targetUri;
        }
        catch (FormatException ex)
        {
            // Incorrect address entered.
        }
    }
    

    Выберите F5 , чтобы выполнить сборку и запустить проект. Введите новый URL-адрес в адресной строке и нажмите кнопку Перейти. Например, введите https://www.bing.com .

    Примечание

    Убедитесь в том, что в адресной строке используются полные URL-адреса. ArgumentException Если URL-адрес не начинается с or, возникают http:// исключения https:// .

    Bing.com

Шаг 4 — события навигации

Приложения, на которых размещаются элементы управления WebView2, прослушивают следующие события, возникающие в элементах управления WebView2 на этапе навигации веб-страницы.

  • NavigationStarting
  • SourceChanged
  • ContentLoading
  • HistoryChanged
  • NavigationCompleted

Примечание

Переадресация HTTP вызывает несколько NavigationStarting событий.

Дополнительные сведения можно найти в разделе события навигации.

При возникновении ошибок возникают следующие события, которые могут перейти на страницу ошибки.

  • SourceChanged
  • ContentLoading
  • HistoryChanged

В качестве примера использования событий Зарегистрируйте обработчик для NavigationStarting него, чтобы отменить все запросы, не ИСПОЛЬЗУЮЩИЕ HTTPS. MainWindow.xaml.csИзмените конструктор, чтобы EnsureHttps он регистрировал, и добавьте EnsureHttps функцию так, чтобы она соответствовала следующему фрагменту кода.

public MainWindow()
{
    InitializeComponent();
    MyWebView.NavigationStarting += EnsureHttps;
}

private void EnsureHttps(WebView2 sender, WebView2NavigationStartingEventArgs args)
{
    String uri = args.Uri;
    if (!uri.StartsWith("https://"))
    {
        args.Cancel = true;
    }
    else
    {
        addressBar.Text = uri;
    }
}

Выберите F5 , чтобы выполнить сборку и запустить проект. Убедитесь, что Навигация заблокирована на сайтах HTTP и разрешена для HTTPS-сайтов.

Шаг 5: создание сценариев

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

В качестве примера добавьте сценарии, отправляющие предупреждение, когда пользователь переходит на сайты, не поддерживающие HTTPS. Измените EnsureHttps функцию, чтобы внедрить сценарий в веб-содержимое с помощью ExecuteScriptAsync.

private void EnsureHttps(WebView2 sender, WebView2NavigationStartingEventArgs args)
{
    String uri = args.Uri;
    if (!uri.StartsWith("https://"))
    {
        MyWebView.ExecuteScriptAsync($"alert('{uri} is not safe, try an https link')");
        args.Cancel = true;
    }
    else
    {
        addressBar.Text = uri;
    }
}

Выберите F5 , чтобы выполнить сборку и запустить проект. Убедитесь, что ваше приложение отображает оповещение при переходе на сайт, который не использует HTTPS.

Элемент управления WebView2, в котором отображается диалоговое окно оповещения

Поздравляем! вы создали первое приложение WebView2.

Дальнейшие действия

Наша группа в настоящее время использует дополнительные API WebView2. Дополнительные сведения о текущем состоянии WebView2 API можно найти в описании спецификации WebView2.

Примечание

Объект CoreWebView2 WinRT может быть недоступен на момент отгрузки API WebView2. Чтобы узнать, какие API доступны для WebView2 элементов управления, ознакомьтесь со списком доступных API-интерфейсов в WebView2 спецификации .

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

Знакомство с командой Microsoft Edge WebView

Поделитесь своим мнением, чтобы помочь вам в создании более WebView2ных возможностей. Чтобы отправить запросы функций или ошибки или найти известные проблемы, ознакомьтесь с репозиторием отзывов и предложений Microsoft Edge WebView .