Przeczytaj w języku angielskim

Udostępnij za pośrednictwem


Eksperymentalne powiązania platformy Blazor dla urządzeń przenośnych

Eksperymentalne powiązania platformy Blazor dla urządzeń przenośnych umożliwiają deweloperom tworzenie natywnych i hybrydowych aplikacji mobilnych przy użyciu języków C# i .NET dla systemów Android, iOS, Windows, macOS i Tizen przy użyciu znanych wzorców programowania internetowego. Eksperymentalne powiązania platformy Blazor mobile używają składni Razor do definiowania składników interfejsu użytkownika i zachowań aplikacji. Podstawowe składniki interfejsu użytkownika są oparte na natywnych składnikach interfejsu użytkownika platformy Xamarin.Forms i w aplikacjach hybrydowych są mieszane z elementami HTML.

Platforma Blazor działa na platformie .NET Standard 2.0 , więc możesz udostępnić kod platformy .NET większości innych aplikacji .NET.

Dzięki powiązaniom platformy Blazor dla urządzeń przenośnych można łatwo utworzyć natywny interfejs użytkownika z etykietami, przyciskami i innymi natywnymi składnikami interfejsu użytkownika:

<StackLayout>
    <Label FontSize="30"
           Text="@("You pressed " + count + " times")" />
    <Button Text="+1"
            OnClick="@HandleClick" />
</StackLayout>

@code {
    int count;

    void HandleClick()
    {
        count++;
    }
}

W tym miejscu działa on w emulatorze systemu Android:

Prosta aplikacja natywna uruchomiona w emulatorze systemu Android

Możesz tworzyć aplikacje hybrydowe, które mieszają natywny interfejs użytkownika i interfejs użytkownika HTML na tym samym ekranie, a wszystkie współużytkują tę samą logikę i stan aplikacji:

  • /Main.razor: (natywny interfejs użytkownika)

    @inject CounterState CounterState
    
    <ContentView>
        <StackLayout>
    
            <StackLayout Margin="new Thickness(20)">
                <Label Text="@($"You pressed {CounterState.CurrentCount} times")" FontSize="30" />
                <Button Text="Increment from native" OnClick="@CounterState.IncrementCount" Padding="10" />
            </StackLayout>
    
            <BlazorWebView ContentRoot="WebUI/wwwroot" VerticalOptions="LayoutOptions.FillAndExpand">
                <FirstBlazorHybridApp.WebUI.App />
            </BlazorWebView>
    
        </StackLayout>
    </ContentView>
    
    @code {
        // initialization code
    }
    
  • /WebUI/App.razor: (interfejs użytkownika HTML)

    @inject CounterState CounterState
    
    <div style="text-align: center; background-color: lightblue;">
        <div>
            <span style="font-size: 30px; font-weight: bold;">
                You pressed @CounterState.CurrentCount times
            </span>
        </div>
        <div>
            <button style="margin: 20px;" @onclick="ClickMe">Increment from HTML</button>
        </div>
    </div>
    
    @code
    {
        private void ClickMe()
        {
            CounterState.IncrementCount();
        }
    
        // initialization code
    }
    

W tym miejscu działa on w symulatorze systemu iOS z natywnym interfejsem użytkownika u góry i interfejsem użytkownika HTML u dołu, udostępnianiem logiki i stanu aplikacji:

Prosta aplikacja hybrydowa uruchomiona w symulatorze systemu iOS

Aby utworzyć pierwsze aplikacje, zapoznaj się z następującymi tematami:

A gdy wszystko będzie gotowe, zapoznaj się z przewodnikami:

Następnie niektóre tematy zaawansowane:

A na koniec, jeśli chcesz współtworzyć, zapoznaj się z następującymi tematami: