Číst v angličtině

Sdílet prostřednictvím


Experimentální mobilní vazby Blazor

Experimentální mobilní vazby Blazor umožňují vývojářům vytvářet nativní a hybridní mobilní aplikace pomocí C# a .NET pro Android, iOS, Windows, macOS a Tizen pomocí známých vzorů webového programování. Experimentální vazby Mobile Blazor používají syntaxi Razor k definování komponent uživatelského rozhraní a chování aplikace. Základní komponenty uživatelského rozhraní jsou založené na nativních komponentách uživatelského rozhraní Xamarin.Forms a v hybridních aplikacích se mísí s elementy HTML.

Blazor běží na .NET Standard 2.0 , takže kód .NET můžete sdílet s většinou ostatních aplikací .NET.

Díky vazbám Mobile Blazor bindings můžete snadno vytvořit nativní uživatelské rozhraní s popisky, tlačítky a dalšími nativními komponentami uživatelského rozhraní:

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

@code {
    int count;

    void HandleClick()
    {
        count++;
    }
}

A tady běží v Android Emulatoru:

Jednoduchá nativní aplikace spuštěná v emulátoru Androidu

A můžete vytvářet hybridní aplikace, které kombinují nativní uživatelské rozhraní a uživatelské rozhraní HTML na stejné obrazovce a sdílejí stejnou logiku a stav aplikace:

  • /Main.razor: (nativní uživatelské rozhraní)

    @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: (uživatelské rozhraní 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
    }
    

A tady běží v simulátoru iOS s nativním uživatelským rozhraním nahoře a uživatelským rozhraním HTML v dolní části a sdílí logiku a stav aplikace:

Jednoduchá hybridní aplikace spuštěná v simulátoru iOS

Pokud chcete vytvořit první aplikace, podívejte se na tato témata:

A až budete připraveni na další, podívejte se na návody:

Pak některá z pokročilých témat:

A nakonec, pokud chcete přispět, podívejte se na tato témata: