BlazorMaui 项目教程

BlazorMaui 项目教程

1. 项目的目录结构及介绍

BlazorMaui 项目的目录结构如下：

BlazorMaui/
├── BlazorMaui.sln
├── MauiBlazorApp/
│   ├── App.xaml
│   ├── App.xaml.cs
│   ├── MainPage.xaml
│   ├── MainPage.xaml.cs
│   ├── MauiProgram.cs
│   ├── Platforms/
│   │   ├── Android/
│   │   ├── iOS/
│   │   ├── MacCatalyst/
│   │   ├── Tizen/
│   │   └── Windows/
│   ├── Properties/
│   │   └── launchSettings.json
│   ├── Resources/
│   │   ├── AppIcons/
│   │   └── Fonts/
│   ├── wwwroot/
│   │   ├── css/
│   │   ├── js/
│   │   └── index.html
│   └── _Imports.razor
├── MauiBlazorApp.Android/
├── MauiBlazorApp.iOS/
├── MauiBlazorApp.MacCatalyst/
├── MauiBlazorApp.Tizen/
├── MauiBlazorApp.Windows/
└── Shared/
    ├── MainLayout.razor
    ├── NavMenu.razor
    └── Shared.razor

目录结构介绍

• BlazorMaui.sln: 解决方案文件，用于在 Visual Studio 中打开项目。
• MauiBlazorApp/: 主项目文件夹，包含应用程序的核心代码。
  • App.xaml 和 App.xaml.cs: 应用程序的入口点。
  • MainPage.xaml 和 MainPage.xaml.cs: 主页面的定义。
  • MauiProgram.cs: 配置和启动应用程序的入口点。
  • Platforms/: 包含不同平台的特定代码。
  • Properties/: 包含项目的配置文件，如 launchSettings.json。
  • Resources/: 包含应用程序的资源，如图标和字体。
  • wwwroot/: 包含静态文件，如 CSS、JavaScript 和 HTML 文件。
  • _Imports.razor: 包含 Razor 文件的导入声明。
• MauiBlazorApp.Android/, MauiBlazorApp.iOS/, MauiBlazorApp.MacCatalyst/, MauiBlazorApp.Tizen/, MauiBlazorApp.Windows/: 不同平台的项目文件夹。
• Shared/: 包含共享的 Razor 组件。

2. 项目的启动文件介绍

MauiProgram.cs

MauiProgram.cs 是项目的启动文件，负责配置和启动应用程序。以下是文件的主要内容：

using Microsoft.Extensions.Logging;
using MauiBlazorApp.Data;

namespace MauiBlazorApp;

public static class MauiProgram
{
    public static MauiApp CreateMauiApp()
    {
        var builder = MauiApp.CreateBuilder();
        builder
            .UseMauiApp<App>()
            .ConfigureFonts(fonts =>
            {
                fonts.AddFont("OpenSans-Regular.ttf", "OpenSansRegular");
            });

        builder.Services.AddMauiBlazorWebView();
#if DEBUG
        builder.Services.AddBlazorWebViewDeveloperTools();
        builder.Logging.AddDebug();
#endif

        builder.Services.AddSingleton<WeatherForecastService>();

        return builder.Build();
    }
}

启动文件介绍

• CreateMauiApp 方法：配置和构建 Maui 应用程序。
• UseMauiApp<App>()：指定应用程序的入口点为 App 类。
• ConfigureFonts：配置应用程序的字体。
• AddMauiBlazorWebView：添加 BlazorWebView 服务。
• AddBlazorWebViewDeveloperTools：添加 BlazorWebView 开发者工具（仅在调试模式下）。
• AddSingleton<WeatherForecastService>：注册 WeatherForecastService 服务。

3. 项目的配置文件介绍

launchSettings.json

launchSettings.json 文件位于 Properties 文件夹