Гибридные 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 .

Регистрируются два набора служб:

1. services.AddBlazorHybrid() добавляет службы, необходимые для мобильных привязок Blazor для размещения веб-компонентов Blazor в собственном пользовательском интерфейсе.
2. 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

Другие файлы

Мы рекомендуем изучить все файлы в приложении, чтобы узнать их содержимое и то, как они взаимодействуют.