Гибридные Hello World — как это работает?
Важно!
Этот проект является экспериментальным выпуском. Мы надеемся, что вы опробуете экспериментальные мобильные привязки Blazor и оставить отзыв по адресу https://github.com/xamarin/MobileBlazorBindings.
Примечание
Эта страница является продолжением пошагового руководства По созданию первого гибридного приложения . Мы рекомендуем выполнить это пошаговое руководство, прежде чем продолжить.
Совет
Для более простого примера начните с пошагового руководства по созданию первого приложения и последующего Hello World Пошаговое руководство, в которой показаны некоторые другие основные функции Blazor.
Давайте рассмотрим начальный проект, созданный в предыдущем пошаговом руководстве, чтобы понять, как использовать экспериментальные мобильные привязки Blazor для гибридных приложений.
Main проект для просмотра — это общий проект, содержащий .razor
файлы. Проекты для конкретных платформ содержат только минимальный код, характерный для экспериментальных привязок Blazor для мобильных устройств.
Ниже перечислены важные файлы и папки в общем проекте:
корневая папка
_Imports.razor
— содержит общие директивы, которые применяются ко всем остальным.razor
файлам в этой папке и ее вложенных папках. Вложенные папки могут иметь собственные_Imports.razor
файлы с дополнительными директивами. Наиболее распространенным типом директивы в этом файле является директива@using
, которая используется для импорта пространства имен в.razor
файлы, точно так же, как оператор C#using
.App.cs
— содержит точку входа main пользовательского интерфейса приложения, представленную классом, производным отXamarin.Forms.Application
базового класса. Конструктор этого класса создает экземпляр узла, добавляет службы к узлу, а затем использует узел для добавления компонента Blazor с именемMain
на страницу приложения main.CounterState.cs
— содержит службу, которая отслеживает значение счетчика и предлагает связанные API. Эта служба используется как в собственных, так и в HTML-частях приложения.Main.razor
— содержит компонент пользовательского интерфейса Main Blazor приложения. Он содержит собственный пользовательский интерфейс, а такжеBlazorWebView
компонент, в котором размещается HTML-часть приложения.
Папки WebUI и wwwroot
Эти папки содержат веб-часть приложения, что делает это гибридное приложение. Файлы и папки здесь точно соответствуют тому, что найдено в веб-приложении Blazor.
WebUI/_Imports.razor
— содержит общие директивы для веб-части приложения.WebUI/App.razor
— содержит точку входа main для веб-части приложения.WebUI/Pages
folder — содержит переходимые страницы, созданные с помощью веб-синтаксиса Blazor. Все.razor
эти файлы отображают HTML и совместно используют состояние приложения с остальной частью приложения.WebUI/Shared
folder — содержит общие повторно используемые компоненты пользовательского интерфейса, созданные с помощью веб-синтаксиса Blazor. Все.razor
файлы здесь отображаются в ФОРМАТЕ HTML и используются на других страницах приложения. Эта папка также содержитMainLayout
компонент, определяющий общую форму веб-части приложения.wwwroot
folder — содержит статические веб-ресурсы, используемые в веб-части приложения. Обычно это CSS-файлы и изображения.
Давайте рассмотрим интересные файлы.
App.cs
точка входа
Точка входа для пользовательского интерфейса приложения находится на этой странице. Он настраивает службы для приложения, а затем инициализирует пользовательский интерфейс путем присоединения компонента Mobile Blazor Bindings к элементу MainPage
.
Регистрируются два набора служб:
services.AddBlazorHybrid()
добавляет службы, необходимые для мобильных привязок Blazor для размещения веб-компонентов Blazor в собственном пользовательском интерфейсе.services.AddSingleton<CounterState>()
добавляет службу для конкретного приложения, которую можно использовать в любом месте приложения, включая файлы кода, компоненты Blazor и другие службы. Это одноэлементная служба, что означает, что будет создан не более одного экземпляра, что позволяет совместно использовать состояние.
Дополнительные сведения о службах и внедрении зависимостей см. в статье о внедрении зависимостей.
Main.razor
страница собственного пользовательского интерфейса
Это страница main собственного пользовательского интерфейса приложения. Он содержит несколько собственных компонентов пользовательского интерфейса, таких как <Label>
и <Button>
. Он также содержит <BlazorWebView>
компонент, на котором размещается веб-содержимое Blazor:
<BlazorWebView VerticalOptions="LayoutOptions.FillAndExpand">
<FirstBlazorHybridApp.WebUI.App />
</BlazorWebView>
Еще несколько интересных вещей:
- Тег
<FirstBlazorHybridApp.WebUI.App />
— это то, как собственная часть приложения ссылается на веб-часть приложения. - Директива
@inject
используется для ссылки наCounterState
службу. OnInitialized
Методы иDispose
реализуются для подключения или отсоединения обработчикаStateChanged
событий, чтобы эта страница пользовательского интерфейса обновлялась всякий разCounterState
, когда служба указывает на изменение счетчика.
Служба CounterState.cs
Этот класс определяет службу, зарегистрированную в App.cs
. Он содержит состояние, API-интерфейсы и события, используемые для отслеживания и создания отчетов о состоянии счетчика. Различные компоненты пользовательского интерфейса в приложении используют эту службу для отображения пользовательского интерфейса и знают, когда его следует обновить.
Дополнительные сведения о службах и внедрении зависимостей см. в статье о внедрении зависимостей.
WebUI/App.razor
Точка входа в Веб-сайт
Этот файл является main точкой входа Blazor для веб-части приложения. Он использует стандартные функции Blazor, такие как маршрутизатор. Этот компонент определяет, какая веб-страница Blazor будет отображаться на основе текущего маршрута (или отображает ошибку, если ни одна из них не найдена).
WebUI/Shared/MainLayout.razor
веб-макет
Этот компонент, общий для большинства веб-приложений Blazor, определяет общий макет веб-части приложения. Здесь можно включить общие элементы, такие как навигация, верхние и нижние колонтитулы, которые используются в веб-части приложения.
WebUI/Pages/Index.razor
веб-страница
Содержит переходимую страницу веб-содержимого. Страница Index
обычно является страницей по умолчанию, которая загружается перед любой навигацией
wwwroot
папка статических веб-ресурсов
Эта папка содержит статические веб-ресурсы, используемые в веб-части приложения. То есть эти файлы обслуживаются компонентом веб-браузера как есть. На них ссылается шаблон пути к статическому файлу Blazor, который имеет значение _content/<PROJECT_NAME>/path/to/the/file.css
. Например, в этом проекте CSS-файл, расположенный в wwwroot/css/bootstrap/bootstrap.min.css
, будет ссылаться как _content/FirstBlazorHybridApp/css/bootstrap/bootstrap.min.css
на .
Эти файлы внедряются в приложение и обрабатываются мобильными привязками Blazor автоматически. Файлы в этой папке можно считать из кода с помощью IFileProvider
службы и вызова FileProvider.GetFileInfo("_content/<PROJECT_NAME>/path/to/the/file.txt")
, как показано в файле приложения WebUI/Pages/FetchData.razor
.
Этот проект содержит библиотеку CSS начальной загрузки для предоставления стилей для распространенных сценариев пользовательского интерфейса.
index.html
файл в проектах Android,iOS/macOS/Windows
Каждый проект для конкретной index.html
платформы содержит файл, который является страницей контейнера для веб-интерфейса Blazor и содержит ссылки на CSS-файлы.
Расположение файла на каждой платформе выглядит следующим образом:
- Android:
wwwroot/index.html
- iOS:
Resources/wwwroot/index.html
- macOS:
Resources/wwwroot/index.html
- Windows:
wwwroot/index.html
Другие файлы
Мы рекомендуем изучить все файлы в приложении, чтобы узнать их содержимое и то, как они взаимодействуют.