通过

混合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 UI 入口点，由派生自基类的Xamarin.Forms.Application类表示。 此类的构造函数实例化主机，向主机添加服务，然后使用主机将名为 Main 的 Blazor 组件添加到main应用程序页。
  • CounterState.cs - 包含跟踪计数器值并提供相关 API 的服务。 此服务用于应用的本机和 HTML 部分。
  • Main.razor- 包含应用的 main Blazor UI 组件。 它包含一些本机 UI，以及承载 BlazorWebView 应用的 HTML 部分的组件。

WebUI 和 wwwroot 文件夹

这些文件夹包含应用的 Web 部件，这使得此应用成为混合应用。 此处的文件和文件夹与找到的 Blazor Web 应用非常匹配。

  • WebUI/_Imports.razor - 包含应用的 Web 部件的常见指令。
  • WebUI/App.razor- 包含应用的 Web 部件main入口点。
  • WebUI/Pages folder - 包含使用 Blazor Web 语法创作的可导航页面。 此处 .razor 的文件都呈现 HTML 并与应用的其余部分共享应用状态。
  • WebUI/Shared folder - 包含使用 Blazor Web 语法创作的共享可重用 UI 组件。 此处 .razor 的文件全部呈现 HTML，并用于应用中的其他页面。 此文件夹还包含 MainLayout 用于定义应用 Web 部件的整体形状的组件。
  • wwwroot folder - 包含应用的 Web 部件中使用的静态 Web 资产。 这通常是 CSS 文件和图像。

让我们深入了解有趣的文件。

App.cs 入口点

应用的 UI 的入口点在此页中。 它为应用设置服务，然后通过将 Mobile Blazor Bindings 组件附加到 元素来 MainPage 初始化 UI。

注册了两组服务：

  1. services.AddBlazorHybrid() 添加移动 Blazor 绑定在本机 UI 中托管 Blazor Web 组件所需的服务。
  2. services.AddSingleton<CounterState>() 添加可从应用程序中的任何位置使用的应用特定服务，包括代码文件、Blazor 组件和其他服务。 这是一个单一实例服务，这意味着最多会创建一个实例，从而允许共享状态。

在 依赖项注入主题中详细了解服务和 DI。

Main.razor 本机 UI 页

这是应用的main本机 UI 页面。 它包含多个本机 UI 组件，例如 <Label> 和 <Button>。 它还包含承载 <BlazorWebView> Blazor Web 内容的组件：

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

其他一些有趣的事情：

  • 标记 <FirstBlazorHybridApp.WebUI.App /> 是应用的本机部分引用应用的 Web 部件的方式。
  • 指令 @inject 用于引用 CounterState 服务。
  • OnInitialized实现 和 Dispose 方法以附加/分离StateChanged事件处理程序，以便每当CounterState服务指示计数器已更改时，此 UI 页面将刷新。

CounterState.cs 服务

此类定义在 中 App.cs注册的服务。 它包含用于跟踪和报告计数器状态的状态、API 和事件。 应用中的各种 UI 组件使用此服务来显示其 UI，并知道何时刷新 UI，

在 依赖项注入主题中详细了解服务和 DI。

WebUI/App.razor Web 入口点

此文件是应用程序的 Web 部件的 main Blazor 入口点。 它使用标准 Blazor 功能，例如 路由器。 此组件根据当前路由 (确定要显示的 Blazor 网页，如果) 找不到任何内容，则显示错误。

WebUI/Shared/MainLayout.razor Web 布局

此组件适用于大多数 Blazor Web 应用，用于定义应用 Web 部件的总体布局。 在这里，可以包括应用 Web 部件中使用的常见元素，例如导航、页眉和页脚。

WebUI/Pages/Index.razor 网页

包含可导航的 Web 内容页。 页面 Index 通常是在任何导航之前加载的默认页面

wwwroot 静态 Web 资产文件夹

此文件夹包含应用的 Web 部件中使用的静态 Web 资产。 也就是说，这些文件由 Web 浏览器组件按原样提供。 它们使用 Blazor 静态文件路径模式（即 _content/<PROJECT_NAME>/path/to/the/file.css）进行引用。 例如，在此项目中，位于 中的 wwwroot/css/bootstrap/bootstrap.min.css CSS 文件将引用为 _content/FirstBlazorHybridApp/css/bootstrap/bootstrap.min.css。

这些文件嵌入到应用程序中，并由 Mobile Blazor 绑定自动处理。 可以使用 服务和调用 FileProvider.GetFileInfo("_content/<PROJECT_NAME>/path/to/the/file.txt")从代码IFileProvider中读取此文件夹中的文件，如应用WebUI/Pages/FetchData.razor文件中所示。

此项目包含 Bootstrap CSS 库，为常见 UI 方案提供样式。

index.html Android/iOS/macOS/Windows 项目中的 文件

每个特定于平台的项目都包含一个 index.html 文件，该文件是 Blazor Web UI 的容器页，其中包含对 CSS 文件的引用。

文件在每个平台上的位置如下所示：

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

其他文件

我们鼓励你浏览应用程序中的所有文件，以了解其内容及其交互方式。