Ćwiczenie — tworzenie i uruchamianie aplikacji hybrydowej platformy Blazor

Zacznijmy od utworzenia pierwszej aplikacji internetowej platformy Blazor.

W tym module jest używany program Visual Studio 2022 do programowania lokalnego. Po ukończeniu tego modułu możesz zastosować jego koncepcje przy użyciu środowiska programistycznego, takiego jak Visual Studio Code.

Wymagania dotyczące programowania w programie .NET MAUI

Aby utworzyć aplikacje .NET MAUI na platformie .NET 9, należy zainstalować program Visual Studio w wersji 17.12 lub nowszej z zainstalowanym następującym obciążeniem:

• Programowanie interfejsu użytkownika aplikacji wieloplatformowych platformy .NET

Ponadto, jeśli chcesz utworzyć aplikacje .NET MAUI Blazor, musisz zainstalować pakiet ASP.NET do rozwijania aplikacji internetowych.

Zobacz dokumentację, aby uzyskać przewodnik konfiguracji.

Programowanie za pomocą programu Visual Studio Code

Jeśli programujesz w systemie macOS lub Linux, musisz zainstalować program Visual Studio Code i rozszerzenie .NET MAUI wraz z zestawem .NET SDK i obciążeniem .NET MAUI. Zobacz dokumentację, aby uzyskać przewodnik konfiguracji.

Utwórz nową aplikację hybrydową Blazor

Blazor Hybrid w strukturze projektu .NET MAUI i uruchomieniu

Projekt jest normalnym projektem .NET MAUI z dodatkową zawartością związaną z Blazor.

Pliki projektu Blazor

• wwwroot: ten folder zawiera statyczne zasoby internetowe używane przez platformę Blazor, w tym pliki HTML, CSS, JavaScript i image.

• Składniki: ten folder zawiera kilka podfolderów i składników razor dla aplikacji.

  • Układ: ten folder zawiera udostępnione składniki Razor, w tym główny układ aplikacji i menu nawigacji.

  • Strony: ten folder zawiera trzy składniki Razor —Counter.razor i Home.razorWeather.razor— definiujące trzy strony tworzące interfejs użytkownika platformy Blazor.

  • _Imports.razor: ten plik definiuje przestrzenie nazw importowane do każdego składnika Razor.

  • Routes.razor: główny składnik Razor dla aplikacji, która konfiguruje router Blazor do obsługi nawigacji stron w widoku internetowym.

Pliki projektu .NET MAUI

• App.xaml: ten plik definiuje zasoby aplikacji używane przez aplikację w układzie XAML. Zasoby domyślne znajdują się w folderze Resources i definiują kolory dla całej aplikacji i domyślne style dla każdej wbudowanej kontrolki programu .NET MAUI.

• App.xaml.cs: plik zaplecza kodu dla App.xaml. Ten plik definiuje klasę App. Ta klasa reprezentuje aplikację w czasie wykonywania. Konstruktor w tej klasie tworzy początkowe okno i przypisuje je do MainPage właściwości. Ta właściwość określa, która strona jest wyświetlana po uruchomieniu aplikacji. Ponadto ta klasa umożliwia zastąpienie typowych procedur obsługi zdarzeń cyklu życia aplikacji neutralnych dla platformy. Zdarzenia obejmują OnStart, OnResumei OnSleep.

• MainPage.xaml: ten plik zawiera definicję interfejsu użytkownika. Przykładowa aplikacja wygenerowana przez szablon .NET MAUI Blazor App zawiera BlazorWebView, który ładuje składnik Components.Routes na określonej stronie HTML hosta (wwwroot/index.html) w miejscu określonym przez selektor 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: kod strony. W tym pliku zdefiniujesz logikę dla różnych obsług zdarzeń i innych akcji, które wyzwalają kontrolki .NET MAUI na stronie. Przykładowy kod w szablonie ma tylko domyślny konstruktor, ponieważ cały interfejs użytkownika i zdarzenia znajdują się w składnikach Blazor.

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

• MauiProgram.cs: każda platforma natywna ma inny punkt wyjścia, który tworzy i inicjuje aplikację. Ten kod można znaleźć w folderze Platformy w projekcie. Ten kod jest specyficzny dla platformy, ale na końcu wywołuje metodę CreateMauiApp klasy statycznej MauiProgram. Używasz metody CreateMauiApp do konfigurowania aplikacji poprzez utworzenie obiektu budowniczego aplikacji. Co najmniej należy określić, która klasa opisuje aplikację. Można to zrobić za UseMauiApp pomocą metody ogólnej obiektu konstruktora aplikacji. Parametr typu określa klasę aplikacji. Konstruktor aplikacji udostępnia również metody zadań, takich jak rejestrowanie czcionek, konfigurowanie usług na potrzeby wstrzykiwania zależności, rejestrowanie niestandardowych procedur obsługi dla kontrolek i nie tylko. Poniższy kod przedstawia przykład użycia narzędzia do tworzenia aplikacji do rejestrowania czcionki, rejestrowania usługi pogodowej i dodawania obsługi platformy Blazor Hybrid za pomocą metody 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();
      }
  }
  

Uruchom aplikację

Spowoduje to skompilowanie i uruchomienie aplikacji w systemie Windows, a następnie ponowne skompilowanie i ponowne uruchomienie aplikacji przy każdym wprowadzeniu zmian w kodzie. Aplikacja powinna zostać automatycznie otwarta w systemie Windows. Możesz również zmienić cel wdrożenia za pomocą menu rozwijanego debugowania, aby wdrożyć je na systemach Android lub innych platformach.

W kilku następnych ćwiczeniach użyjesz tej aplikacji hybrydowej Blazor.