新建一个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 MACCATALYSTMicrosoft.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>