Tworzenie aplikacji za .NET MAUIBlazor Hybrid pomocą Blazor aplikacji internetowej
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 Hybrid szablon rozwiązania i aplikacja internetowa
Szablon .NET MAUIBlazor Hybrid rozwiązania i Aplikacja internetowa konfiguruje rozwiązanie przeznaczone dla systemów Android, iOS, Mac, Windows i Web, które ponownie używa interfejsu użytkownika. Możesz wybrać tryb renderowania interaktywnego Blazor dla aplikacji internetowej i utworzyć odpowiednie projekty dla aplikacji, w tym aplikację internetową Blazor i aplikację .NET MAUIBlazor Hybrid . Udostępniona Razor biblioteka klas (RCL) obsługuje Razor składniki interfejsu użytkownika aplikacji. Szablon zawiera również przykładowy kod pokazujący, jak używać wstrzykiwania zależności w celu zapewnienia różnych implementacji interfejsu dla Blazor Hybrid aplikacji internetowej i Blazor aplikacji internetowej, która jest omówiona w sekcji Używanie interfejsów do obsługi różnych implementacji urządzeń w tym artykule.
Jeśli nie zainstalowano .NET MAUI jeszcze obciążenia, zainstaluj je teraz. Obciążenie .NET MAUI udostępnia szablon projektu:
dotnet workload install maui
Utwórz rozwiązanie na podstawie szablonu projektu za pomocą następującego polecenia interfejsu wiersza polecenia platformy .NET:
dotnet new maui-blazor-web -o MauiBlazorWeb -I Server
W powyższym poleceniu:
- Opcja
-o|--output
tworzy nowy folder dla aplikacji o nazwieMauiBlazorWeb
. - Opcja
-I|--InteractivityPlatform
ustawia tryb renderowania interakcyjności na serwer interaktywny (InteractiveServer
). Wszystkie trzy interaktywne Blazor tryby renderowania (Server
,WebAssembly
, iAuto
) są obsługiwane przez szablon projektu. Aby uzyskać więcej informacji, zobacz sekcję Używanie Blazor trybów renderowania .
Aplikacja automatycznie przyjmuje globalną interakcyjność, co 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. Aby uzyskać więcej informacji, zobacz BlazorWebView wymaga sposobu włączenia zastępowania ResolveComponentForRenderMode (dotnet/aspnetcore
#51235).
.NET MAUIBlazor Hybrid i 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
- Rozwiązanie:
- 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-namespace
assembly
i :
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
folderComponents/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 w Blazor aplikacji internetowej, ale ignoruj przypisania trybu renderowania w projekcie MAUI.
Podsekcje specyfikacji trybu 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
- Tryb renderowania interakcyjnego: serwer
- Lokalizacja interakcyjności: globalna
- Projekty rozwiązań
- MAUI (
MauiBlazorWeb
) - 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.
- MAUI (
Odwołania do projektu: MauiBlazorWeb
i MauiBlazorWeb.Web
mają odwołanie do MauiBlazorWeb.Shared
projektu .
- 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.
- MAUI (
Odwołania do projektu: MauiBlazorWeb.Maui
i MauiBlazorWeb.Web
mają odwołanie do MauiBlazorWeb.Shared
projektu .
Globalna interakcyjność automatycznego lub zestawu WebAssembly
- Tryb renderowania interakcyjnego: Auto lub WebAssembly
- Lokalizacja interakcyjności: globalna
- Projekty rozwiązań
- MAUI (
MauiBlazorWeb
) - Blazor Aplikacja internetowa
- Projekt serwera:
MauiBlazorWeb.Web
- Projekt klienta:
MauiBlazorWeb.Web.Client
- Projekt serwera:
- Lista RCL (
MauiBlazorWeb.Shared
): zawiera składniki udostępnione Razor bez ustawiania trybów renderowania w każdym składniku.
- MAUI (
Odwołania do projektu:
MauiBlazorWeb
projekty ,MauiBlazorWeb.Web
iMauiBlazorWeb.Web.Client
mają odwołanie doMauiBlazorWeb.Shared
projektu .MauiBlazorWeb.Web
zawiera odwołanie do projektu .MauiBlazorWeb.Web.Client
- 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
- Projekt serwera:
- Lista RCL (
MauiBlazorWeb.Shared
): zawiera składniki udostępnione Razor bez ustawiania trybów renderowania w każdym składniku.
- MAUI (
Odwołania do projektu:
MauiBlazorWeb.Maui
projekty ,MauiBlazorWeb.Web
iMauiBlazorWeb.Web.Client
mają odwołanie doMauiBlazorWeb.Shared
projektu .MauiBlazorWeb.Web
zawiera 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łaniaInteractiveRenderSettings.ConfigureBlazorHybridRenderModes
w plikuMauiProgram.cs
. - BlazorAplikacja internetowa (
MauiBlazorWeb.Web
): nie ustawia@rendermode
atrybutu dyrektywy naHeadOutlet
składnikachApp
iRoutes
(Components/App.razor
). - Lista RCL (
MauiBlazorWeb.Shared
): zawiera składniki udostępnione Razor , które ustawiają tryb renderowaniaInteractiveServer
w każdym składniku.
- MAUI (
MauiBlazorWeb.Maui
i 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.cs
wywoł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łaniaInteractiveRenderSettings.ConfigureBlazorHybridRenderModes
w plikuMauiProgram.cs
. - Blazor Aplikacja internetowa
- Projekt serwera: : nie ustawia
@rendermode
atrybutu dyrektywy naHeadOutlet
składnikachApp
iRoutes
składnika (Components/App.razor
).MauiBlazorWeb.Web
- Projekt klienta:
MauiBlazorWeb.Web.Client
- Projekt serwera: : nie ustawia
- Lista RCL (
MauiBlazorWeb.Shared
): zawiera składniki udostępnione Razor , które ustawiają tryb renderowaniaInteractiveAuto
w każdym składniku.
- MAUI (
Odwołania do projektu:
MauiBlazorWeb.Maui
,MauiBlazorWeb.Web
iMauiBlazorWeb.Web.Client
mają odwołanie doMauiBlazorWeb.Shared
projektu .MauiBlazorWeb.Web
zawiera 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.
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.cs
wywoł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.
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 naHeadOutlet
składnikachApp
iRoutes
składnika (Components/App.razor
).MauiBlazorWeb.Web
- Projekt klienta:
MauiBlazorWeb.Web.Client
- Projekt serwera: : nie ustawia
- Listy RCLS
MauiBlazorWeb.Shared
MauiBlazorWeb.Shared.Client
: zawiera udostępnione Razor składniki, które ustawiają tryb renderowaniaInteractiveWebAssembly
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.
- MAUI (
Odwołania do projektu:
MauiBlazorWeb.Maui
iMauiBlazorWeb.Web
mają odwołania do projektu doMauiBlazorWeb.Shared
.MauiBlazorWeb.Web
zawiera odwołanie do projektu .MauiBlazorWeb.Web.Client
MauiBlazorWeb.Web.Client
iMauiBlazorWeb.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.
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
(.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.cs
wywoł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
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.
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) Interfaces
folder zawiera IFormFactor
interfejs.
Interfaces/IFormFactor.cs
:
namespace MauiBlazorWeb.Shared.Interfaces;
public interface IFormFactor
{
public string GetFormFactor();
public string GetPlatform();
}
Składnik Home
listyComponents/Pages/Home.razor
RCL wyświetla współczynnik formularzy i platformę.
Components/Pages/Home.razor
:
@page "/"
@using MyApp.Shared.Services
@inject IFormFactor FormFactor
<PageTitle>Home</PageTitle>
<h1>Hello, world!</h1>
Welcome to your new app running on <em>@factor</em> using <em>@platform</em>.
@code {
private string factor => FormFactor.GetFormFactor();
private string platform => FormFactor.GetPlatform();
}
Poniższy DeviceFormFactor
składnik znajduje się w folderze listy RCL Components
.
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 wpis składnika DeviceFormFactor
jest częścią menu nawigacji w składniku NavMenu
.
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>
Aplikacje internetowe i natywne zawierają implementacje programu IFormFactor
.
Blazor W aplikacji internetowej folder o nazwie Services
zawiera następujący FormFactor.cs
plik z implementacją FormFactor
do użycia aplikacji internetowej.
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 folder o nazwie Services
zawiera następujący FormFactor.cs
plik z implementacją natywną FormFactor
. 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.Services;
public class FormFactor : IFormFactor
{
public string GetFormFactor()
{
return DeviceInfo.Idiom.ToString();
}
public string GetPlatform()
{
return DeviceInfo.Platform.ToString() + " - " + DeviceInfo.VersionString;
}
}
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;
}
}
Wstrzykiwanie zależności służy do uzyskiwania implementacji tych usług.
W projekcie MauiProgram.cs
MAUI plik zawiera następujące using
instrukcje w górnej części pliku:
using MauiBlazorWeb.Services;
using MauiBlazorWeb.Shared.Interfaces;
using MauiBlazorWeb.Maui.Services;
using MauiBlazorWeb.Shared.Interfaces;
Bezpośrednio przed wywołaniem metody builder.Build()
zostanie FormFactor
zarejestrowane w celu dodania usług specyficznych dla urządzenia używanych przez listę RCL:
builder.Services.AddSingleton<IFormFactor, FormFactor>();
W aplikacji BlazorProgram
internetowej plik zawiera następujące using
instrukcje w górnej części pliku:
using MauiBlazorWeb.Shared.Interfaces;
using MauiBlazorWeb.Web.Services;
Bezpośrednio przed wywołaniem metody builder.Build()
zostanie FormFactor
zarejestrowane w celu dodania usług specyficznych dla urządzenia używanych przez aplikację internetową Blazor :
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.
Dodatkowe zasoby
Opinia
https://aka.ms/ContentUserFeedback.
Dostępne już wkrótce: W 2024 r. będziemy stopniowo wycofywać zgłoszenia z serwisu GitHub jako mechanizm przesyłania opinii na temat zawartości i zastępować go nowym systemem opinii. Aby uzyskać więcej informacji, sprawdź:Prześlij i wyświetl opinię dla