如何在非Blazor模板的.NET MAUI App中使用BlazorWebView组件

1. 是否存在适用于该场景的模板？ #

没有官方提供的专门模板来直接创建“纯MAUI XAML + 单个BlazorWebView页面”的项目。官方仅提供两种模板：.NET MAUI App（纯原生UI）和.NET MAUI Blazor App（全Blazor UI），你需要手动改造现有纯MAUI项目来实现需求。

2. 集成BlazorWebView的具体步骤 #

步骤1：添加必要的NuGet包 #

安装Microsoft.AspNetCore.Components.WebView.Maui包，可以通过NuGet包管理器搜索安装，或者使用命令行：

dotnet add package Microsoft.AspNetCore.Components.WebView.Maui

步骤2：配置项目服务 #

在MauiProgram.cs的CreateMauiApp方法中，注册BlazorWebView相关服务：

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

// 添加BlazorWebView核心服务
builder.Services.AddMauiBlazorWebView();

// 调试模式下添加开发者工具（可选）
#if DEBUG
builder.Services.AddBlazorWebViewDeveloperTools();
#endif

return builder.Build();

步骤3：创建Blazor核心文件结构 #

在项目根目录创建以下文件夹和文件：

• Pages：存放Blazor页面组件，比如创建Counter.razor示例页面：

  @page "/counter"
  
  <h1>Counter</h1>
  
  <p>Current count: @currentCount</p>
  
  <button class="btn btn-primary" @onclick="IncrementCount">Click me</button>
  
  @code {
      private int currentCount = 0;
  
      private void IncrementCount()
      {
          currentCount++;
      }
  }
  

• wwwroot：存放Blazor静态资源，创建index.html入口文件：

  <!DOCTYPE html>
  <html>
  <head>
      <meta charset="utf-8" />
      <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
      <title>Blazor Page</title>
      <link href="css/app.css" rel="stylesheet" />
      <link href="YourAppName.styles.css" rel="stylesheet" />
  </head>
  <body>
      <div id="app"></div>
  
      <script src="_framework/blazor.webview.js"></script>
  </body>
  </html>
  

  可在wwwroot/css下创建app.css用于自定义样式（可选）。

步骤4：在XAML页面中嵌入BlazorWebView #

创建一个新的XAML页面（或修改现有页面），添加BlazorWebView控件：

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:blazor="clr-namespace:Microsoft.AspNetCore.Components.WebView.Maui;assembly=Microsoft.AspNetCore.Components.WebView.Maui"
             xmlns:pages="clr-namespace:YourAppName.Pages"
             x:Class="YourAppName.BlazorHostPage">
    <blazor:BlazorWebView HostPage="wwwroot/index.html">
        <blazor:BlazorWebView.RootComponents>
            <!-- 将指定Blazor组件挂载到index.html中id为app的元素上 -->
            <blazor:RootComponent Selector="#app" ComponentType="{x:Type pages:Counter}" />
        </blazor:BlazorWebView.RootComponents>
    </blazor:BlazorWebView>
</ContentPage>

注意替换YourAppName为你的项目实际命名空间。

步骤5：验证项目配置 #

检查项目的.csproj文件，确保包含Blazor相关文件的正确配置：

<ItemGroup>
    <!-- 确保wwwroot资源被正确打包 -->
    <None Remove="wwwroot\**" />
    <Content Include="wwwroot\**" />
</ItemGroup>
<ItemGroup>
    <!-- 确保Razor组件被正确识别编译 -->
    <Component Include="**\*.razor" Exclude="bin\**;obj\**" />
    <Component Include="**\*.razor.cs" Exclude="bin\**;obj\**" />
</ItemGroup>

内容的提问来源于stack exchange，提问作者developer9969