BlazorWebView kullanarak bir .NET MAUI uygulamasında Blazor web uygulaması barındırma

Makale
05/14/2024

.NET Çok Platformlu Uygulama Kullanıcı Arabirimi (.NET MAUI), BlazorWebView .NET MAUI uygulamanızda blazor web uygulaması barındırmanızı sağlayan bir denetimdir. Blazor Hibrit uygulamaları olarak bilinen bu uygulamalar, blazor web uygulamasının platform özellikleri ve kullanıcı arabirimi denetimleriyle tümleştirilmesini sağlar. Denetim BlazorWebView bir .NET MAUI uygulamasının herhangi bir sayfasına eklenebilir ve Blazor uygulamasının köküne işaret edilebilir. Razor bileşenleri .NET işleminde yerel olarak çalışır ve web kullanıcı arabirimini eklenmiş bir web görünümü denetimine işler. .NET MAUI'de Blazor Hibrit uygulamaları .NET MAUI tarafından desteklenen tüm platformlarda çalıştırılabilir.

BlazorWebView aşağıdaki özellikleri tanımlar:

HostPage, blazor web uygulamasının kök sayfasını tanımlayan türündedir string?.
RootComponents, türündeki RootComponentsCollectiondenetime eklenebilen kök bileşenlerin koleksiyonunu belirtir.
StartPathstringtüründe, Blazor bileşeni yüklemeyi bitirdiğinde Blazor gezinti bağlamı içindeki ilk gezinti yolunu tanımlar.

RootComponent sınıfı aşağıdaki özellikleri tanımlar:

Selector, türünde string?, bileşenin belgede nereye yerleştirilmesi gerektiğini belirten CSS seçici dizesini tanımlar.
ComponentType, türündeki Type?kök bileşenin türünü tanımlar.
Parameters, türündeki IDictionary<string, object?>?kök bileşene geçirebileceğiniz isteğe bağlı parametre sözlüğünü temsil eder.

Ayrıca, BlazorWebView aşağıdaki olayları tanımlar:

BlazorWebViewInitializing, ile birlikte gelen ve başlatılmadan önce BlazorWebView tetiklenen bir BlazorWebViewInitializingEventArgs nesneyle. Bu olay, yapılandırmanın BlazorWebView özelleştirilmesini sağlar.
BlazorWebViewInitialized, ile birlikte gelen ve başlatıldıktan sonra BlazorWebView ancak herhangi bir bileşen işlenmeden önce tetiklenen nesneyleBlazorWebViewInitializedEventArgs. Bu olay platforma özgü web görünümü örneğinin alınmasını sağlar.
UrlLoading, bir içinde bir köprü tıklatıldığında, eşlik eden UrlLoadingEventArgs bir BlazorWebViewnesneyle oluşturulur. Bu olay, dış uygulamada köprü açılıp BlazorWebViewaçılmayacağının veya URL yükleme girişiminin iptal edilip edilmediğinin özelleştirilmesini sağlar.

Mevcut Razor bileşenleri bir .NET MAUI Blazor uygulamasında kodu uygulamaya taşıyarak veya bileşeni içeren mevcut bir sınıf kitaplığına veya pakete başvurarak kullanılabilir. Daha fazla bilgi için bkz . ASP.NET Core Blazor Karma'da Razor bileşenlerini yeniden kullanma.

Tarayıcı geliştirici araçları .NET MAUI Blazor uygulamalarını incelemek için kullanılabilir. Daha fazla bilgi için bkz . ASP.NET Core Blazor Hybrid ile tarayıcı geliştirici araçlarını kullanma.

Not

Visual Studio .NET MAUI Blazor uygulamaları geliştirmek için gerekli tüm araçları yüklerken, Windows'da .NET MAUI Blazor uygulamalarının son kullanıcılarının WebView2 çalışma zamanını yüklemesi gerekir.

Blazor Karma uygulamaları hakkında daha fazla bilgi için bkz . ASP.NET Core Blazor Hybrid.

.NET MAUI Blazor uygulaması oluşturma

Visual Studio'da .NET MAUI Blazor uygulaması şablonuyla bir .NET MAUI Blazor uygulaması oluşturulabilir:

.NET MAUI Blazor uygulama projesi şablonu ekran görüntüsü.

Bu proje şablonu, Android, iOS, macOS ve Windows'a dağıtılabilir çok hedefli bir .NET MAUI Blazor uygulaması oluşturur. .NET MAUI Blazor uygulaması oluşturma hakkında adım adım yönergeler için bkz . .NET MAUI Blazor uygulaması derleme.

BlazorWebView Proje şablonu tarafından oluşturulan MainPage.xaml dosyasında tanımlanır ve Blazor uygulamasının kök dizinine işaret edilir:

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:BlazorWebViewDemo"
             x:Class="BlazorWebViewDemo.MainPage"
             BackgroundColor="{DynamicResource PageBackgroundColor}">

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

</ContentPage>

Uygulamanın kök Razor bileşeni, Razor'ın uygulamanın kök ad alanında adlı Main bir türe derlediği Main.razor dosyasındadır. Razor bileşenlerinin geri kalanı Sayfalar ve Paylaşılan proje klasörlerindedir ve varsayılan Blazor web şablonunda kullanılan bileşenlerle aynıdır. Uygulamanın statik web varlıkları wwwroot klasöründedir.

Var olan bir uygulamaya BlazorWebView ekleme

Mevcut bir .NET MAUI uygulamasına ekleme BlazorWebView işlemi aşağıdaki gibidir:

CSPROJ proje dosyasının ilk satırını düzenleyerek Razor SDK'sını Microsoft.NET.Sdk.Razor projenize ekleyin:
```
<Project Sdk="Microsoft.NET.Sdk.Razor">
```
Razor SDK'sı Blazor projeleri için Razor dosyaları içeren projeleri derlemek ve paketlemek için gereklidir.
Uygulamanın kök Razor bileşenini projeye ekleyin.
Razor bileşenlerinizi Sayfalar ve Paylaşılan adlı proje klasörlerine ekleyin.
Statik web varlıklarınızı wwwroot adlı bir proje klasörüne ekleyin.
İsteğe bağlı _Imports.razor dosyalarını projenize ekleyin.

BlazorWebView.NET MAUI uygulamanızdaki bir sayfaya ekleyin ve Blazor uygulamasının köküne işaret edin:

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:MyBlazorApp"
             x:Class="MyBlazorApp.MainPage">

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

</ContentPage>

CreateMauiApp Denetimi uygulamanızda kullanmak üzere kaydetmek BlazorWebView için sınıfınızın MauiProgram yöntemini değiştirin. Bunu yapmak için nesnesinde IServiceCollection , services koleksiyonuna AddMauiBlazorWebView bileşen web görünümü hizmetleri eklemek için yöntemini çağırın:

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();
#endif
        // Register any app services on the IServiceCollection object
        // e.g. builder.Services.AddSingleton<WeatherForecastService>();

        return builder.Build();
    }
}

Yerel kullanıcı arabiriminden kapsamı belirlenmiş hizmetlere erişme

BlazorWebView, belirtilen Action<ServiceProvider> bir zaman uyumsuz olarak çağırabilen ve Razor bileşenlerinde kullanılabilen kapsamlı hizmetleri geçirebilen bir TryDispatchAsync yönteme sahiptir. Bu, yerel kullanıcı arabirimindeki kodun gibi NavigationManagerkapsamlı hizmetlere erişmesini sağlar:

private async void OnMyMauiButtonClicked(object sender, EventArgs e)
{
    var wasDispatchCalled = await blazorWebView.TryDispatchAsync(sp =>
    {
        var navMan = sp.GetRequiredService<NavigationManager>();
        navMan.CallSomeNavigationApi(...);
    });

    if (!wasDispatchCalled)
    {
        // Consider what to do if it the dispatch fails - that's up to your app to decide.
    }
}

Sorunları tanılama

BlazorWebView Blazor Karma uygulamanızdaki sorunları tanılamanıza yardımcı olabilecek yerleşik günlüğe kaydetme özelliğine sahiptir. Bu günlüğü etkinleştirmenin iki adımı vardır:

Tanılama bilgilerini günlüğe kaydetmek için ve ilgili bileşenleri etkinleştirin BlazorWebView .
Günlük çıkışını görüntüleyebileceğiniz yere yazmak için bir günlükçü yapılandırın.

Günlüğe kaydetme hakkında daha fazla bilgi için bkz . C# ve .NET'te günlüğe kaydetme.

BlazorWebView günlüğünü etkinleştirme

Tüm günlük yapılandırması, bağımlılık ekleme sisteminde hizmet kaydının bir parçası olarak gerçekleştirilebilir. Ad alanı altında ve ilgili bileşenler için en fazla günlüğe kaydetmeyi Microsoft.AspNetCore.Components.WebView etkinleştirmek içinBlazorWebView, uygulamanızın hizmetlerinin kayıtlı olduğu yere aşağıdaki kodu ekleyin:

services.AddLogging(logging =>
{
    logging.AddFilter("Microsoft.AspNetCore.Components.WebView", LogLevel.Trace);
});

Alternatif olarak, kullanan Microsoft.Extensions.Loggingher bileşen için en fazla günlüğe kaydetmeyi etkinleştirmek için aşağıdaki kodu kullanabilirsiniz:

services.AddLogging(logging =>
{
    logging.SetMinimumLevel(LogLevel.Trace);
});

Günlük çıkışını yapılandırma ve çıkışı görüntüleme

Günlük bilgilerini yazmak için bileşenleri yapılandırdıktan sonra, günlüğe kaydedenlerin günlükleri nereye yazacaklarını yapılandırmanız ve ardından günlük çıkışını görüntülemeniz gerekir.

Hata ayıklama günlüğü sağlayıcıları, çıktıyı deyimleri kullanarak Debug yazar ve çıktı Visual Studio'dan görüntülenebilir.

Hata ayıklama günlüğü sağlayıcısını yapılandırmak için önce projenize NuGet paketine Microsoft.Extensions.Logging.Debug bir başvuru ekleyin. Ardından uzantı yöntemini çağırarak sağlayıcıyı AddLogging önceki adımda eklediğiniz çağrısının AddDebug içine kaydedin:

services.AddLogging(logging =>
{
    logging.AddFilter("Microsoft.AspNetCore.Components.WebView", LogLevel.Trace);
    logging.AddDebug();
});

Uygulamayı Visual Studio'dan çalıştırdığınızda (hata ayıklama etkinken), hata ayıklama çıkışını Visual Studio'nun Çıkış penceresinde görüntüleyebilirsiniz.

iOS'ta satır içi video oynatma

iOS'taki Blazor karma uygulamasında satır içi video oynatmak için, içinde BlazorWebViewşunları yapmalısınız:

UrlLoadingStrategy özelliğini OpenInWebView olarak ayarlayın. Bu, olayın olay işleyicisinde UrlLoading gerçekleştirilebilir:

private void BlazorUrlLoading(object? sender, UrlLoadingEventArgs e)
{
#if IOS
    e.UrlLoadingStrategy = UrlLoadingStrategy.OpenInWebView;
#endif
}

Nesnedeki Configuration özelliğinin AllowsInlineMediaPlayback olarak trueayarlandığından emin olun. Bu, olayın olay işleyicisinde BlazorWebViewInitializing gerçekleştirilebilir:
```
private void BlazorWebViewInitializing(object? sender, BlazorWebViewInitializingEventArgs e)
{
#if IOS
    e.Configuration.AllowsInlineMediaPlayback = true;
#endif
}
```

Aracılığıyla paylaş