MAUI + Blazor Hybrid：按下手柄后退按钮 Android

Question

我有一个使用 MAUI Hybrid 生成 Android 应用程序 (apk) 的项目。 MAUI 应用程序中有一个 blazorWebView 运行，因此页面代码被网站（un Blazor Wasm）和 MAUI 应用程序（MAUI + Blazor WebView）使用。

MAUI 应用程序中包含一个 blazorWebView（代码来自 MainPage.xaml）：

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:b="clr-namespace:Microsoft.AspNetCore.Components.WebView.Maui;assembly=Microsoft.AspNetCore.Components.WebView.Maui"
             xmlns:local="clr-namespace:MyMauiBlazor"
             x:Class="MyMauiBlazor.MainPage">

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

</ContentPage>

在Android设备上，是否可以处理按下的后退按钮？

目前，应用程序关闭，但我想处理这个事件（例如：导航到上一页）。有办法吗？

Answer 1

我遇到了和你一样的问题，微软官方还不支持 MAUI blazor 的返回键导航，但我找到了一个临时解决方案：

首先你要创建一个javascript文件，把它放在wwwroot文件夹里，然后把它包含在index.html文件里。在 js 文件中放入此代码：

window.goBack = () => {
   history.go(-1);
}

然后你必须创建一个 c# class 并使它成为一个服务，所以例如我创建了一个名为 GoBack.cs 的 class。要将其设置为服务，只需将此代码放入 MauiProgram.cs:

builder.Services.AddTransient<GoBack>();

在 GoBack class 中，您必须创建一个静态变量和方法，否则您将无法使用 IJSRuntime 互操作。我的 GoBack 文件如下：

public class GoBack 
{
    private static IJSRuntime JSRuntime { get; set; }

    public GoBack(IJSRuntime jSRuntime)
    {
        GoBack.JSRuntime = jSRuntime;
    }
   
    public static async Task GoBackInTime()
    {
        //Microsoft.Maui.Platform;
        if (GoBack.JSRuntime != null)
        {
            await GoBack.JSRuntime.InvokeVoidAsync("goBack");
        }
    }

    
}

GoBackInTime方法是通过jsInteroperability调用js方法goBack。现在您必须在加载此服务的第一个 blazor 页面中注入。

@inject GoBack goBack

这样cs文件中的jsRuntime会被初始化而不是null

现在您所要做的就是覆盖 MainPage.xaml.cs:

中的 OnBackButtonPressed 方法

protected override bool OnBackButtonPressed()
{
    GoBack.GoBackInTime();
    return true;
}

这样，当按下后退按钮时，它不会退出应用程序（因为我们正在返回 true），同时调用 js 函数，因此 blazor 页面将导航到上一页。

MAUI + Blazor Hybrid：按下手柄后退按钮 Android

MAUI + Blazor Hybrid : Handle Back Button Pressed on Android

.net

android

hybrid-mobile-app

blazor

maui-blazor