Ćwiczenie — tworzenie i uruchamianie aplikacji hybrydowej platformy Blazor

  • 8 min

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 za pomocą platformy .NET 8, należy zainstalować program Visual Studio w wersji 17.8 lub nowszej z zainstalowanym następującym obciążeniem:

  • Programowanie interfejsu użytkownika aplikacji wieloplatformowych platformy .NET

Ponadto jeśli chcesz utworzyć aplikacje platformy .NET MAUI Blazor, musisz zainstalować pakiet roboczy ASP.NET i tworzenie aplikacji internetowych.

Zapoznaj się z dokumentacją , aby zapoznać się z przewodnikiem 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. Zapoznaj się z dokumentacją , aby zapoznać się z przewodnikiem konfiguracji.

Tworzenie nowej aplikacji hybrydowej platformy Blazor

Aby skonfigurować projekt Blazor Hybrid do pracy, użyjemy programu Visual Studio 2022.

  1. W programie Visual Studio 2022 wybierz pozycję Plik>nowy projekt lub wybierz pozycję Utwórz nowy projekt z poziomu modułu uruchamiania.

  2. W polu wyszukiwania w górnej części okna dialogowego Tworzenie nowego projektu wprowadź ciąg .NET MAUI Blazor, wybierz pozycję .NET MAUI Blazor Hybrid App, a następnie wybierz przycisk Dalej.

    Zrzut ekranu przedstawiający ekran Tworzenie nowego projektu programu Visual Studio 2022 i szablon aplikacji blazor platformy .NET MAUI.

  3. Na kolejnym ekranie nadaj projektowi nazwę BlazorHybridApp i określ lokalizację na komputerze do przechowywania projektu. Zaznacz pole wyboru obok pozycji Umieść rozwiązanie i projekt w tym samym katalogu, a następnie wybierz pozycję Dalej.

    Zrzut ekranu przedstawiający ekran Konfigurowanie projektu w programie Visual Studio 2022 i zalecane ustawienia z kroku 3.

  4. Na ekranie Dodatkowe informacje wybierz pozycję .NET 8.0 (obsługa długoterminowa) z listy rozwijanej Framework, a następnie wybierz pozycję Utwórz.

  5. To polecenie tworzy podstawowy projekt hybrydowy platformy Blazor obsługiwany przez program .NET MAUI ze wszystkimi wymaganymi plikami i stronami.

    Teraz należy mieć dostęp do tych plików, a Eksplorator rozwiązań w programie Visual Studio 2022 wygląda podobnie do poniższego przykładu:

    Zrzut ekranu programu Visual Studio 2022 Eksplorator rozwiązań z listą plików w domyślnym projekcie .NET MAUI Blazor.

Aby skonfigurować projekt Blazor Hybrid do pracy, użyjemy programu Visual Studio Code.

  1. W programie Visual Studio Code otwórz Eksploratora i wybierz pozycję Utwórz projekt .NET.

  2. Wybierz pozycję .NET MAUI Blazor Hybrid App (Aplikacja hybrydowa platformy .NET MAUI Blazor) na liście rozwijanej.

    Zrzut ekranu przedstawiający ekran Tworzenie nowego projektu w programie Visual Studio Code i szablon aplikacji blazor platformy .NET MAUI.

  3. Utwórz nowy folder w wyskakującym okienku o nazwie BlazorHybridApp i wybierz pozycję Wybierz folder.

  4. Nadaj projektowi nazwę BlazorHybridApp i naciśnij Enter , aby potwierdzić.

  5. Spowoduje to utworzenie podstawowego projektu hybrydowego platformy Blazor obsługiwanego przez program .NET MAUI ze wszystkimi wymaganymi plikami i stronami.

    Teraz musisz mieć dostęp do tych plików, a Eksplorator rozwiązań w programie Visual Studio Code wygląda podobnie do następujących:

    Zrzut ekranu programu Visual Studio Code Eksplorator rozwiązań z listą plików w domyślnym projekcie platformy .NET MAUI Blazor.

Blazor Hybrid z strukturą projektu .NET MAUI i uruchamianiem

Projekt jest normalnym projektem .NET MAUI z bardziej powiązaną zawartością platformy 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: kod pliku 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 aplikacji .NET MAUI Blazor zawiera BlazorWebView element, który ładuje Components.Routes składnik na określonej stronie HTML hosta (wwwroot/index.html) w lokalizacji określonej 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 programów obsługi zdarzeń i innych akcji kontrolki .NET MAUI w wyzwalaczu strony. Przykładowy kod w szablonie ma tylko domyślny konstruktor, ponieważ wszystkie interfejsy użytkownika i zdarzenia znajdują się w składnikach platformy 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. Metoda służy do konfigurowania CreateMauiApp aplikacji przez utworzenie obiektu konstruktora 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 konstruktora aplikacji do rejestrowania czcionki, rejestrowania usługi pogodowej i dodawania obsługi platformy Blazor Hybrid za AddMauiBlazorWebView pomocą metody :

    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ę

W programie Visual Studio wybierz pozycję Debuguj>rozpocznij debugowanie

W programie Visual Studio Code wybierz pozycję Uruchom rozpocznij>debugowanie. Wybierz debuger .NET MAUI z listy rozwijanej, aby uruchomić 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.

Zrzut ekranu przedstawiający domyślną aplikację hybrydową platformy Blazor działającą w systemach Windows i Android.

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