Упражнение. Создание и запуск веб-приложения Blazor Hybrid

Начнем с создания вашего первого веб-приложения Blazor.

В этом модуле используется Visual Studio 2022 для локальной разработки. После завершения работы с этим модулем можно применить ее концепции с помощью среды разработки, такой как Visual Studio Code.

Требования для разработки в .NET MAUI

Чтобы создать приложения .NET MAUI с помощью .NET 9, необходимо установить Visual Studio версии 17.12 или более поздней с установленной следующей рабочей нагрузкой:

• разработка пользовательского интерфейса для многоплатформенного приложения .NET

Кроме того, если вы хотите создавать приложения .NET MAUI Blazor, нужно установить еще ASP.NET и рабочую нагрузку веб-разработки.

Ознакомьтесь с документацией по пошаговые инструкции по настройке.

Разработка с помощью Visual Studio Code

Если вы разрабатываетесь в macOS или Linux, необходимо установить Visual Studio Code и расширение .NET MAUI вместе с пакетом SDK для .NET и рабочей нагрузкой .NET MAUI. Ознакомьтесь с документацией по пошаговые инструкции по настройке.

Создание приложения Blazor Hybrid

Blazor Hybrid со структурой и запуском проекта .NET MAUI

Проект — это обычный проект MAUI .NET с дополнительным контентом Blazor.

Файлы проекта Blazor

• wwwroot: эта папка включает статические веб-ресурсы Blazor, включая HTML, CSS, JavaScript и файлы изображений.

• Компоненты: контейнеры этой папки несколько вложенных папок и компонентов razor для приложения.

  • Макет: эта папка содержит общие компоненты Razor, включая основной макет приложения и меню навигации.

  • Страницы: эта папка содержит три компонента Razor (Counter.razorHome.razor и Weather.razor), которые определяют три страницы, составляющие пользовательский интерфейс Blazor.

  • _Imports.razor: этот файл определяет пространства имен, импортируемые в каждый компонент Razor.

  • Routes.razor: корневой компонент Razor для приложения, который настраивает маршрутизатор Blazor для обработки навигации по страницам в веб-представлении.

Файлы проекта .NET MAUI

• App.xaml: этот файл определяет ресурсы приложения, используемые приложением в макете XAML. Ресурсы по умолчанию находятся в Resources папке и определяют цвета и стили по умолчанию для каждого встроенного элемента управления .NET MAUI.

• App.xaml.cs: код файла App.xaml. В этом файле определен класс App. Этот класс представляет приложение во время выполнения. Конструктор этого класса создает начальное окно и присваивает его свойству MainPage, которое определяет, какая страница будет отображаться при запуске приложения. Кроме того, этот класс позволяет переопределить общие обработчики событий жизненного цикла жизненного цикла приложений, не зависящих от платформы. К этим событиям относятся OnStart, OnResume и OnSleep.

• MainPage.xaml: этот файл содержит определение пользовательского интерфейса. В примере приложения, созданного шаблоном приложения .NET MAUI Blazor App, создается BlazorWebView компонент, который загружает Components.Routes компонент на указанной HTML-странице узла (wwwroot/index.html) в расположении, указанном селектором CSS (#app).

  <?xml version="1.0" encoding="utf-8" ?>
  <ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
              xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
              xmlns:local="clr-namespace:BlazorHybridApp"
              x:Class="BlazorHybridApp.MainPage"
              BackgroundColor="{DynamicResource PageBackgroundColor}">
  
      <BlazorWebView x:Name="blazorWebView" HostPage="wwwroot/index.html">
          <BlazorWebView.RootComponents>
              <RootComponent Selector="#app" ComponentType="{x:Type local:Components.Routes}" />
          </BlazorWebView.RootComponents>
      </BlazorWebView>
  
  </ContentPage>
  

• MainPage.xaml.cs. Код страницы находится в программной части. В этом файле вы определяете логику для различных обработчиков событий и других действий элементов управления .NET MAUI на триггере страницы. В примере кода в шаблоне представлен только конструктор по умолчанию, так как все пользовательские интерфейсы и события находятся в компонентах Blazor.

  namespace BlazorHybridApp;
  
  public partial class MainPage : ContentPage
  {
      public MainPage()
      {
          InitializeComponent();
      }
  }
  

• MauiProgram.cs. Каждая собственная платформа имеет другую начальную точку, которая создает и инициализирует приложение. Этот код можно найти в папке Platforms проекта. Этот код предназначен для конкретной платформы; в его конце вызывается метод CreateMauiApp статического класса MauiProgram. Метод CreateMauiApp используется для настройки приложения — для этого создается объект построителя приложений. Необходимо, как минимум, указать, какой класс описывает ваше приложение. Это можно сделать с UseMauiApp помощью универсального метода объекта построителя приложений; параметр типа указывает класс приложения. Построитель приложений также имеет методы для решения таких задач, как регистрация шрифтов, настройка служб для внедрения зависимостей, регистрация пользовательских обработчиков для элементов управления и пр. В следующем коде показан пример использования построителя приложений для регистрации шрифта, регистрации службы погоды и добавления поддержки Blazor Hybrid с помощью метода AddMauiBlazorWebView:

  using Microsoft.AspNetCore.Components.WebView.Maui;
  using BlazorHybridApp.Data;
  
  namespace BlazorHybridApp;
  
  public static class MauiProgram
  {
      public static MauiApp CreateMauiApp()
      {
          var builder = MauiApp.CreateBuilder();
          builder
          .UseMauiApp<App>()
          .ConfigureFonts(fonts =>
          {
              fonts.AddFont("OpenSans-Regular.ttf", "OpenSansRegular");
          });
  
          builder.Services.AddMauiBlazorWebView();
  
          #if DEBUG
          builder.Services.AddBlazorWebViewDeveloperTools();
          builder.Logging.AddDebug();
          #endif
  
          return builder.Build();
      }
  }
  

Выполнить приложение

Это создает и запускает приложение в Windows, а затем перестраивает и перезапускает приложение при внесении изменений кода. Приложение должно автоматически открываться в Windows. Вы также можете изменить целевой объект развертывания с помощью раскрывающегося меню отладки для развертывания на Android или других платформах.

Это гибридное приложение Blazor используется в следующих нескольких упражнениях.