Hello world hybrydowe — jak to działa?

  • Artykuł

Ważne

Ten projekt jest wersją eksperymentalną. Mamy nadzieję, że wypróbujesz eksperymentalne powiązania platformy Blazor dla urządzeń przenośnych i przekażesz opinię na stronie https://github.com/xamarin/MobileBlazorBindings.

Uwaga

Ta strona jest kontynuacją przewodnika Tworzenie pierwszej aplikacji hybrydowej . Zalecamy ukończenie tego przewodnika przed kontynuowaniem.

Porada

Aby uzyskać prostszy przykład, zacznij od przewodnika Kompiluj pierwszą aplikację, a następnie Hello world Przewodnik, który przedstawia bardziej podstawowe funkcje platformy Blazor.

Przyjrzyjmy się początkowemu projektowi, który został utworzony w poprzednim przewodniku, aby dowiedzieć się więcej o sposobie używania eksperymentalnych powiązań platformy Blazor dla aplikacji hybrydowych.

Głównym projektem do przyjrzenia się jest udostępniony projekt, który zawiera .razor pliki. Projekty specyficzne dla platformy zawierają tylko minimalny kod specyficzny dla eksperymentalnych powiązań platformy Blazor.

Są to istotne pliki i foldery w projekcie udostępnionym:

Folder główny

  • _Imports.razor — Zawiera typowe dyrektywy, które są stosowane do wszystkich innych .razor plików w tym folderze i jego podfolderach. Podfoldery mogą mieć własne _Imports.razor pliki z dodatkowymi dyrektywami. Najczęstszym typem dyrektywy w tym pliku jest @using dyrektywa, która służy do importowania przestrzeni nazw do .razor plików, dokładnie tak samo jak instrukcja języka C# using .
  • App.cs — Zawiera główny punkt wejścia interfejsu użytkownika aplikacji reprezentowany przez klasę pochodzącą z klasy bazowej Xamarin.Forms.Application . Konstruktor tej klasy tworzy wystąpienie hosta, dodaje usługi do hosta, a następnie używa hosta do dodania składnika Blazor o nazwie Main do strony głównej aplikacji.
  • CounterState.cs — Zawiera usługę, która śledzi wartość licznika i oferuje powiązane interfejsy API. Ta usługa jest używana zarówno w natywnych, jak i HTML częściach aplikacji.
  • Main.razor — Zawiera główny składnik interfejsu użytkownika platformy Blazor aplikacji. Zawiera on natywny interfejs użytkownika, a także BlazorWebView składnik, który hostuje część HTML aplikacji.

WebUI i foldery wwwroot

Te foldery zawierają składnik Web Part aplikacji, co sprawia, że jest to aplikacja hybrydowa. Pliki i foldery w tym miejscu są ściśle zgodne z tym, co znajduje się w aplikacji internetowej platformy Blazor.

  • WebUI/_Imports.razor — Zawiera wspólne dyrektywy dla składnika Web Part aplikacji.
  • WebUI/App.razor — Zawiera główny punkt wejścia dla składnika Web Part aplikacji.
  • WebUI/Pages folder — zawiera strony z możliwością nawigacji utworzone przy użyciu składni internetowej platformy Blazor. Pliki .razor w tym miejscu renderować kod HTML i udostępniać stan aplikacji pozostałej części aplikacji.
  • WebUI/Shared folder — zawiera współużytkowane składniki interfejsu użytkownika wielokrotnego użytku utworzone przy użyciu składni internetowej platformy Blazor. Pliki .razor w tym miejscu renderują kod HTML i są używane na innych stronach w aplikacji. Ten folder zawiera MainLayout również składnik, który definiuje ogólny kształt składnika Web Part aplikacji.
  • wwwroot folder — zawiera statyczne zasoby internetowe używane w składniku Web Part aplikacji. Zazwyczaj są to pliki i obrazy CSS.

Przyjrzyjmy się interesującym plikom.

App.cs punkt wejścia

Punkt wejścia interfejsu użytkownika aplikacji znajduje się na tej stronie. Konfiguruje ona usługi dla aplikacji, a następnie inicjuje interfejs użytkownika, dołączając do elementu składnik MainPage Mobile Blazor Bindings.

Zarejestrowano dwa zestawy usług:

  1. services.AddBlazorHybrid() Dodaje usługi wymagane przez powiązania platformy Blazor dla urządzeń przenośnych do hostowania składników internetowych platformy Blazor w natywnym interfejsie użytkownika.
  2. services.AddSingleton<CounterState>() Dodaje usługę specyficzną dla aplikacji, która może być zużywana z dowolnego miejsca w aplikacji, w tym pliki kodu, składniki platformy Blazor i inne usługi. Jest to pojedyncza usługa, co oznacza, że co najwyżej jedno wystąpienie zostanie utworzone, co umożliwi udostępnianie stanu.

Dowiedz się więcej o usługach i di w temacie wstrzykiwania zależności.

Main.razor natywna strona interfejsu użytkownika

Jest to główna natywna strona interfejsu użytkownika aplikacji. Zawiera kilka natywnych składników interfejsu użytkownika, takich jak <Label> i <Button>. Zawiera również składnik hostujący <BlazorWebView> zawartość internetową platformy Blazor:

<BlazorWebView VerticalOptions="LayoutOptions.FillAndExpand">
    <FirstBlazorHybridApp.WebUI.App />
</BlazorWebView>

Kilka innych interesujących rzeczy:

  • Tag <FirstBlazorHybridApp.WebUI.App /> to sposób, w jaki natywna część aplikacji odwołuje się do składnika Web Part aplikacji.
  • Dyrektywa @inject jest używana do odwoływanie CounterState się do usługi.
  • Metody OnInitialized i Dispose są implementowane w celu dołączenia/odłączenia StateChanged programu obsługi zdarzeń, aby ta strona interfejsu użytkownika odświeżyła się za każdym razem, gdy CounterState usługa wskazuje, że licznik uległ zmianie.

Usługa CounterState.cs

Ta klasa definiuje usługę zarejestrowaną w programie App.cs. Zawiera stan, interfejsy API i zdarzenia używane do śledzenia i zgłaszania stanu licznika. Różne składniki interfejsu użytkownika w aplikacji używają tej usługi do wyświetlania interfejsu użytkownika i dowiedz się, kiedy ją odświeżyć.

Dowiedz się więcej o usługach i di w temacie wstrzykiwania zależności.

WebUI/App.razor punkt wejścia sieci Web

Ten plik jest głównym punktem wejścia platformy Blazor dla składnika Web Part aplikacji. Używa ona standardowych funkcji platformy Blazor, takich jak Router. Ten składnik określa, która strona internetowa platformy Blazor ma być wyświetlana na podstawie bieżącej trasy (lub wyświetla błąd, jeśli nie znaleziono).

WebUI/Shared/MainLayout.razor układ sieci Web

Typowy dla większości aplikacji internetowych platformy Blazor ten składnik definiuje ogólny układ składnika Web Part aplikacji. W tym miejscu możesz uwzględnić typowe elementy, takie jak nawigacja, nagłówki i stopki, które są używane w składniku Web Part aplikacji.

WebUI/Pages/Index.razor strona sieci Web

Zawiera stronę z możliwością nawigacji zawartości sieci Web. Strona Index jest zwykle stroną domyślną ładowaną przed rozpoczęciem nawigacji

wwwroot folder statycznych zasobów internetowych

Ten folder zawiera statyczne zasoby internetowe używane w składniku Web Part aplikacji. Oznacza to, że te pliki są obsługiwane przez składnik przeglądarki internetowej. Odwołuje się do nich wzorzec ścieżki statycznej blazor, czyli _content/<PROJECT_NAME>/path/to/the/file.css. Na przykład w tym projekcie plik CSS znajdujący się w pliku wwwroot/css/bootstrap/bootstrap.min.css będzie przywoływał jako _content/FirstBlazorHybridApp/css/bootstrap/bootstrap.min.css.

Te pliki są osadzone w aplikacji i są obsługiwane automatycznie przez powiązania platformy Blazor dla urządzeń przenośnych. Pliki w tym folderze można odczytać z kodu przy użyciu IFileProvider usługi i wywołać metodę FileProvider.GetFileInfo("_content/<PROJECT_NAME>/path/to/the/file.txt"), jak pokazano w pliku aplikacji WebUI/Pages/FetchData.razor .

Ten projekt zawiera bibliotekę CSS bootstrap, aby zapewnić style dla typowych scenariuszy interfejsu użytkownika.

index.html plik w projektach systemu Android/iOS/macOS/Windows

Każdy projekt specyficzny dla platformy zawiera index.html plik, który jest stroną kontenera internetowego interfejsu użytkownika platformy Blazor i zawiera odwołania do plików CSS.

Lokalizacja pliku na każdej platformie jest następująca:

  • System Android: wwwroot/index.html
  • Ios: Resources/wwwroot/index.html
  • Macos: Resources/wwwroot/index.html
  • Windows: wwwroot/index.html

Inne pliki

Zachęcamy do zapoznania się ze wszystkimi plikami w aplikacji, aby poznać ich zawartość i sposób ich interakcji.