Сообщение Re: Hybrid Blazor apps in the Mobile Blazor Bindings July up от 23.07.2020 7:23
Изменено 25.07.2020 12:26 Serginio1
Новая функция гибридных приложений позволяет смешивать компоненты Blazor native UI с компонентами Blazor web UI на одной странице. Этот просто огромен!
Гибридные приложения размещаются в новом BlazorWebViewкомпоненте, который использует компонент браузера для размещения веб-части приложения. Нет удаленного или локального веб-сервера; весь ваш код выполняется в процессе приложения.
Новый blazorhybrid шаблон проекта, поддерживающий Android, iOS, Windows (WPF) и macOS для создания гибридных приложений
Обновленные зависимости: Xamarin.Формы 4.7, Xamarin.Essentials 1.5 и другие библиотеки.
Для использования нового предварительного просмотра требуется пакет SDK .NET Core 3.1
Как это работает?
В гибридных приложениях весь код (как для собственных частей пользовательского интерфейса, так и для веб-частей пользовательского интерфейса) выполняется на устройстве как .NET-код. Нет ни локального, ни удаленного веб-сервера, ни WebAssembly (WASM). .NET-код для всего приложения выполняется в одном процессе. Собственные компоненты пользовательского интерфейса выполняются как стандартные компоненты пользовательского интерфейса устройства (кнопка, метка и т. д.) и компоненты веб-интерфейса размещаются в представлении браузера (например, WebKit, Chromium и Edge WebView2). Компоненты могут совместно использовать состояние с помощью стандартных шаблонов .NET, таких как обработчики событий, инъекция зависимостей или что-то еще, что вы уже используете в своих приложениях сегодня.
Образец гибридного кода Blazor
Вот код для приложения, похожего на то, что было видно в верхней части этого поста. Он имеет собственный пользовательский интерфейс и веб-интерфейс, разделяющие одно и то же состояние приложения, работающие вместе в одном и том же процессе приложения (без веб-сервера или HTTP). Собственный пользовательский интерфейс использует новый <BlazorWebView> компонент, чтобы указать, какой веб-компонент следует загрузить и где найти статические веб-ресурсы. Блейзор делает всю работу.
Это главная страница собственного пользовательского интерфейса/Main.razor:
Это главная страница собственного пользовательского интерфейса/Main.razor:
@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
}
А это встроенная страница пользовательского интерфейса HTML/WebUI/App.razor:
@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
}
Вот он компромис!
https://docs.microsoft.com/ru-ru/mobile-blazor-bindings/
Новая функция гибридных приложений позволяет смешивать компоненты Blazor native UI с компонентами Blazor web UI на одной странице. Этот просто огромен!
Гибридные приложения размещаются в новом BlazorWebView компоненте, который использует компонент браузера для размещения веб-части приложения. Нет удаленного или локального веб-сервера; весь ваш код выполняется в процессе приложения.
Новый blazorhybrid шаблон проекта, поддерживающий Android, iOS, Windows (WPF) и macOS для создания гибридных приложений
Обновленные зависимости: Xamarin.Формы 4.7, Xamarin.Essentials 1.5 и другие библиотеки.
Для использования нового предварительного просмотра требуется пакет SDK .NET Core 3.1
Как это работает?
В гибридных приложениях весь код (как для собственных частей пользовательского интерфейса, так и для веб-частей пользовательского интерфейса) выполняется на устройстве как .NET-код. Нет ни локального, ни удаленного веб-сервера, ни WebAssembly (WASM). .NET-код для всего приложения выполняется в одном процессе. Собственные компоненты пользовательского интерфейса выполняются как стандартные компоненты пользовательского интерфейса устройства (кнопка, метка и т. д.) и компоненты веб-интерфейса размещаются в представлении браузера (например, WebKit, Chromium и Edge WebView2). Компоненты могут совместно использовать состояние с помощью стандартных шаблонов .NET, таких как обработчики событий, инъекция зависимостей или что-то еще, что вы уже используете в своих приложениях сегодня.
Образец гибридного кода Blazor
Вот код для приложения, похожего на то, что было видно в верхней части этого поста. Он имеет собственный пользовательский интерфейс и веб-интерфейс, разделяющие одно и то же состояние приложения, работающие вместе в одном и том же процессе приложения (без веб-сервера или HTTP). Собственный пользовательский интерфейс использует новый <BlazorWebView> компонент, чтобы указать, какой веб-компонент следует загрузить и где найти статические веб-ресурсы. Блейзор делает всю работу.
Это главная страница собственного пользовательского интерфейса/Main.razor:
Это главная страница собственного пользовательского интерфейса/Main.razor:
@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
}
А это встроенная страница пользовательского интерфейса HTML/WebUI/App.razor:
@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
}
Вот он компромис!
https://docs.microsoft.com/ru-ru/mobile-blazor-bindings/