Sdílet prostřednictvím

Hybridní Hello World – jak to funguje?

  • Článek

Důležité

Tento projekt je experimentální verze. Doufáme, že si vyzkoušíte experimentální mobilní vazby Blazor a poskytnete nám zpětnou vazbu na adrese https://github.com/xamarin/MobileBlazorBindings.

Poznámka

Tato stránka je pokračováním návodu k sestavení první hybridní aplikace . Než budete pokračovat, doporučujeme tento názorný postup dokončit.

Tip

Pro jednodušší příklad začněte názorným průvodcem sestavením první aplikace a následným návodem Hello World Návod, který ukazuje některé další základní funkce Blazoru.

Pojďme se podívat na počáteční projekt vytvořený v předchozím názorném postupu, abychom lépe pochopili, jak používat experimentální mobilní vazby Blazor Pro hybridní aplikace.

Hlavní projekt, na který se chcete podívat, je sdílený projekt, který obsahuje soubory .razor . Projekty specifické pro platformu obsahují pouze minimální kód specifický pro experimentální mobilní vazby Blazor.

Jedná se o soubory a složky ve sdíleném projektu:

Kořenová složka

  • _Imports.razor – Obsahuje společné direktivy, které se použijí pro všechny ostatní .razor soubory v této složce a jejích podsložkách. Podsložky můžou mít vlastní _Imports.razor soubory s dalšími direktivami. Nejběžnějším typem direktivy v tomto souboru je direktiva @using , která se používá k importu oboru názvů do .razor souborů, stejně jako příkaz jazyka C# using .
  • App.cs – Obsahuje hlavní vstupní bod uživatelského rozhraní aplikace reprezentovaný třídou odvozenou ze Xamarin.Forms.Application základní třídy. Konstruktor této třídy vytvoří instanci hostitele, přidá do hostitele služby a pak pomocí tohoto hostitele přidá komponentu Blazor s názvem Main na hlavní stránku aplikace.
  • CounterState.cs – Obsahuje službu, která sleduje hodnotu čítače a nabízí související rozhraní API. Tato služba se používá v nativní části aplikace i v části HTML.
  • Main.razor – Obsahuje hlavní komponentu blazor UI aplikace. Obsahuje některé nativní uživatelské rozhraní a také komponentu, která je hostitelem BlazorWebView html části aplikace.

Složky WebUI a wwwroot

Tyto složky obsahují webovou část aplikace, což z této aplikace dělá hybridní aplikaci. Zde uvedené soubory a složky se velmi shodují s tím, co se našlo ve webové aplikaci Blazor.

  • WebUI/_Imports.razor – Obsahuje běžné direktivy pro webovou část aplikace.
  • WebUI/App.razor – Obsahuje hlavní vstupní bod webové části aplikace.
  • WebUI/Pages folder – obsahuje navigovatelné stránky vytvořené pomocí webové syntaxe Blazoru. Všechny .razor zde uvedené soubory vykreslují HTML a sdílejí stav aplikace se zbytkem aplikace.
  • WebUI/Shared folder – obsahuje sdílené opakovaně použitelné komponenty uživatelského rozhraní vytvořené pomocí webové syntaxe Blazoru. Všechny .razor zde uvedené soubory vykreslují HTML a používají se na jiných stránkách aplikace. Tato složka obsahuje také komponentu MainLayout , která definuje celkový tvar webové části aplikace.
  • wwwroot folder – obsahuje statické webové prostředky používané ve webové části aplikace. Obvykle se jedná o soubory a obrázky css.

Pojďme se ponořit do zajímavých souborů.

App.cs vstupní bod

Vstupní bod uživatelského rozhraní aplikace je na této stránce. Nastaví služby pro aplikaci a pak inicializuje uživatelské rozhraní připojením komponenty Mobile Blazor Bindings k elementu MainPage .

Jsou zaregistrované dvě sady služeb:

  1. services.AddBlazorHybrid() přidá služby vyžadované mobilními vazbami Blazoru pro hostování webových komponent Blazoru v nativním uživatelském rozhraní.
  2. services.AddSingleton<CounterState>() přidá službu specifickou pro aplikaci, kterou je možné využívat odkudkoli v aplikaci, včetně souborů kódu, komponent Blazoru a dalších služeb. Jedná se o jednoúčelovou službu, což znamená, že se vytvoří maximálně jedna instance, což umožní sdílení stavu.

Další informace o službách a injektáži závislostí najdete v tématu injektáž závislostí.

Main.razor nativní stránka uživatelského rozhraní

Toto je hlavní nativní stránka uživatelského rozhraní aplikace. Obsahuje několik nativních komponent uživatelského rozhraní, například <Label> a <Button>. Obsahuje také komponentu <BlazorWebView> , která hostuje webový obsah Blazoru:

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

Pár dalších zajímavých věcí:

  • Značka <FirstBlazorHybridApp.WebUI.App /> označuje způsob, jakým nativní část aplikace odkazuje na webovou část aplikace.
  • Direktiva @inject slouží k odkazu na CounterState službu.
  • Metody OnInitialized a Dispose jsou implementovány pro připojení/odpojení obslužné StateChanged rutiny události tak, aby se tato stránka uživatelského rozhraní aktualizovala vždy, když CounterState služba indikuje, že došlo ke změně čítače.

Služba CounterState.cs

Tato třída definuje službu, která je zaregistrovaná v App.cs. Obsahuje stav, rozhraní API a události sloužící ke sledování a hlášení stavu čítače. Různé komponenty uživatelského rozhraní v aplikaci používají tuto službu k zobrazení uživatelského rozhraní a vědí, kdy ho aktualizovat.

Další informace o službách a injektáži závislostí najdete v tématu injektáž závislostí.

WebUI/App.razor vstupní bod webu

Tento soubor je hlavním vstupním bodem Blazoru pro webovou část aplikace. Používá standardní funkce Blazoru, jako je router. Tato komponenta určuje, která webová stránka Blazoru se má zobrazit na základě aktuální trasy (nebo zobrazí chybu, pokud se žádná nenajde).

WebUI/Shared/MainLayout.razor rozložení webu

Tato komponenta, která je společná pro většinu webových aplikací Blazor, definuje celkové rozložení webové části aplikace. Tady můžete zahrnout běžné prvky, jako je navigace, záhlaví a zápatí, které se používají ve webové části aplikace.

WebUI/Pages/Index.razor webová stránka

Obsahuje navigovatelnou stránku webového obsahu. Stránka Index je obvykle výchozí stránkou, která se načte před jakoukoli navigací.

wwwroot složka statických webových prostředků

Tato složka obsahuje statické webové prostředky používané ve webové části aplikace. To znamená, že tyto soubory jsou obsluhovány tak, jak jsou součástí webového prohlížeče. Odkazuje se na tyto soubory pomocí vzoru statické cesty k souboru Blazoru, který je _content/<PROJECT_NAME>/path/to/the/file.css. Například v tomto projektu bude soubor CSS umístěný v wwwroot/css/bootstrap/bootstrap.min.css odkazovat jako _content/FirstBlazorHybridApp/css/bootstrap/bootstrap.min.css.

Tyto soubory se vloží do aplikace a automaticky je zpracovávají vazby Blazor Mobile. Soubory v této složce lze číst z kódu pomocí IFileProvider služby a voláním FileProvider.GetFileInfo("_content/<PROJECT_NAME>/path/to/the/file.txt")příkazu , jak je vidět v souboru aplikace WebUI/Pages/FetchData.razor .

Tento projekt obsahuje bootstrap knihovnu CSS, která poskytuje styly pro běžné scénáře uživatelského rozhraní.

index.html soubor v projektech Android/iOS/macOS/Windows

Každý projekt specifický pro platformu index.html obsahuje soubor, který je stránkou kontejneru webového uživatelského rozhraní Blazor a obsahuje odkazy na soubory CSS.

Umístění souboru na každé platformě je následující:

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

Další soubory

Doporučujeme, abyste prozkoumali všechny soubory v aplikaci, abyste zjistili jejich obsah a způsob interakce.