共用方式為


建置 .NET MAUIBlazor Hybrid 應用程式

注意

這不是這篇文章的最新版本。 如需目前版本,請參閱本文的 .NET 8 版本

警告

不再支援此版本的 ASP.NET Core。 如需詳細資訊,請參閱 .NET 和 .NET Core 支援原則。 如需目前版本,請參閱本文的 .NET 8 版本

重要

這些發行前產品的相關資訊在產品正式發行前可能會有大幅修改。 Microsoft 對此處提供的資訊,不做任何明確或隱含的瑕疵擔保。

如需目前版本,請參閱本文的 .NET 8 版本

本教學課程說明如何建置和執行 .NET MAUIBlazor Hybrid 應用程式。 您將學習如何:

  • 在 Visual Studio 中建立 .NET MAUIBlazor Hybrid 應用程式專案
  • 在 Windows 上執行此應用程式
  • 在 Android Emulator 中的模擬行動裝置上執行此應用程式

必要條件

如需本教學課程的必要條件和安裝軟體的詳細資訊,請參閱 .NET MAUI 文件中的下列資源:

建立 .NET MAUIBlazor Hybrid 應用程式

啟動 Visual Studio。 在 [開始視窗] 中,選取 [建立新專案]

新增解決方案。

在 [建立新專案] 視窗中,使用 [專案類型] 下拉式功能表來篩選 MAUI 範本:

篩選範本為 .NET MAUI。

選取 .NET MAUIBlazor Hybrid 應用程式範本,然後選取 [下一步] 按鈕:

選擇範本。

注意

在 .NET 7 或更早版本中,會將此範本命名為 .NET MAUIBlazor 應用程式

在 [設定新專案] 對話方塊中:

  • 將 [專案名稱] 設為 MauiBlazor
  • 為專案選擇適當的位置。
  • 選取下一步按鈕。

設定專案。

在 [其他資訊] 對話方塊中,使用 [架構] 下拉式清單選取架構版本。 選取 [建立] 按鈕:

選取架構版本並建立專案的其他資訊對話方塊。

等候 Visual Studio 建立專案並還原專案的相依性。 開啟 [相依性] 輸入,以在 [方案總管] 中監視進度。

相依性還原:

還原相依性。

相依性已還原:

已還原相依性。

在 Windows 上執行此應用程式

在 Visual Studio 工具列中,選取 [Windows 電腦] 按鈕以建置並開始專案:

Windows 電腦按鈕。

如果未啟用 [開發人員模式],系統會提示您在 [設定] > [適用於開發人員] > [開發人員模式] (Windows 10),或 [設定] > [Privacy 與安全性] > [適用於開發人員] > [開發人員模式] 中 (Windows 11) 將其啟用。 將參數設定為 [開啟]

以 Windows 桌面應用程式方式執行的應用程式:

在 Windows 上執行的應用程式。

在 Android Emulator 中執行應用程式

如果您遵循在 Windows 上執行應用程式一節中的指導,請選取工具列中的 [停止偵錯] 按鈕,來停止執行中的 Windows 應用程式:

停止偵錯按鈕。

在 Visual Studio 工具列中,選取 [開始設定] 下拉式功能表按鈕。 選取 [Android Emulators] > [Android Emulator]

[Android Emulator] 按鈕的 Android Emulator 下拉式清單選取項目。

需要 Android SDK 才能建置適用於 Android 的應用程式。 在 [錯誤清單] 面板中出現一則訊息,要求您按兩下訊息以安裝所需的 Android SDK:

Visual Studio 錯誤清單,其中包含訊息,要求您按兩下訊息以安裝 Android SDK。

[Android SDK 授權接受] 視窗隨即出現,針對出現的每個授權選取 [接受] 按鈕。 Android EmulatorSDK 修補程式套用程式授權會出現額外的視窗。 選取 [接受] 按鈕。

等候 Visual Studio 下載 Android SDK 和 Android Emulator。 您可以選取 Visual Studio UI 左下角的背景工作指標來追蹤進度:

Visual Studio 背景工作指標。

指標會在背景工作完成時顯示核取記號:

Visual Studio 背景工作指標已勾選。

在工具列中,選取 [Android Emulator] 按鈕:

Android Emulator 按鈕。

在 [建立預設 Android 裝置] 視窗中,選取 [建立] 按鈕:

建立預設 Android 裝置視窗。

等候 Visual Studio 下載、解壓縮並建立 Android Emulator。 當 Android 手機模擬器準備就緒時,請選取 [開始] 按鈕。

注意

啟用硬體加速以改善 Android 模擬器的效能。

關閉 [Android 裝置管理員] 視窗。 等到出現模擬手機視窗,便會載入 Android 作業系統,home 畫面控制項隨即出現。

重要

模擬手機必須開啟電源並載入 Android OS,才能在偵錯工具中載入和執行應用程式。 如果模擬手機未執行,請使用 Ctrl+P 鍵盤快速鍵,或選取 UI 中的 [電源] 按鈕來開啟手機:

Android Emulator 的電源按鈕。

在 Visual Studio 工具列中選取 Pixel 5 - {VERSION} 按鈕,即可建置並執行專案,其中 {VERSION} 預留位置是 Android 版本。 在下列範例中,Android 版本為 API 30 (Android 11.0 - API 30),根據安裝的 Android SDK 而定,會出現更新版本:

Pixel 5 API 30 模擬器按鈕。

Visual Studio 會建置專案,並將應用程式部署至模擬器。

啟動模擬器、載入模擬的手機和 OS,以及部署和執行應用程式可能需要幾分鐘的時間,視系統的速度以及是否啟用硬體加速而定。 您可以檢查 UI 底部的 Visual Studio 狀態列,以監視部署的進度。 [就緒] 指標會收到核取記號,而模擬器的部署和應用程式載入指標會在應用程式執行時消失:

部署期間:

出現在 Visual Studio 頁尾列中的第一個部署執行指標。

在應用程式啟動期間:

出現在 Visual Studio 頁尾列中的第二個部署執行指標。

在 Android Emulator 中執行的應用程式:

在 Android Emulator 中執行的應用程式。

下一步

在本教學課程中,您已了解如何:

  • 在 Visual Studio 中建立 .NET MAUIBlazor Hybrid 應用程式專案
  • 在 Windows 上執行此應用程式
  • 在 Android Emulator 中的模擬行動裝置上執行此應用程式

深入了解 Blazor Hybrid 應用程式: