Share via

Hybrid Hallo Welt – wie funktioniert es?

  • Artikel

Wichtig

Dieses Projekt ist ein experimentelles Release. Wir hoffen, dass Sie Experimentelle Mobile Blazor Bindings ausprobieren und Feedback unter https://github.com/xamarin/MobileBlazorBindingsgeben.

Hinweis

Diese Seite ist eine Fortsetzung der exemplarischen Vorgehensweise Erstellen Ihrer ersten Hybrid-App . Es wird empfohlen, diese exemplarische Vorgehensweise auszuführen, bevor Sie fortfahren.

Tipp

Beginnen Sie für ein einfacheres Beispiel mit der exemplarischen Vorgehensweise Erstellen Ihrer ersten App und der nachfolgenden Hallo Welt Exemplarische Vorgehensweise, die einige grundlegende Funktionen von Blazor zeigt.

Sehen wir uns das erste Projekt an, das in der vorherigen exemplarischen Vorgehensweise erstellt wurde, um mehr über die Verwendung von Experimentellen Mobilen Blazor-Bindungen für Hybrid-Apps zu erfahren.

Das Standard zu betrachtenden Projekt ist das freigegebene Projekt, das die .razor Dateien enthält. Die plattformspezifischen Projekte enthalten nur minimalen Code, der für experimentelle Mobile Blazor-Bindungen spezifisch ist.

Dies sind die bemerkenswerten Dateien und Ordner im freigegebenen Projekt:

Stammordner

  • _Imports.razor - Enthält allgemeine Anweisungen, die auf alle anderen .razor Dateien in diesem Ordner und seinen Unterordnern angewendet werden. Unterordner können über eigene _Imports.razor Dateien mit zusätzlichen Anweisungen verfügen. Der häufigste Direktiventyp in dieser Datei ist die @using -Anweisung, die zum Importieren eines Namespaces in .razor Dateien verwendet wird, genau wie eine C#- using Anweisung.
  • App.cs– Enthält den Standard Benutzeroberflächeneinstiegspunkt der Anwendung, der durch eine Klasse dargestellt wird, die von der Xamarin.Forms.Application Basisklasse abgeleitet ist. Der Konstruktor dieser Klasse instanziiert einen Host, fügt dem Host Dienste hinzu und verwendet dann den Host, um der Standard Anwendungsseite eine Blazor-Komponente mit dem Namen Main hinzuzufügen.
  • CounterState.cs – Enthält einen Dienst, der einen Zählerwert nachverfolgt und zugehörige APIs anbietet. Dieser Dienst wird sowohl im nativen als auch im HTML-Teil der App verwendet.
  • Main.razor– Enthält die Standard Blazor UI-Komponente der App. Sie enthält eine native Benutzeroberfläche und eine BlazorWebView Komponente, die den HTML-Teil der App hostet.

WebUI- und wwwroot-Ordner

Diese Ordner enthalten das Webpart der App, was dies zu einer Hybrid-App macht. Die Dateien und Ordner hier entsprechen genau dem, was eine Blazor-Web-App gefunden hat.

  • WebUI/_Imports.razor – Enthält allgemeine Anweisungen für das Webpart der App.
  • WebUI/App.razor– Enthält den Standard Einstiegspunkt für das Webpart der App.
  • WebUI/Pages ordner: Enthält navigierbare Seiten, die mithilfe der Blazor-Websyntax erstellt wurden. Die .razor hier aufgeführten Dateien rendern alle HTML und teilen den App-Zustand mit dem Rest der App.
  • WebUI/Shared ordner: Enthält freigegebene wiederverwendbare UI-Komponenten, die mithilfe der Blazor-Websyntax erstellt wurden. Die .razor Dateien hier rendern alle HTML und werden auf anderen Seiten in der App verwendet. Dieser Ordner enthält auch die MainLayout Komponente, die die Gesamtform des Webparts der App definiert.
  • wwwroot ordner: Enthält statische Webressourcen, die im Webpart der App verwendet werden. Dies sind in der Regel CSS-Dateien und -Bilder.

Lassen Sie uns die interessanten Dateien untersuchen.

App.cs Einstiegspunkt

Der Einstiegspunkt für die Benutzeroberfläche der App befindet sich auf dieser Seite. Es richtet die Dienste für die App ein und initialisiert dann die Benutzeroberfläche, indem eine Mobile Blazor Bindings-Komponente an das MainPage -Element angefügt wird.

Es werden zwei Gruppen von Diensten registriert:

  1. services.AddBlazorHybrid() fügt die Dienste hinzu, die von Mobile Blazor Bindings zum Hosten von Blazor-Webkomponenten auf der nativen Benutzeroberfläche erforderlich sind.
  2. services.AddSingleton<CounterState>() fügt einen app-spezifischen Dienst hinzu, der von überall in der Anwendung genutzt werden kann, einschließlich Codedateien, Blazor-Komponenten und anderen Diensten. Dies ist ein Singleton-Dienst, was bedeutet, dass höchstens ein instance erstellt wird, sodass der Zustand freigegeben werden kann.

Weitere Informationen zu Diensten und DI finden Sie im Thema Abhängigkeitsinjektion.

Main.razor Seite der nativen Benutzeroberfläche

Dies ist die Standard native UI-Seite der App. Es enthält mehrere native Ui-Komponenten, z. B <Label> . und <Button>. Es enthält auch eine <BlazorWebView> Komponente, die den Blazor-Webinhalt hostet:

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

Ein paar weitere interessante Dinge:

  • Mit <FirstBlazorHybridApp.WebUI.App /> dem Tag verweist der native Teil der App auf das Webpart der App.
  • Die @inject -Direktive wird verwendet, um auf den CounterState Dienst zu verweisen.
  • Die OnInitialized Methoden und Dispose werden implementiert, um einen StateChanged Ereignishandler anzufügen/zu trennen, sodass diese UI-Seite aktualisiert wird, wenn der CounterState Dienst angibt, dass sich der Leistungsindikator geändert hat.

CounterState.cs-Dienst

Diese Klasse definiert einen Dienst, der in App.csregistriert ist. Sie enthält Zustand, APIs und Ereignisse, die zum Nachverfolgen und Melden des Status des Indikators verwendet werden. Verschiedene Ui-Komponenten in der App verwenden diesen Dienst, um ihre Benutzeroberfläche anzuzeigen und wissen, wann sie aktualisiert werden müssen.

Weitere Informationen zu Diensten und DI finden Sie im Thema Abhängigkeitsinjektion.

WebUI/App.razor Webeinstiegspunkt

Diese Datei ist der Standard Blazor-Einstiegspunkt für den Webpart der Anwendung. Es verwendet Standardmäßige Blazor-Funktionen, z. B. den Router. Diese Komponente bestimmt, welche Blazor-Webseite basierend auf der aktuellen Route angezeigt werden soll (oder zeigt einen Fehler an, wenn keine gefunden wurde).

WebUI/Shared/MainLayout.razor Weblayout

Diese Komponente ist für die meisten Blazor-Web-Apps üblich und definiert das Gesamtlayout des Webparts der App. Hier können Sie allgemeine Elemente wie Navigation, Kopfzeilen und Fußzeilen einschließen, die im Webpart der App verwendet werden.

WebUI/Pages/Index.razor Webseite

Enthält eine navigierbare Seite mit Webinhalten. Die Index Seite ist in der Regel die Standardseite, die vor jeder Navigation geladen wird.

wwwroot Ordner "statische Webressourcen"

Dieser Ordner enthält statische Webressourcen, die im Webpart der App verwendet werden. Das heißt, diese Dateien werden von der Webbrowserkomponente unverändert bereitgestellt. Auf sie wird mithilfe des statischen Blazor-Dateipfadmusters _content/<PROJECT_NAME>/path/to/the/file.cssverwiesen. In diesem Projekt wird beispielsweise auf eine CSS-Datei, die sich in wwwroot/css/bootstrap/bootstrap.min.css befindet, als _content/FirstBlazorHybridApp/css/bootstrap/bootstrap.min.cssverwiesen.

Diese Dateien werden in die Anwendung eingebettet und von Mobile Blazor Bindings automatisch verarbeitet. Dateien in diesem Ordner können aus dem Code gelesen werden, indem sie den IFileProvider Dienst verwenden und aufrufen FileProvider.GetFileInfo("_content/<PROJECT_NAME>/path/to/the/file.txt"), wie in der Datei der App WebUI/Pages/FetchData.razor zu sehen.

Dieses Projekt enthält die Bootstrap-CSS-Bibliothek, um Stile für allgemeine Benutzeroberflächenszenarien bereitzustellen.

index.html Datei in den Android/iOS/macOS/Windows-Projekten

Jedes plattformspezifische Projekt enthält eine index.html Datei, die die Containerseite für die Blazor-Webbenutzeroberfläche darstellt, und enthält Verweise auf die CSS-Dateien.

Der Speicherort der Datei auf jeder Plattform lautet wie folgt:

  • Android: wwwroot/index.html
  • iOS: Resources/wwwroot/index.html
  • macOS: Resources/wwwroot/index.html
  • Windows: wwwroot/index.html

Andere Dateien

Wir empfehlen Ihnen, alle Dateien in der Anwendung zu erkunden, um ihre Inhalte und ihre Interaktion zu erfahren.