Tworzenie aplikacji za .NET MAUIBlazor Hybrid pomocą Blazor aplikacji internetowej

Artykuł
05/03/2024

W tym artykule pokazano, jak utworzyć aplikację .NET MAUIBlazor Hybrid za pomocą aplikacji internetowej korzystającej z Blazor udostępnionego interfejsu użytkownika za pośrednictwem Razor biblioteki klas (RCL).

Wymagania wstępne i wstępne kroki

Aby zapoznać się z wymaganiami wstępnymi i wstępnymi krokami, zobacz Tworzenie .NET MAUIBlazor Hybrid aplikacji. Zalecamy użycie samouczka w celu skonfigurowania systemu lokalnego .NET MAUIBlazor Hybrid na potrzeby .NET MAUI programowania przed użyciem wskazówek zawartych w tym artykule.

.NET MAUIBlazor Przykładowa aplikacja internetowa

Uzyskaj przykładową aplikację o nazwie MauiBlazorWeb z Blazor repozytorium GitHub przykładów () (dotnet/blazor-samples.NET 8 lub nowsza).

Przykładowa aplikacja to rozwiązanie początkowe, które zawiera aplikację (natywną .NET MAUIBlazor Hybrid , Blazor międzyplatformową), aplikację internetową i Razor bibliotekę klas (RCL), która zawiera udostępniony interfejs użytkownika (Razor składniki) używany przez aplikacje natywne i internetowe.

Migrowanie .NET MAUIBlazor Hybrid rozwiązania

Zamiast korzystać z przykładowej aplikacji, możesz zmigrować istniejącą .NET MAUIBlazor Hybrid aplikację ze wskazówkami w tej sekcji przy użyciu programu Visual Studio.

Dodaj nowy projekt do rozwiązania przy użyciu szablonu Blazor projektu Aplikacji internetowej. Wybierz jedną z następujących opcji:

Nazwa projektu: użyj nazwy rozwiązania z dołączonym elementem .Web . W przykładach w tym artykule przyjęto założenie następującego nazewnictwa:
- Rozwiązanie: MauiBlazorWeb
- Projekt MAUI: MauiBlazorWeb.Maui
- Blazor Aplikacja internetowa: MauiBlazorWeb.Web
- Razor biblioteka klas (RCL) (dodana w późniejszym kroku): MauiBlazorWeb.Shared
Typ uwierzytelniania: Brak
Konfigurowanie dla protokołu HTTPS: wybrane (włączone)
Tryb renderowania interakcyjnego: serwer
Lokalizacja interakcyjności: globalna
Przykładowe strony: niezaznaczone (wyłączone)

Ustawienie Lokalizacja interakcyjności na Global jest ważne, ponieważ aplikacje MAUI zawsze działają interaktywnie i zgłaszają błędy na Razor stronach składników, które jawnie określają tryb renderowania. Jeśli nie używasz trybu renderowania globalnego, musisz zaimplementować podejście opisane w sekcji Korzystanie z Blazor trybów renderowania po wykonaniu wskazówek w tej sekcji. Aby uzyskać więcej informacji, zobacz BlazorWebView wymaga sposobu włączenia zastępowania ResolveComponentForRenderMode (dotnet/aspnetcore #51235).

Dodaj nowy Razor projekt biblioteki klas (RCL) do rozwiązania. W przykładach w tym artykule przyjęto założenie, że projekt ma nazwę MauiBlazorWeb.Shared. Nie wybieraj stron i widoków pomocy technicznej podczas dodawania projektu do rozwiązania.

Dodaj odwołania do listy RCL zarówno z projektu MAUI, jak i Blazor projektu aplikacji internetowej.

Components Przenieś folder i całą jego zawartość z projektu MAUI do listy RCL. Upewnij się, że Components folder został usunięty z projektu MAUI.

Napiwek

Podczas przenoszenia folderu lub pliku w programie Visual Studio użyj poleceń klawiaturowych lub menu skrótów, klikając prawym przyciskiem myszy operację wycinania i wklejania. Przeciągnięcie folderu w programie Visual Studio powoduje skopiowanie tylko z jednej lokalizacji do innej, co wymaga wykonania dodatkowego kroku w celu usunięcia oryginału.

css Przenieś folder z wwwroot folderu projektu MAUI do folderu listy RCLwwwroot.

Usuń następujące pliki z folderu listy RCL wwwroot :

background.png
exampleJsInterop.js

Na liście RCL zastąp plik główny _Imports.razor plikiem w folderze listy RCL, zastępując istniejący plik na liście RCL Components i usuwając oryginał w folderze Components . Po przeniesieniu pliku otwórz go i zmień nazwę ostatnich dwóch @using instrukcji, aby pasować do przestrzeni nazw listy RCL. W poniższym przykładzie przestrzeń nazw listy RCL to MauiBlazorWeb.Shared:

@using MauiBlazorWeb.Shared
@using MauiBlazorWeb.Shared.Components

W katalogu głównym projektu listy RCL usuń następujące pliki:

Component1.razor
ExampleJsInterop.cs

Na liście RCL otwórz Components/Routes.razor plik i zmień go MauiProgram na Routes:

- <Router AppAssembly="@typeof(MauiProgram).Assembly">
+ <Router AppAssembly="@typeof(Routes).Assembly">

MainPage.xaml Otwórz plik w projekcie MAUI. xmlns:shared Dodaj odwołanie do listy RCL w atrybutachContentPage. W poniższym przykładzie przestrzeń nazw listy RCL to MauiBlazorWeb.Shared. Ustaw poprawną wartość dla parametru clr-namespaceassemblyi :

xmlns:shared="clr-namespace:MauiBlazorWeb.Shared;assembly=MauiBlazorWeb.Shared"

Ponadto w MainPage.xaml pliku zaktualizuj BlazorWebView składnik ComponentType główny z local do :shared

- <RootComponent Selector="#app" ComponentType="{x:Type local:Components.Routes}" />
+ <RootComponent Selector="#app" ComponentType="{x:Type shared:Components.Routes}" />

W projekcie MAUI otwórz wwwroot/index.html plik i zmień arkusze stylów, aby wskazać statyczną ścieżkę zasobu listy RCL.

Usuń następujące wiersze:

- <link rel="stylesheet" href="css/bootstrap/bootstrap.min.css" />
- <link rel="stylesheet" href="css/app.css" />

Zastąp powyższe wiersze następującym znacznikiem. W poniższym przykładzie statyczna ścieżka zasobu listy RCL to _content/MauiBlazorWeb.Shared/:

<link rel="stylesheet" href="_content/MauiBlazorWeb.Shared/css/bootstrap/bootstrap.min.css" />
<link rel="stylesheet" href="_content/MauiBlazorWeb.Shared/css/app.css" />

Blazor W aplikacji internetowej otwórz _Imports.razor plik i dodaj następujące dwie @using instrukcje dla listy RCL. W poniższym przykładzie przestrzeń nazw listy RCL to MauiBlazorWeb.Shared:

@using MauiBlazorWeb.Shared
@using MauiBlazorWeb.Shared.Components

W projekcie Blazor Aplikacja internetowa otwórz App składnik (Components/App.razor). app.css Usuń arkusz stylów:

- <link rel="stylesheet" href="app.css" />

Zastąp poprzedni wiersz odwołaniami do statycznego arkusza stylów elementów zawartości listy RCL. W poniższym przykładzie statyczna ścieżka zasobu listy RCL to _content/MauiBlazorWeb.Shared/:

<link rel="stylesheet" href="_content/MauiBlazorWeb.Shared/css/bootstrap/bootstrap.min.css" />
<link rel="stylesheet" href="_content/MauiBlazorWeb.Shared/css/app.css" />

W projekcie Blazor aplikacji internetowej usuń następujący folder i pliki:

Components/Layout Folder
Components/Routes.razor
Components/Pages/Home.razor
wwwroot/app.css

Blazor Otwórz plik aplikacji Program.cs internetowej i dodaj dodatkowy zestaw dla listy RCL do aplikacji. W poniższym przykładzie przestrzeń nazw listy RCL to MauiBlazorWeb.Shared:

app.MapRazorComponents<App>()
    .AddInteractiveServerRenderMode()
    .AddAdditionalAssemblies(typeof(MauiBlazorWeb.Shared._Imports).Assembly);

Uruchom projekt MAUI, wybierając projekt w Eksplorator rozwiązań i używając przycisku Start programu Visual Studio.

Blazor Uruchom projekt aplikacji internetowej, wybierając Blazor projekt aplikacji internetowej w Eksplorator rozwiązań i używając przycisku Start programu Visual Studio z konfiguracją https kompilacji.

Jeśli wystąpi błąd kompilacji, że nie można rozpoznać zestawu listy RCL, najpierw skompiluj projekt listy RCL. Jeśli w kompilacji wystąpią jakiekolwiek błędy zasobów projektu MAUI, ponownie skompiluj projekt MAUI, aby wyczyścić błędy.

Używanie Blazor trybów renderowania

Skorzystaj ze wskazówek w jednej z poniższych podsekcji, które są zgodne ze specyfikacjami aplikacji dotyczącymi stosowania Blazortrybów renderowania dla danej lokalizacji interakcyjności w Blazor aplikacji internetowej, ale ignoruj przypisania trybu renderowania w projekcie MAUI.

Podsekcje dotyczące trybu renderowania i specyfikacji interakcyjności:

Interakcyjność serwera globalnego
Globalna interakcyjność automatycznego lub zestawu WebAssembly
Interakcyjność serwera na stronę/składnik
Automatyczna interakcyjność poszczególnych stron/składników
Interakcyjność zestawu WebAssembly na stronie/składniku

Interakcyjność serwera globalnego

Tryb renderowania interakcyjnego: serwer
Lokalizacja interakcyjności: globalna
Projekty rozwiązań
- MAUI (MauiBlazorWeb.Maui)
- Blazor Aplikacja internetowa (MauiBlazorWeb.Web)
- Lista RCL (MauiBlazorWeb.Shared): zawiera składniki udostępnione Razor bez ustawiania trybów renderowania w każdym składniku.

Odwołania do projektu: MauiBlazorWeb.Maui i MauiBlazorWeb.Web mają odwołanie do MauiBlazorWeb.Sharedprojektu .

Globalna interakcyjność automatycznego lub zestawu WebAssembly

Tryb renderowania interakcyjnego: Auto lub WebAssembly
Lokalizacja interakcyjności: globalna
Projekty rozwiązań
- MAUI (MauiBlazorWeb.Maui)
- Blazor Aplikacja internetowa
  - Projekt serwera: MauiBlazorWeb.Web
  - Projekt klienta: MauiBlazorWeb.Web.Client
- Lista RCL (MauiBlazorWeb.Shared): zawiera składniki udostępnione Razor bez ustawiania trybów renderowania w każdym składniku.

Odwołania do projektu:

MauiBlazorWeb.Mauiprojekty , MauiBlazorWeb.Webi MauiBlazorWeb.Web.Client mają odwołanie do MauiBlazorWeb.Sharedprojektu .
MauiBlazorWeb.Webzawiera odwołanie do projektu .MauiBlazorWeb.Web.Client

Interakcyjność serwera na stronę/składnik

Tryb renderowania interakcyjnego: serwer
Lokalizacja interakcyjności: na stronie/składniku
Projekty rozwiązań
- MAUI (MauiBlazorWeb.Maui): wywołania InteractiveRenderSettings.ConfigureBlazorHybridRenderModes w pliku MauiProgram.cs.
- BlazorAplikacja internetowa (MauiBlazorWeb.Web): nie ustawia @rendermode atrybutu dyrektywy na HeadOutlet składnikach App i Routes (Components/App.razor).
- Lista RCL (MauiBlazorWeb.Shared): zawiera składniki udostępnione Razor , które ustawiają tryb renderowania InteractiveServer w każdym składniku.

MauiBlazorWeb.Mauii MauiBlazorWeb.Web mają odwołanie do projektu .MauiBlazorWeb.Shared

Dodaj następującą InteractiveRenderSettings klasę do listy RCL. Właściwości klasy służą do ustawiania trybów renderowania składników.

Projekt MAUI jest domyślnie interaktywny, więc żadne działanie nie jest wykonywane na poziomie projektu w projekcie MAUI innym niż wywoływanie metody InteractiveRenderSettings.ConfigureBlazorHybridRenderModes.

Blazor W przypadku aplikacji internetowej na kliencie internetowym wartości właściwości są przypisywane z RenderModeadresu . Gdy składniki są ładowane do BlazorWebView elementu dla natywnego klienta projektu MAUI, tryby renderowania są nieprzypisane (null), ponieważ projekt MAUI jawnie ustawia właściwości trybu renderowania na null po ConfigureBlazorHybridRenderModes wywołaniu.

InteractiveRenderSettings.cs:

using Microsoft.AspNetCore.Components;
using Microsoft.AspNetCore.Components.Web;

namespace MauiBlazorWeb.Shared;

public static class InteractiveRenderSettings
{
    public static IComponentRenderMode? InteractiveServer { get; set; } = 
        RenderMode.InteractiveServer;
    public static IComponentRenderMode? InteractiveAuto { get; set; } = 
        RenderMode.InteractiveAuto;
    public static IComponentRenderMode? InteractiveWebAssembly { get; set; } = 
        RenderMode.InteractiveWebAssembly;

    public static void ConfigureBlazorHybridRenderModes()
    {
        InteractiveServer = null;
        InteractiveAuto = null;
        InteractiveWebAssembly = null;
    }
}

W MauiProgram.CreateMauiApp pliku MauiProgram.cswywołaj metodę ConfigureBlazorHybridRenderModes:

InteractiveRenderSettings.ConfigureBlazorHybridRenderModes();

W pliku listy RCL _Imports.razor dodaj następującą globalną dyrektywę statyczną @using , aby udostępnić właściwości klasy składnikom:

@using static InteractiveRenderSettings

Uwaga

Przypisywanie trybów renderowania za pośrednictwem właściwości klasy listy RCL InteractiveRenderSettings różni się od typowej autonomicznej Blazor aplikacji internetowej. Blazor W aplikacji internetowej tryby renderowania są zwykle udostępniane RenderMode za pośrednictwem @using static Microsoft.AspNetCore.Components.Web.RenderMode instrukcji w Blazor pliku aplikacji _Import internetowej.

Automatyczna interakcyjność poszczególnych stron/składników

Tryb renderowania interakcyjnego: Auto
Lokalizacja interakcyjności: na stronie/składniku
Projekty rozwiązań
- MAUI (MauiBlazorWeb.Maui): wywołania InteractiveRenderSettings.ConfigureBlazorHybridRenderModes w pliku MauiProgram.cs.
- Blazor Aplikacja internetowa
  - Projekt serwera: : nie ustawia @rendermode atrybutu dyrektywy na HeadOutlet składnikach App i Routes składnika (Components/App.razor). MauiBlazorWeb.Web
  - Projekt klienta: MauiBlazorWeb.Web.Client
- Lista RCL (MauiBlazorWeb.Shared): zawiera składniki udostępnione Razor , które ustawiają tryb renderowania InteractiveAuto w każdym składniku.

Odwołania do projektu:

MauiBlazorWeb.Maui, MauiBlazorWeb.Webi MauiBlazorWeb.Web.Client mają odwołanie do MauiBlazorWeb.Sharedprojektu .
MauiBlazorWeb.Webzawiera odwołanie do projektu .MauiBlazorWeb.Web.Client

Dodaj następującą InteractiveRenderSettings klasę do listy RCL. Właściwości klasy służą do ustawiania trybów renderowania składników.

InteractiveRenderSettings.cs:

using Microsoft.AspNetCore.Components;
using Microsoft.AspNetCore.Components.Web;

namespace MauiBlazorWeb.Shared;

public static class InteractiveRenderSettings
{
    public static IComponentRenderMode? InteractiveServer { get; set; } = 
        RenderMode.InteractiveServer;
    public static IComponentRenderMode? InteractiveAuto { get; set; } = 
        RenderMode.InteractiveAuto;
    public static IComponentRenderMode? InteractiveWebAssembly { get; set; } = 
        RenderMode.InteractiveWebAssembly;

    public static void ConfigureBlazorHybridRenderModes()
    {
        InteractiveServer = null;
        InteractiveAuto = null;
        InteractiveWebAssembly = null;
    }
}

W MauiProgram.CreateMauiApp pliku MauiProgram.cswywołaj metodę ConfigureBlazorHybridRenderModes:

InteractiveRenderSettings.ConfigureBlazorHybridRenderModes();

W pliku listy RCL _Imports.razor dodaj następującą globalną dyrektywę statyczną @using , aby udostępnić właściwości klasy składnikom:

@using static InteractiveRenderSettings

Uwaga

Interakcyjność zestawu WebAssembly na stronie/składniku

Tryb renderowania interakcyjnego: Zestaw WebAssembly
Lokalizacja interakcyjności: na stronie/składniku
Projekty rozwiązań
- MAUI (MauiBlazorWeb.Maui)
- Blazor Aplikacja internetowa
  - Projekt serwera: : nie ustawia @rendermode atrybutu dyrektywy na HeadOutlet składnikach App i Routes składnika (Components/App.razor). MauiBlazorWeb.Web
  - Projekt klienta: MauiBlazorWeb.Web.Client
- Listy RCLS
  - MauiBlazorWeb.Shared
  - MauiBlazorWeb.Shared.Client: zawiera udostępnione Razor składniki, które ustawiają tryb renderowania InteractiveWebAssembly w każdym składniku. Lista .Shared.Client RCL jest przechowywana oddzielnie od .Shared listy RCL, ponieważ aplikacja powinna obsługiwać składniki wymagane do uruchamiania w zestawie WebAssembly oddzielnie od składników uruchamianych na serwerze i pozostających na serwerze.

Odwołania do projektu:

MauiBlazorWeb.Maui i MauiBlazorWeb.Web mają odwołania do projektu do MauiBlazorWeb.Shared.
MauiBlazorWeb.Webzawiera odwołanie do projektu .MauiBlazorWeb.Web.Client
MauiBlazorWeb.Web.Clienti MauiBlazorWeb.Shared mają odwołanie do projektu .MauiBlazorWeb.Shared.Client

Dodaj następujący AdditionalAssemblies parametr do Router wystąpienia składnika dla MauiBlazorWeb.Shared.Client zestawu projektu (za pośrednictwem _Imports jego pliku) w MauiBlazorWeb.Shared pliku projektu Routes.razor :

<Router AppAssembly="@typeof(Routes).Assembly" 
        AdditionalAssemblies="new [] { typeof(MauiBlazorWeb.Shared.Client._Imports).Assembly }">
    <Found Context="routeData">
        <RouteView RouteData="@routeData" DefaultLayout="@typeof(Components.Layout.MainLayout)" />
        <FocusOnNavigate RouteData="@routeData" Selector="h1" />
    </Found>
</Router>

MauiBlazorWeb.Shared.Client Dodaj zestaw projektu (za pośrednictwem pliku_Imports) za pomocą następującego AddAdditionalAssembliesMauiBlazorWeb.Web wywołania w pliku projektuProgram.cs:

app.MapRazorComponents<App>()    
    .AddInteractiveWebAssemblyRenderMode()
    .AddAdditionalAssemblies(typeof(MauiBlazorWeb.Shared._Imports).Assembly)
    .AddAdditionalAssemblies(typeof(MauiBlazorWeb.Shared.Client._Imports).Assembly);

Dodaj następującą InteractiveRenderSettings klasę do listy .Shared.Client RCL. Właściwości klasy służą do ustawiania trybów renderowania składników dla składników opartych na serwerze.

InteractiveRenderSettings.cs (.Shared.Client Lista RCL):

using Microsoft.AspNetCore.Components;
using Microsoft.AspNetCore.Components.Web;

namespace MauiBlazorWeb.Shared;

public static class InteractiveRenderSettings
{
    public static IComponentRenderMode? InteractiveServer { get; set; } = 
        RenderMode.InteractiveServer;
    public static IComponentRenderMode? InteractiveAuto { get; set; } = 
        RenderMode.InteractiveAuto;
    public static IComponentRenderMode? InteractiveWebAssembly { get; set; } = 
        RenderMode.InteractiveWebAssembly;

    public static void ConfigureBlazorHybridRenderModes()
    {
        InteractiveServer = null;
        InteractiveAuto = null;
        InteractiveWebAssembly = null;
    }
}

Do listy RCL jest dodawana .Shared nieco inna wersja InteractiveRenderSettings klasy. W klasie dodanej do .Shared listy RCL wywoływana jest lista RCL InteractiveRenderSettings.ConfigureBlazorHybridRenderModes.Shared.Client . Dzięki temu tryb renderowania składników WebAssembly renderowanych na kliencie MAUI jest nieprzypisany (null), ponieważ są one domyślnie interakcyjne na kliencie natywnym.

InteractiveRenderSettings.cs (.Shared Lista RCL):

using Microsoft.AspNetCore.Components;
using Microsoft.AspNetCore.Components.Web;

namespace MauiBlazorWeb.Shared
{
    public static class InteractiveRenderSettings
    {
        public static IComponentRenderMode? InteractiveServer { get; set; } = 
            RenderMode.InteractiveServer;
        public static IComponentRenderMode? InteractiveAuto { get; set; } = 
            RenderMode.InteractiveAuto;
        public static IComponentRenderMode? InteractiveWebAssembly { get; set; } = 
            RenderMode.InteractiveWebAssembly;

        public static void ConfigureBlazorHybridRenderModes()
        {
            InteractiveServer = null;
            InteractiveAuto = null;
            InteractiveWebAssembly = null;
            MauiBlazorWeb.Shared.Client.InteractiveRenderSettings
                .ConfigureBlazorHybridRenderModes();
        }
    }
}

W MauiProgram.CreateMauiApp pliku MauiProgram.cswywołaj metodę ConfigureBlazorHybridRenderModes:

InteractiveRenderSettings.ConfigureBlazorHybridRenderModes();

_Imports.razor W pliku .Shared.Client listy RCL dodaj @using static InteractiveRenderSettings , aby udostępnić właściwości InteractiveRenderSettings klasy składnikom:

@using static InteractiveRenderSettings

Uwaga

Używanie interfejsów do obsługi różnych implementacji urządzeń

W poniższym przykładzie pokazano, jak używać interfejsu do wywoływania różnych implementacji w aplikacji internetowej i natywnej aplikacji (MAUI). Poniższy przykład tworzy składnik, który wyświetla współczynnik formularza urządzenia. Użyj warstwy abstrakcji MAUI dla aplikacji natywnych i zapewnij implementację aplikacji internetowej.

W bibliotece Razor klas (RCL) utwórz Interfaces folder i dodaj plik o nazwie IFormFactor.cs przy użyciu następującego kodu.

Interfaces/IFormFactor.cs:

namespace MauiBlazorWeb.Shared.Interfaces;

public interface IFormFactor
{
    public string GetFormFactor();
    public string GetPlatform();
}

W folderze listy RCL Components dodaj następujący DeviceFormFactor składnik.

Components/Pages/DeviceFormFactor.razor:

@page "/device-form-factor"
@using MauiBlazorWeb.Shared.Interfaces
@inject IFormFactor FormFactor

<PageTitle>Form Factor</PageTitle>

<h1>Device Form Factor</h1>

<p>You are running on:</p>

<ul>
    <li>Form Factor: @factor</li>
    <li>Platform: @platform</li>
</ul>

<p>
    <em>This component is defined in the MauiBlazorWeb.Shared library.</em>
</p>

@code {
    private string factor => FormFactor.GetFormFactor();
    private string platform => FormFactor.GetPlatform();
}

Na liście RCL dodaj wpis składnika DeviceFormFactor do menu nawigacji.

W pliku Components/Layout/NavMenu.razor:

<div class="nav-item px-3">
    <NavLink class="nav-link" href="device-form-factor">
        <span class="bi bi-list-nested-nav-menu" aria-hidden="true"></span> Form Factor
    </NavLink>
</div>

Udostępniaj implementacje w aplikacjach internetowych i natywnych.

Blazor W aplikacji internetowej dodaj folder o nazwie Services. Dodaj plik do Services folderu o nazwie przy użyciu FormFactor.cs następującego kodu.

Services/FormFactor.cs (Blazor Projekt aplikacji internetowej):

using MauiBlazorWeb.Shared.Interfaces;

namespace MauiBlazorWeb.Web.Services;

public class FormFactor : IFormFactor
{
    public string GetFormFactor()
    {
        return "Web";
    }
    public string GetPlatform()
    {
        return Environment.OSVersion.ToString();
    }
}

W projekcie MAUI dodaj folder o nazwie Services i dodaj plik o nazwie FormFactor.cs. Warstwa abstrakcji MAUI służy do pisania kodu, który działa na wszystkich platformach urządzeń natywnych.

Services/FormFactor.cs (Projekt MAUI):

using MauiBlazorWeb.Shared.Interfaces;

namespace MauiBlazorWeb.Maui.Services;

public class FormFactor : IFormFactor
{
    public string GetFormFactor()
    {
        return DeviceInfo.Idiom.ToString();
    }
    public string GetPlatform()
    {
        return DeviceInfo.Platform.ToString() + " - " + DeviceInfo.VersionString;
    }
}

Użyj iniekcji zależności, aby uzyskać implementacje tych usług.

W projekcie MAUI otwórz MauiProgram.cs plik i dodaj następujące using instrukcje na początku pliku:

using MauiBlazorWeb.Maui.Services;
using MauiBlazorWeb.Shared.Interfaces;

Bezpośrednio przed wywołaniem builder.Build()metody dodaj następujący kod, aby dodać usługi specyficzne dla urządzenia używane przez listę RCL:

builder.Services.AddSingleton<IFormFactor, FormFactor>();

Blazor W aplikacji internetowej otwórz Program plik i dodaj następujące using instrukcje na początku pliku:

using MauiBlazorWeb.Shared.Interfaces;
using MauiBlazorWeb.Web.Services;

Bezpośrednio przed wywołaniem builder.Build()metody dodaj następujący kod, aby dodać usługi specyficzne dla urządzenia używane przez listę RCL:

builder.Services.AddScoped<IFormFactor, FormFactor>();

Jeśli rozwiązanie jest również przeznaczone dla zestawu WebAssembly za pośrednictwem .Web.Client projektu, implementacja poprzedniego interfejsu API jest również wymagana w projekcie .Web.Client .

Możesz również użyć dyrektyw preprocesora kompilatora na liście RCL, aby zaimplementować inny interfejs użytkownika w zależności od urządzenia, na którym działa aplikacja. W tym scenariuszu aplikacja musi mieć wiele docelowych list RCL, podobnie jak w przypadku aplikacji MAUI. Przykład można znaleźć w BethMassi/BethTimeUntil repozytorium GitHub.

Udostępnij przez

Tworzenie aplikacji za .NET MAUIBlazor Hybrid pomocą Blazor aplikacji internetowej

Wymagania wstępne i wstępne kroki

.NET MAUIBlazor Przykładowa aplikacja internetowa

Migrowanie .NET MAUIBlazor Hybrid rozwiązania

Używanie Blazor trybów renderowania

Interakcyjność serwera globalnego

Globalna interakcyjność automatycznego lub zestawu WebAssembly

Interakcyjność serwera na stronę/składnik

Automatyczna interakcyjność poszczególnych stron/składników

Interakcyjność zestawu WebAssembly na stronie/składniku

Używanie interfejsów do obsługi różnych implementacji urządzeń

Dodatkowe zasoby

Opinia

Dodatkowe zasoby