建置 .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 Multi-platform App UI 開發 工作負載的 Visual Studio。
• Microsoft Edge WebView2：在執行原生應用程式時，WebView2 在 Windows 上是必要的。 開發 .NET MAUIBlazor Hybrid 應用程式且只在 Visual Studio 的模擬器中執行應用程式時，WebView2 是非必要的。
• 啟用硬體加速以改善 Android 模擬器的效能。

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

• .NET MAUI 應用程式的支援平台
• 安裝 (Visual Studio)

建立 .NET MAUIBlazor Hybrid 應用程式

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

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

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

注意

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

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

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

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

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

相依性還原：

相依性已還原：

在 Windows 上執行此應用程式

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

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

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

在 Android Emulator 中執行應用程式

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

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

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

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

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

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

在工具列中，選取 [Android Emulator] 按鈕：

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

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

注意

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

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

重要

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

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

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

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

部署期間：

在應用程式啟動期間：

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

下一步

在本教學課程中，您已了解如何：

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

深入了解 Blazor Hybrid 應用程式：

ASP.NET Core Blazor Hybrid