MAUI播客應用程序(.NET Conf2021)

介紹

在.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, 更多特性探索源代碼。