maui 跨平台播客應用程式(conf 2021)

居間

在.net conf 2021 大會上，微軟展示了基於.net6 跨平台應用程式, 具有 asp.net core、blazor、.net maui、微服務等功能。 浏览由 ASP.NET Core 和 Blazor 提供支持的 .NET Podcasts 应用的实时运行版本：https://dotnetpodcasts.azurewebsites.net/。

項目體系

移動端和桌面：適用於 ios、android、macos 和 windows 的原生 .net maui 應用程式

• web：blazor webassembly 應用程式和 asp.net core blazor 網站
• api：asp.net core web api 、injestion worker 和 podcast update worker
• blazor 混合應用程式：.net maui 與 blazor 的混合應用程式示例。

maui 項目

單個代碼庫的跨平台項目解決方案, 適用於 android、ios、macos 以及 windows 的原生.net 應用程式, 解決方案如下:

特徵居間

• Global Usings

全局引用, 只需要在任何 using 語句之前添加 global 關鍵字, 即可使該引用成為全局

global using Microsoft.Maui;

• 內置主題

通過 userapptheme 修改基於不同平台的主題設置, light/dark

switch (Settings.Theme)
{
    default:
    case OSAppTheme.Light:
        App.Current.UserAppTheme = OSAppTheme.Light;
        break;
    case OSAppTheme.Dark:
        App.Current.UserAppTheme = OSAppTheme.Dark;
        break;
}

• 消息中心

使用過類似 mvvmlight 中的 messenger 類似, 可以通過 subscribe/send/unsubscribe 來完成訂閱、發布、取消訂閱等功能。

//订阅
MessagingCenter.Instance.Subscribe<string>("","",async (sender) =>
				{
		                    //...
				});

//取消订阅
MessagingCenter.Instance.Unsubscribe<string>("", "");

//发布
MessagingCenter.Instance.Send<string>("", "");

• 內置容器

maui 中提供的統一註冊以及容器服務, 通過 mauiappbuilder 添加自定服務以及通過 mauiwinuiapplication 獲取對應服務。

//注册服务
public static MauiAppBuilder ConfigureServices(this MauiAppBuilder builder)
{
    builder.Services.TryAddSingleton<PlayerService>();
}

//调用平台的容器服务
public static class ServicesProvider
{
    public static TService GetService<TService>()
        => Current.GetService<TService>();

    public static IServiceProvider Current
        =>
#if WINDOWS10_0_17763_0_OR_GREATER
        MauiWinUIApplication.Current.Services;
#elif ANDROID
        MauiApplication.Current.Services;
#elif IOS || MACCATALYST
        MauiUIApplicationDelegate.Current.Services;
#else
        null;
#endif
}

統一資源管理

maui 中統一了資源的管理以及訪問,例如: 字體、圖標、樣式、本地資源文件等。

訪問字體

<Setter Property="FontFamily" Value="SegoeUiSemibold" />

訪問圖片資源

<image Source="xxx.png" />

本地化資源

xmlns:res="clr-namespace:Microsoft.NetConf2021.Maui.Resources.Strings"

<label Text="{x:Static res:AppResource.Categories}" />

平台化

在 xaml 以及代碼中, 你可以通過平台化處理不同的 ui 以及業務邏輯, 可以通過 onplatform 以及 onidiom 來區分平台及類型。

不同平台下的字體設置

<label FontSize="{OnPlatform UWP=24, macOS=24, Android=14,iOS=14}" />

不同設備的設置

<GridItemsLayout Span="{OnIdiom Phone=2, Tablet=3, Desktop=3}" />

Essentials

內置的 essentials 提供訪問本機網絡 wifi、藍牙等等。

//验证是否联网
var current = Connectivity.NetworkAccess;
if (current != NetworkAccess.Internet)
{
    //...
}

//验证是否存在WIFI连接
var profiles = Connectivity.ConnectionProfiles;
var hasWifi = profiles.Contains(ConnectionProfile.WiFi);

if (hasWifi)
{
    //...
}

混合模式

在 xaml 當中, 使用 blazorwebview

xmlns:b="clr-namespace:Microsoft.AspNetCore.Components.WebView.Maui;assembly=Microsoft.AspNetCore.Components.WebView.Maui"

<b:BlazorWebView
  x:Name="MyWebView"
  Margin="10,0"
  HostPage="wwwroot/index.html"
  BackgroundColor="{AppThemeBinding Light={StaticResource Grey1}, Dark={StaticResource Grey9}}"
>
  <b:BlazorWebView.RootComponents>
    <b:RootComponent
      Selector="app"
      ComponentType="{x:Type pages:ListenTogetherComponent}"
    />
  </b:BlazorWebView.RootComponents>
</b:BlazorWebView>

總結

项目已在 GitHub 发布, https://github.com/microsoft/dotnet-podcasts, 更多特性探索源代码。