共用方式為

混合式Hello World - 其運作方式為何？

  • 發行項

重要

此專案是實驗性版本。 我們希望您嘗試實驗性行動裝置 Blazor 系結，並在 提供 https://github.com/xamarin/MobileBlazorBindings 意見反應。

注意

此頁面是 建置您的第一個混合式應用程式 逐步解說的接續。 建議您先完成該逐步解說，再繼續進行。

提示

如需更簡單的範例，請從建置您的第一個應用程式逐步解說和後續Hello World逐步解說開始，其中顯示 Blazor 的一些更基本功能。

讓我們看看先前逐步解說中建立的初始專案，以深入瞭解如何使用混合式應用程式的實驗性行動裝置 Blazor 系結。

要查看的主要專案是包含檔案的 .razor 共用專案。 平臺特定專案只包含實驗性行動 Blazor 系結專屬的最低程式碼。

這些是共用專案中值得注意的檔案和資料夾：

根資料夾

  • _Imports.razor - 包含套用至此資料夾及其子資料夾中所有其他 .razor 檔案的通用指示詞。 子資料夾可以使用其他指示詞有自己的 _Imports.razor 檔案。 此檔案中最常見的指示詞類型是 @using 指示詞，用來將命名空間匯入檔案 .razor 中，與 C# using 語句完全相同。
  • App.cs - 包含應用程式的主要 UI 進入點，由衍生自基類的 Xamarin.Forms.Application 類別表示。 這個類別的建構函式會具現化 主機、將服務新增至主機，然後使用主機將名為 Main 的 Blazor 元件新增至主應用程式頁面。
  • CounterState.cs - 包含追蹤計數器值並提供相關 API 的服務。 此服務同時用於應用程式的原生和 HTML 元件。
  • Main.razor - 包含應用程式的主要 Blazor UI 元件。 它包含一些原生 UI，以及裝載 BlazorWebView 應用程式 HTML 元件的元件。

WebUI 和 wwwroot 資料夾

這些資料夾包含應用程式的網頁元件，也就是讓此應用程式成為混合式應用程式。 這裡的檔案和資料夾會與找到 Blazor Web 應用程式的檔案和資料夾緊密相符。

  • WebUI/_Imports.razor - 包含應用程式的網頁元件通用指示詞。
  • WebUI/App.razor - 包含應用程式網頁元件的主要進入點。
  • WebUI/Pages folder - 包含使用 Blazor Web 語法撰寫的可導覽頁面。 這裡的 .razor 檔案都會轉譯 HTML，並與應用程式的其餘部分共用應用程式狀態。
  • WebUI/Shared 資料夾 - 包含使用 Blazor Web 語法所撰寫的共用可重複使用 UI 元件。 這裡 .razor 所有的檔案都會轉譯 HTML，並用於應用程式中的其他頁面。 此資料夾也包含 MainLayout 定義應用程式網頁元件整體圖形的元件。
  • wwwroot folder - 包含應用程式網頁元件中使用的靜態 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 頁面

這是應用程式的主要原生 UI 頁面。 它包含數個原生 UI 元件，例如 <Label> 和 <Button> 。 它也包含裝載 <BlazorWebView> Blazor Web 內容的元件：

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

一些其他有趣的事項：

  • 卷 <FirstBlazorHybridApp.WebUI.App /> 標是應用程式原生部分參考應用程式的網頁元件的方式。
  • 指示 @inject 詞是用來參考 CounterState 服務。
  • OnInitialized和 Dispose 方法會實作以附加/卸離 StateChanged 事件處理常式，以便每當服務指出計數器已變更時， CounterState 此 UI 頁面就會重新整理。

CounterState.cs 服務

這個類別會定義已在 中 App.cs 註冊的服務。 其中包含用來追蹤和報告計數器狀態的狀態、API 和事件。 應用程式中的各種 UI 元件會使用此服務來顯示其 UI，並知道何時重新整理它，

在 相依性插入主題中深入瞭解服務和 DI。

WebUI/App.razor Web 進入點

此檔案是應用程式網頁元件的主要 Blazor 進入點。 它會使用標準 Blazor 功能，例如 路由器。 此元件會根據目前的路由 (決定要顯示的 Blazor 網頁，或在找不到任何) 時顯示錯誤。

WebUI/Shared/MainLayout.razor Web 版面配置

大部分 Blazor Web 應用程式通用，此元件會定義應用程式網頁元件的整體配置。 您可以在這裡包含常見元素，例如在應用程式的網頁元件中使用的流覽、頁首和頁尾。

WebUI/Pages/Index.razor 網頁

包含網頁內容的可導覽頁面。 頁面 Index 通常是在任何導覽之前載入的預設頁面

wwwroot 靜態 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 。

這些檔案會內嵌在應用程式中，並由行動 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

其他檔案

我們鼓勵您探索應用程式中的所有檔案，以瞭解其內容及其互動方式。