探索.NET 11：Blazor 在跨平台客户端应用开发的进阶实践

dotnet new blazorwasm -n CrossPlatformBlazorApp
cd CrossPlatformBlazorApp

@using System.Threading.Tasks

<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++;
    }
}

dotnet new maui -n MauiBlazorIntegration

dotnet add package Microsoft.Maui.Controls.Blazor

using Microsoft.Maui.Controls.Compatibility;
using Microsoft.Maui.Controls.Hosting;
using Microsoft.Maui.Hosting;

namespace MauiBlazorIntegration;

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

        builder.Services.AddBlazorWebView();
        builder.Services.AddSingleton<WeatherForecastService>();

        return builder.Build();
    }
}

<?xml version="1.0" encoding="utf - 8"?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:blazor="clr - namespace:Microsoft.Maui.Controls.Compatibility.Applications;assembly=Microsoft.Maui.Controls.Blazor"
             x:Class="MauiBlazorIntegration.MainPage">

    <blazor:BlazorWebView HostPage="wwwroot/index.html">
        <blazor:BlazorWebView.RootComponents>
            <blazor:RootComponent Selector="#app" ComponentType="{x:Type local:App}" />
        </blazor:BlazorWebView.RootComponents>
    </blazor:BlazorWebView>
</ContentPage>

public interface IFileStorage
{
    Task<string> ReadTextFileAsync(string filePath);
    Task WriteTextFileAsync(string filePath, string content);
}

public class WebFileStorage : IFileStorage
{
    public async Task<string> ReadTextFileAsync(string filePath)
    {
        // 这里可以使用浏览器的本地存储或其他 Web 存储方式
        return await Task.FromResult(string.Empty);
    }

    public async Task WriteTextFileAsync(string filePath, string content)
    {
        // 实现 Web 平台的文件写入逻辑
        await Task.CompletedTask;
    }
}

using Java.IO;
using Xamarin.Essentials;

public class AndroidFileStorage : IFileStorage
{
    public async Task<string> ReadTextFileAsync(string filePath)
    {
        var documentsPath = FileSystem.AppDataDirectory;
        var fullPath = Path.Combine(documentsPath, filePath);
        using (var reader = new StreamReader(fullPath))
        {
            return await reader.ReadToEndAsync();
        }
    }

    public async Task WriteTextFileAsync(string filePath, string content)
    {
        var documentsPath = FileSystem.AppDataDirectory;
        var fullPath = Path.Combine(documentsPath, filePath);
        using (var writer = new StreamWriter(fullPath))
        {
            await writer.WriteAsync(content);
        }
    }
}

public void ConfigureServices(IServiceCollection services)
{
    if (OperatingSystem.IsBrowser())
    {
        services.AddSingleton<IFileStorage, WebFileStorage>();
    }
    else if (OperatingSystem.IsAndroid())
    {
        services.AddSingleton<IFileStorage, AndroidFileStorage>();
    }
    // 其他平台类似处理

    services.AddRazorPages();
    services.AddServerSideBlazor();
    services.AddSingleton<WeatherForecastService>();
}