另辟新径实现 Blazor/MAUI 本机交互(三)

新建一个Maui blazor工程, 下面是工程关键文件解析.

MainPage.xaml.cs

构造函数：

• 通过 FindByName 方法查找名为 webView 的 WebView 控件，并将其赋值给 wvBrowser 变量。
• 创建 NativeBridge 的实例 api，并将 wvBrowser 传递给它。
• 使用 api.AddTarget 方法添加一个名为 dialogs 的目标对象，实例为 NativeApi。

平台特定代码：

• 在 #if MACCATALYST 条件编译指令中，针对 Mac Catalyst 平台，检查操作系统版本是否至少为 16.6，如果是，则将 WebView 控件的 Inspectable 属性设置为 true，以便在开发工具中进行检查(相当于pc浏览器的f12)。

NativeBridge 类：

• NativeBridge 类用于在 WebView 和本地代码之间建立通信桥梁。
• 通过 AddTarget 方法，可以将本地对象的方法和属性注入到 WebView 中，使得 JavaScript 可以调用这些方法和属性。
• OnWebViewInit 和 OnWebViewNavigatin 方法分别处理 WebView 的初始化和导航事件。
• RunCommand 方法用于执行本地方法或属性访问，并将结果返回给 WebView。
• sendEvent 方法用于发送自定义事件到 WebView。
• RunJS 方法用于在 WebView 中执行 JavaScript 代码。

通过这些代码，MainPage 类实现了在 .NET MAUI 应用程序中使用 WebView 控件，并通过 NativeBridge 类实现了与本地代码的交互

using WebViewNativeApi;

public partial class MainPage : TabbedPage
{
    private NativeBridge? api;

    public MainPage()
    {
        InitializeComponent();

        //附加本机功能处理
        WebView? wvBrowser = FindByName("webView") as WebView;
        api = new NativeBridge(wvBrowser);
        api.AddTarget("dialogs", new NativeApi());
#if MACCATALYST
        Microsoft.Maui.Handlers.WebViewHandler.Mapper.AppendToMapping("Inspect", (handler, view) =>
        {
            if (OperatingSystem.IsMacCatalystVersionAtLeast(16, 6))
                handler.PlatformView.Inspectable = true;
        });
#endif
    }
}

MainPage.xaml

使用 WebView 打开远程页面

<?xml version="1.0" encoding="utf-8" ?>
<TabbedPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:test1.Component"
             x:Class="test1.MainPage"
            xmlns:pages="clr-namespace:test1"
            > 
    <ContentPage Title="主页">
        <VerticalStackLayout Spacing="25">
            <Label Text="Hello, Hybird!"
                   HorizontalOptions="Center"
                   BackgroundColor="Honeydew"
                   TextColor="Black"/>
            <WebView x:Name="webView" Source="https://localhost:5001" HeightRequest="700" />
            <Label Text="Hello, Hybird!"
                   HorizontalOptions="Center"
                   BackgroundColor="Honeydew"
                   TextColor="Black"/>
        </VerticalStackLayout>
    </ContentPage>
     
    <ContentPage Title="打印机"> 
    </ContentPage>
     
    <ContentPage Title="测试"> 
    </ContentPage>
</TabbedPage>