.NET MAUIBlazor Hybrid Создание приложения с Blazor помощью веб-приложения

Статья
05/03/2024

В этой статье показано, как создать .NET MAUIBlazor Hybrid приложение с веб-приложением, использующим общий пользовательский интерфейс через BlazorRazor библиотеку классов (RCL).

Предварительные требования и предварительные действия

Предварительные требования и предварительные действия см. в разделе "Создание .NET MAUIBlazor Hybrid приложения". Мы рекомендуем использовать руководство, чтобы настроить локальную систему для .NET MAUI разработки, прежде чем использовать .NET MAUIBlazor Hybrid инструкции в этой статье.

.NET MAUIBlazor Пример приложения веб-приложения

Получите пример приложения с именем MauiBlazorWeb изBlazorрепозитория GitHub () (dotnet/blazor-samples.NET 8 или более поздней версии).

Пример приложения — это начальное решение, содержащее .NET MAUIBlazor Hybrid (собственное кроссплатформенное) приложение, Blazor веб-приложение и библиотеку классов (RCL), содержащую общий пользовательский интерфейс (Razorкомпоненты), используемые собственными и Razor веб-приложениями.

.NET MAUIBlazor Hybrid Перенос решения

Вместо использования примера приложения можно перенести существующее .NET MAUIBlazor Hybrid приложение с инструкциями в этом разделе с помощью Visual Studio.

Добавьте новый проект в решение с Blazor помощью шаблона проекта веб-приложения . Выберите следующие параметры.

Имя проекта: используйте имя решения с .Web добавлением. В примерах в этой статье предполагается следующее именование:
- Решение: MauiBlazorWeb
- Проект MAUI: MauiBlazorWeb.Maui
- Blazor Веб-приложение: MauiBlazorWeb.Web
- Razor библиотека классов (RCL) (добавлена на следующем шаге): MauiBlazorWeb.Shared
Тип проверки подлинности: Нет
Настройка для HTTPS: выбрано (включено)
Режим интерактивной отрисовки: сервер
Расположение интерактивности: глобальное
Примеры страниц: unselected (disabled)

Параметр "Расположение взаимодействия" имеет значение Global, так как приложения MAUI всегда выполняются в интерактивном режиме и вызывают ошибки на Razor страницах компонентов, которые явно указывают режим отрисовки. Если вы не используете глобальный режим отрисовки, необходимо реализовать подход, описанный в разделе "Использование Blazor режимов отрисовки" после выполнения инструкций в этом разделе. Дополнительные сведения см. в разделе BlazorWebView, который требуется для включения переопределения ResolveComponentForRenderMode (dotnet/aspnetcore #51235).

Добавьте новый Razor проект библиотеки классов (RCL) в решение. В примерах в этой статье предполагается, что проект называется MauiBlazorWeb.Shared. Не выбирайте страницы и представления поддержки при добавлении проекта в решение.

Добавьте ссылки на проект RCL из проекта MAUI и Blazor проекта веб-приложения.

Переместите папку Components и все его содержимое из проекта MAUI в RCL. Убедитесь, что Components папка удаляется из проекта MAUI.

Совет

При перемещении папки или файла в Visual Studio используйте команды клавиатуры или контекстное меню, щелкнув правой кнопкой мыши операцию вырезания и вставки. Перетаскивание папки в Visual Studio копируется только из одного расположения в другое, что требует дополнительного шага для удаления исходного файла.

css Переместите папку из wwwroot папки проекта MAUI в папку RCLwwwroot.

Удалите следующие файлы из папки RCL wwwroot :

background.png
exampleJsInterop.js

В RCL замените корневой _Imports.razor файл одним из них в папке RCL Components , перезаписав существующий файл в RCL и удалив исходный файл в папке Components . После перемещения файла откройте его и переименуйте последние две @using инструкции, чтобы соответствовать пространству имен RCL. В следующем примере пространство имен RCL :MauiBlazorWeb.Shared

@using MauiBlazorWeb.Shared
@using MauiBlazorWeb.Shared.Components

В корневом каталоге проекта RCL удалите следующие файлы:

Component1.razor
ExampleJsInterop.cs

В RCL откройте Components/Routes.razor файл и измените его MauiProgram на Routes:

- <Router AppAssembly="@typeof(MauiProgram).Assembly">
+ <Router AppAssembly="@typeof(Routes).Assembly">

MainPage.xaml Откройте файл в проекте MAUI. Добавьте ссылку xmlns:shared на RCL в ContentPage атрибуты. В следующем примере пространство имен RCL находится MauiBlazorWeb.Sharedв следующем примере. Задайте правильное значение для обоих и следующих значений clr-namespaceassembly:

xmlns:shared="clr-namespace:MauiBlazorWeb.Shared;assembly=MauiBlazorWeb.Shared"

Кроме того, в MainPage.xaml файле обновите корневой BlazorWebView компонент ComponentType с local :shared

- <RootComponent Selector="#app" ComponentType="{x:Type local:Components.Routes}" />
+ <RootComponent Selector="#app" ComponentType="{x:Type shared:Components.Routes}" />

В проекте MAUI откройте wwwroot/index.html файл и таблицы стилей, чтобы указать путь статического ресурса RCL.

Удалите следующие строки.

- <link rel="stylesheet" href="css/bootstrap/bootstrap.min.css" />
- <link rel="stylesheet" href="css/app.css" />

Замените предыдущие строки следующим разметкой. В следующем примере путь статического ресурса RCL:_content/MauiBlazorWeb.Shared/

<link rel="stylesheet" href="_content/MauiBlazorWeb.Shared/css/bootstrap/bootstrap.min.css" />
<link rel="stylesheet" href="_content/MauiBlazorWeb.Shared/css/app.css" />

Blazor В веб-приложении откройте _Imports.razor файл и добавьте следующие две @using инструкции для RCL. В следующем примере пространство имен RCL :MauiBlazorWeb.Shared

@using MauiBlazorWeb.Shared
@using MauiBlazorWeb.Shared.Components

Blazor В проекте веб-приложения откройте App компонент (Components/App.razor). Удалите таблицу стилей app.css :

- <link rel="stylesheet" href="app.css" />

Замените предыдущую строку ссылками на таблицу стилей статического ресурса RCL. В следующем примере путь статического ресурса RCL:_content/MauiBlazorWeb.Shared/

<link rel="stylesheet" href="_content/MauiBlazorWeb.Shared/css/bootstrap/bootstrap.min.css" />
<link rel="stylesheet" href="_content/MauiBlazorWeb.Shared/css/app.css" />

Blazor В проекте веб-приложения удалите следующую папку и файлы:

Components/Layout
Components/Routes.razor
Components/Pages/Home.razor
wwwroot/app.css

Blazor Откройте файл веб-приложения Program.cs и добавьте дополнительную сборку для RCL в приложение. В следующем примере пространство имен RCL :MauiBlazorWeb.Shared

app.MapRazorComponents<App>()
    .AddInteractiveServerRenderMode()
    .AddAdditionalAssemblies(typeof(MauiBlazorWeb.Shared._Imports).Assembly);

Запустите проект MAUI, выбрав проект в Обозреватель решений и нажав кнопку запуска Visual Studio.

Blazor Запустите проект веб-приложения, выбрав Blazor проект веб-приложения в Обозреватель решений и нажав кнопку запуска Visual Studio с https конфигурацией сборки.

Если вы получаете ошибку сборки, которую не удается разрешить сборку RCL, сначала создайте проект RCL. Если при сборке возникают ошибки ресурсов проекта MAUI, перестройте проект MAUI, чтобы очистить ошибки.

Использование Blazor режимов отрисовки

Используйте инструкции в одном из следующих подразделов, которые соответствуют спецификациям приложения для применения Blazorрежимов отрисовки для заданного расположения интерактивности в веб-приложении, но игнорируйте назначения режима отрисовки в Blazor проекте MAUI.

Подразделы спецификации режима отрисовки и интерактивности:

Интерактивность глобального сервера
Интерактивность глобального авто или webAssembly
Интерактивность сервера на страницу или компонент
Автоматическая интерактивность для каждой страницы или компонента
Интерактивность webAssembly на страницу или компонент

Интерактивность глобального сервера

Режим интерактивной отрисовки: сервер
Расположение интерактивности: глобальное
Проекты решений
- MAUI (MauiBlazorWeb.Maui)
- Blazor Веб-приложение (MauiBlazorWeb.Web)
- RCL (MauiBlazorWeb.Shared): содержит общие Razor компоненты без настройки режимов отрисовки в каждом компоненте.

Ссылки на проект: MauiBlazorWeb.Maui и MauiBlazorWeb.Web ссылка на MauiBlazorWeb.Sharedпроект.

Интерактивность глобального авто или webAssembly

Режим интерактивной отрисовки: авто или WebAssembly
Расположение интерактивности: глобальное
Проекты решений
- MAUI (MauiBlazorWeb.Maui)
- Blazor Веб-приложение
  - Проект сервера: MauiBlazorWeb.Web
  - Клиентский проект: MauiBlazorWeb.Web.Client
- RCL (MauiBlazorWeb.Shared): содержит общие Razor компоненты без настройки режимов отрисовки в каждом компоненте.

Ссылки на проект:

MauiBlazorWeb.Maui, MauiBlazorWeb.Webи MauiBlazorWeb.Web.Client проекты имеют ссылку на MauiBlazorWeb.Sharedпроект.
MauiBlazorWeb.Web имеет ссылку на MauiBlazorWeb.Web.Clientпроект.

Интерактивность сервера на страницу или компонент

Режим интерактивной отрисовки: сервер
Расположение интерактивности: на страницу или компонент
Проекты решений
- MAUI (MauiBlazorWeb.Maui): вызовы InteractiveRenderSettings.ConfigureBlazorHybridRenderModes в MauiProgram.cs.
- Blazor Веб-приложение (MauiBlazorWeb.Web): не задает @rendermode атрибут директивы для HeadOutletRoutes компонентов App компонента (Components/App.razor).
- RCL (MauiBlazorWeb.Shared): содержит общие Razor компоненты, которые задают InteractiveServer режим отрисовки в каждом компоненте.

MauiBlazorWeb.Maui и MauiBlazorWeb.Web ссылка на MauiBlazorWeb.Sharedпроект.

Добавьте следующий InteractiveRenderSettings класс в RCL. Свойства класса используются для задания режимов отрисовки компонентов.

Проект MAUI по умолчанию является интерактивным, поэтому никаких действий на уровне проекта в проекте MAUI, отличном от вызова InteractiveRenderSettings.ConfigureBlazorHybridRenderModes.

Blazor Для веб-приложения на веб-клиенте присваиваются RenderModeзначения свойств. Когда компоненты загружаются в BlazorWebView собственный клиент проекта MAUI, режимы отрисовки не назначены (nullпоскольку проект MAUI явно задает свойства null режима отрисовки при ConfigureBlazorHybridRenderModes вызове).

InteractiveRenderSettings.cs:

using Microsoft.AspNetCore.Components;
using Microsoft.AspNetCore.Components.Web;

namespace MauiBlazorWeb.Shared;

public static class InteractiveRenderSettings
{
    public static IComponentRenderMode? InteractiveServer { get; set; } = 
        RenderMode.InteractiveServer;
    public static IComponentRenderMode? InteractiveAuto { get; set; } = 
        RenderMode.InteractiveAuto;
    public static IComponentRenderMode? InteractiveWebAssembly { get; set; } = 
        RenderMode.InteractiveWebAssembly;

    public static void ConfigureBlazorHybridRenderModes()
    {
        InteractiveServer = null;
        InteractiveAuto = null;
        InteractiveWebAssembly = null;
    }
}

MauiProgram.csВMauiProgram.CreateMauiApp, вызовConfigureBlazorHybridRenderModes:

InteractiveRenderSettings.ConfigureBlazorHybridRenderModes();

В файле RCL _Imports.razor добавьте следующую глобальную статическую @using директиву, чтобы сделать свойства класса доступными для компонентов:

@using static InteractiveRenderSettings

Примечание.

Назначение режимов отрисовки через свойства класса RCL InteractiveRenderSettings отличается от типичного автономного Blazor веб-приложения. Blazor В веб-приложении режимы отрисовки обычно предоставляются с помощью RenderMode@using static Microsoft.AspNetCore.Components.Web.RenderMode инструкции в Blazor файле веб-приложения_Import.

Автоматическая интерактивность для каждой страницы или компонента

Режим интерактивной отрисовки: авто
Расположение интерактивности: на страницу или компонент
Проекты решений
- MAUI (MauiBlazorWeb.Maui): вызовы InteractiveRenderSettings.ConfigureBlazorHybridRenderModes в MauiProgram.cs.
- Blazor Веб-приложение
  - Проект сервера: MauiBlazorWeb.Webне задает @rendermode атрибут директивы для HeadOutletRoutes компонентов App компонента (Components/App.razor).
  - Клиентский проект: MauiBlazorWeb.Web.Client
- RCL (MauiBlazorWeb.Shared): содержит общие Razor компоненты, которые задают InteractiveAuto режим отрисовки в каждом компоненте.

Ссылки на проект:

MauiBlazorWeb.Maui, MauiBlazorWeb.Webи MauiBlazorWeb.Web.Client имеет ссылку на MauiBlazorWeb.Sharedпроект.
MauiBlazorWeb.Web имеет ссылку на MauiBlazorWeb.Web.Clientпроект.

InteractiveRenderSettings.cs:

using Microsoft.AspNetCore.Components;
using Microsoft.AspNetCore.Components.Web;

namespace MauiBlazorWeb.Shared;

public static class InteractiveRenderSettings
{
    public static IComponentRenderMode? InteractiveServer { get; set; } = 
        RenderMode.InteractiveServer;
    public static IComponentRenderMode? InteractiveAuto { get; set; } = 
        RenderMode.InteractiveAuto;
    public static IComponentRenderMode? InteractiveWebAssembly { get; set; } = 
        RenderMode.InteractiveWebAssembly;

    public static void ConfigureBlazorHybridRenderModes()
    {
        InteractiveServer = null;
        InteractiveAuto = null;
        InteractiveWebAssembly = null;
    }
}

MauiProgram.csВMauiProgram.CreateMauiApp, вызовConfigureBlazorHybridRenderModes:

InteractiveRenderSettings.ConfigureBlazorHybridRenderModes();

@using static InteractiveRenderSettings

Примечание.

Интерактивность webAssembly на страницу или компонент

Режим интерактивной отрисовки: WebAssembly
Расположение интерактивности: на страницу или компонент
Проекты решений
- MAUI (MauiBlazorWeb.Maui)
- Blazor Веб-приложение
  - Проект сервера: MauiBlazorWeb.Webне задает @rendermode атрибут директивы для HeadOutletRoutes компонентов App компонента (Components/App.razor).
  - Клиентский проект: MauiBlazorWeb.Web.Client
- RcLs
  - MauiBlazorWeb.Shared
  - MauiBlazorWeb.Shared.Client: содержит общие Razor компоненты, которые задают InteractiveWebAssembly режим отрисовки в каждом компоненте. .Shared.Client RCL поддерживается отдельно от RCL, так как приложение должно поддерживать компоненты, необходимые для запуска в WebAssembly отдельно от .Shared компонентов, работающих на сервере, и которые остаются на сервере.

Ссылки на проект:

MauiBlazorWeb.Maui и MauiBlazorWeb.Web ссылки на MauiBlazorWeb.Sharedпроект.
MauiBlazorWeb.Web имеет ссылку на MauiBlazorWeb.Web.Clientпроект.
MauiBlazorWeb.Web.Client и MauiBlazorWeb.Shared ссылка на MauiBlazorWeb.Shared.Clientпроект.

Добавьте следующий AdditionalAssemblies параметр в Router экземпляр компонента для MauiBlazorWeb.Shared.Client сборки проекта (через файл _Imports ) в MauiBlazorWeb.Shared файле проекта Routes.razor :

<Router AppAssembly="@typeof(Routes).Assembly" 
        AdditionalAssemblies="new [] { typeof(MauiBlazorWeb.Shared.Client._Imports).Assembly }">
    <Found Context="routeData">
        <RouteView RouteData="@routeData" DefaultLayout="@typeof(Components.Layout.MainLayout)" />
        <FocusOnNavigate RouteData="@routeData" Selector="h1" />
    </Found>
</Router>

Добавьте сборку MauiBlazorWeb.Shared.Client проекта (через файл _Imports ) со следующим AddAdditionalAssemblies вызовом в MauiBlazorWeb.Web файле проекта Program.cs :

app.MapRazorComponents<App>()    
    .AddInteractiveWebAssemblyRenderMode()
    .AddAdditionalAssemblies(typeof(MauiBlazorWeb.Shared._Imports).Assembly)
    .AddAdditionalAssemblies(typeof(MauiBlazorWeb.Shared.Client._Imports).Assembly);

Добавьте следующий InteractiveRenderSettings класс в .Shared.Client RCL. Свойства класса используются для задания режимов отрисовки компонентов на основе сервера.

InteractiveRenderSettings.cs (.Shared.Client RCL):

using Microsoft.AspNetCore.Components;
using Microsoft.AspNetCore.Components.Web;

namespace MauiBlazorWeb.Shared;

public static class InteractiveRenderSettings
{
    public static IComponentRenderMode? InteractiveServer { get; set; } = 
        RenderMode.InteractiveServer;
    public static IComponentRenderMode? InteractiveAuto { get; set; } = 
        RenderMode.InteractiveAuto;
    public static IComponentRenderMode? InteractiveWebAssembly { get; set; } = 
        RenderMode.InteractiveWebAssembly;

    public static void ConfigureBlazorHybridRenderModes()
    {
        InteractiveServer = null;
        InteractiveAuto = null;
        InteractiveWebAssembly = null;
    }
}

В RCL добавляется .Shared немного другая версия InteractiveRenderSettings класса. В классе, добавленном в .Shared RCL, InteractiveRenderSettings.ConfigureBlazorHybridRenderModes.Shared.Client вызывается RCL. Это гарантирует, что режим отрисовки компонентов WebAssembly, отображаемых на клиенте MAUI, не назначен (null), так как они интерактивны по умолчанию на собственном клиенте.

InteractiveRenderSettings.cs (.Shared RCL):

using Microsoft.AspNetCore.Components;
using Microsoft.AspNetCore.Components.Web;

namespace MauiBlazorWeb.Shared
{
    public static class InteractiveRenderSettings
    {
        public static IComponentRenderMode? InteractiveServer { get; set; } = 
            RenderMode.InteractiveServer;
        public static IComponentRenderMode? InteractiveAuto { get; set; } = 
            RenderMode.InteractiveAuto;
        public static IComponentRenderMode? InteractiveWebAssembly { get; set; } = 
            RenderMode.InteractiveWebAssembly;

        public static void ConfigureBlazorHybridRenderModes()
        {
            InteractiveServer = null;
            InteractiveAuto = null;
            InteractiveWebAssembly = null;
            MauiBlazorWeb.Shared.Client.InteractiveRenderSettings
                .ConfigureBlazorHybridRenderModes();
        }
    }
}

MauiProgram.csВMauiProgram.CreateMauiApp, вызовConfigureBlazorHybridRenderModes:

InteractiveRenderSettings.ConfigureBlazorHybridRenderModes();

_Imports.razor В файле .Shared.Client RCL добавьте @using static InteractiveRenderSettings свойства класса, доступного InteractiveRenderSettings компонентам:

@using static InteractiveRenderSettings

Примечание.

Использование интерфейсов для поддержки различных реализаций устройств

В следующем примере показано, как использовать интерфейс для вызова различных реализаций в веб-приложении и собственном приложении (MAUI). В следующем примере создается компонент, отображающий форм-фактор устройства. Используйте уровень абстракции MAUI для собственных приложений и предоставьте реализацию для веб-приложения.

В библиотеке Razor классов (RCL) создайте папку Interfaces и добавьте файл с именем IFormFactor.cs со следующим кодом.

Interfaces/IFormFactor.cs:

namespace MauiBlazorWeb.Shared.Interfaces;

public interface IFormFactor
{
    public string GetFormFactor();
    public string GetPlatform();
}

В папке RCL Components добавьте следующий DeviceFormFactor компонент.

Components/Pages/DeviceFormFactor.razor:

@page "/device-form-factor"
@using MauiBlazorWeb.Shared.Interfaces
@inject IFormFactor FormFactor

<PageTitle>Form Factor</PageTitle>

<h1>Device Form Factor</h1>

<p>You are running on:</p>

<ul>
    <li>Form Factor: @factor</li>
    <li>Platform: @platform</li>
</ul>

<p>
    <em>This component is defined in the MauiBlazorWeb.Shared library.</em>
</p>

@code {
    private string factor => FormFactor.GetFormFactor();
    private string platform => FormFactor.GetPlatform();
}

В RCL добавьте запись для DeviceFormFactor компонента в меню навигации.

В Components/Layout/NavMenu.razor:

<div class="nav-item px-3">
    <NavLink class="nav-link" href="device-form-factor">
        <span class="bi bi-list-nested-nav-menu" aria-hidden="true"></span> Form Factor
    </NavLink>
</div>

Предоставление реализаций в веб-приложениях и собственных приложениях.

Blazor В веб-приложении добавьте папку с именемServices. Добавьте файл в папку Services с именем FormFactor.cs со следующим кодом.

Services/FormFactor.cs (Blazor Проект веб-приложения):

using MauiBlazorWeb.Shared.Interfaces;

namespace MauiBlazorWeb.Web.Services;

public class FormFactor : IFormFactor
{
    public string GetFormFactor()
    {
        return "Web";
    }
    public string GetPlatform()
    {
        return Environment.OSVersion.ToString();
    }
}

В проекте MAUI добавьте папку с именем Services и добавьте файл с именем FormFactor.cs. Уровень абстракций MAUI используется для написания кода, работающего на всех собственных платформах устройств.

Services/FormFactor.cs (проект MAUI):

using MauiBlazorWeb.Shared.Interfaces;

namespace MauiBlazorWeb.Maui.Services;

public class FormFactor : IFormFactor
{
    public string GetFormFactor()
    {
        return DeviceInfo.Idiom.ToString();
    }
    public string GetPlatform()
    {
        return DeviceInfo.Platform.ToString() + " - " + DeviceInfo.VersionString;
    }
}

Используйте внедрение зависимостей для получения реализаций этих служб.

В проекте MAUI откройте MauiProgram.cs файл и добавьте следующие using инструкции в начало файла:

using MauiBlazorWeb.Maui.Services;
using MauiBlazorWeb.Shared.Interfaces;

Непосредственно перед вызовом builder.Build()добавьте следующий код для добавления служб, относящихся к устройству, используемых RCL:

builder.Services.AddSingleton<IFormFactor, FormFactor>();

Blazor В веб-приложении откройте Program файл и добавьте следующие using инструкции в начало файла:

using MauiBlazorWeb.Shared.Interfaces;
using MauiBlazorWeb.Web.Services;

builder.Services.AddScoped<IFormFactor, FormFactor>();

Если решение также предназначено для WebAssembly через .Web.Client проект, в проекте также требуется .Web.Client реализация предыдущего API.

Вы также можете использовать директивы препроцессора компилятора в RCL для реализации разного пользовательского интерфейса в зависимости от устройства, на котором работает приложение. Для этого сценария приложение должно иметь многоцелевой целевой объект RCL так же, как и приложение MAUI. Пример см. в репозитории BethMassi/BethTimeUntilGitHub.

Поделиться через

.NET MAUIBlazor Hybrid Создание приложения с Blazor помощью веб-приложения

Предварительные требования и предварительные действия

.NET MAUIBlazor Пример приложения веб-приложения

.NET MAUIBlazor Hybrid Перенос решения

Использование Blazor режимов отрисовки

Интерактивность глобального сервера

Интерактивность глобального авто или webAssembly

Интерактивность сервера на страницу или компонент

Автоматическая интерактивность для каждой страницы или компонента

Интерактивность webAssembly на страницу или компонент

Использование интерфейсов для поддержки различных реализаций устройств

Дополнительные ресурсы

Обратная связь

Дополнительные ресурсы