MAUI + Blazor 混合开发：在 Android 上处理后退按钮按下事件

Question

我有一个项目使用MAUI Hybrid来制作一个Android应用程序（apk）。

在MAUI应用程序中运行blazorWebView，以便页面的代码被Web站点（未经处理的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设备上，是否有可能处理返回按钮按下事件？

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

- Alfa

Answer 1

我和你一样遇到了同样的问题，微软官方目前还不支持 MAUI Blazor 的后退键导航，但我找到了一个临时解决方案：

首先，你需要创建一个 JavaScript 文件，并将其放置在 wwwroot 文件夹中，在 index.html 文件中引入它。在 js 文件中加入以下代码：

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

然后您需要创建一个C#类并将其制作成服务，例如，我创建了一个名为GoBack.cs的类。要将其设置为服务，只需将以下代码放入MauiProgram.cs中：

builder.Services.AddTransient<GoBack>();

在GoBack类中，您需要创建一个静态变量和方法，否则您将无法使用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 页面将导航到上一页。

- SimoPisa

---

这还有效吗？对我没用！ - Mohammad

我找到的最简单的解决方案是https://stackoverflow.com/a/77028980/6832760。如果你想禁用返回按钮，那就返回false。 - undefined