# .NET MAUI 中的 HybridWebView ## 概述 “HybridWebView”在 .NET MAUI 应用程序中托管 HTML/JS/CSS 内容，并提供 JavaScript 和 C# 之间的双向通信。它不是一般的浏览器控件，它是为应用程序附带的本地 Web 内容而设计的。 ## 项目布局将 Web 资源放置在 **Resources/Raw/wwwroot**（默认根目录）下。如果需要，使用“HybridRootComponent”属性设置不同的根。资源/原始/wwwroot/ index.html ← 入口点（默认）脚本/app.js 样式/app.css ## XAML 设置 <混合Web视图 x:名称=“myHybridWebView” 默认文件=“index.html” RawMessageReceived =“OnRawMessageReceived” 水平选项=“填充” VerticalOptions=“填充”/> `DefaultFile` 设置启动时加载的 HTML 页面（默认为 `index.html`）。 ##index.html结构页面**必须**在任何应用程序脚本之前包含桥接脚本： <正文> ## C# → JavaScript (InvokeJavaScriptAsync) 从 C# 调用 JS 函数并接收类型化结果： // JS: function addNumbers(a, b) { return a + b; } var 结果 = 等待 myHybridWebView.InvokeJavaScriptAsync( "添加号码", MyJsonContext.Default.Int32, // 返回类型信息 [2, 3], // 参数 [MyJsonContext.Default.Int32, // 参数 1 类型信息 MyJsonContext.Default.Int32]); // 参数2类型信息对于复杂类型： var person =等待 myHybridWebView.InvokeJavaScriptAsync( “获取人”， MyJsonContext.Default.Person， [编号], [MyJsonContext.Default.Int32]); 每个参数类型和返回类型**必须**在“JsonSerializerContext”中注册一个“JsonTypeInfo”。 ## JavaScript → C# (InvokeDotNet) 从 JS 中，调用调用目标上公开的 C# 方法： const result = wait window.HybridWebView.InvokeDotNet('MethodName', [param1, param2]); window.HybridWebView.InvokeDotNet('LogEvent', ['click', 'button1']); // 即发即忘 ### 设置调用目标注册JS可以调用公共方法的对象： myHybridWebView.SetInvokeJavaScriptTarget(new MyJsBridge()); 公共类 MyJsBridge { public string Greet(string name) => $"你好，{name}！"; public Person GetPerson(int id) => new Person { Id = id, Name = "Ada" }; } 方法参数和返回值被序列化为 JSON。 ## 原始消息对于非结构化字符串通信，请使用原始消息而不是类型化互操作。 **C# → JS:** myHybridWebView.SendRawMessage(“有效负载字符串”); **JS→C#：** window.HybridWebView.SendRawMessage('有效负载字符串'); **用C#接收：** void OnRawMessageReceived（对象发送者，HybridWebViewRawMessageReceivedEventArgs e） { var message = e.Message; } **在JS中接收：** window.addEventListener('HybridWebViewMessageReceived', e => { const 消息 = e.detail.message; }); ## JSON 序列化设置使用**源生成的** JSON 序列化。定义一个部分上下文，涵盖 JS 和 C# 之间交换的每种类型： [JsonSourceGenerationOptions( 写缩进= false， PropertyNamingPolicy = JsonKnownNamingPolicy.CamelCase)] [JsonSerialized(typeof(int))] [JsonSerialized(typeof(字符串))] [JsonSerialized(typeof(Person))] 内部部分类 MyJsonContext : JsonSerializerContext { } 公开课人物 { 公共 int Id { 得到;放; } 公共字符串名称{获取;放; } = 字符串.Empty; } > **规则**：如果向互操作表面添加新类型，则**必须**向上下文添加“[JsonSerialized(typeof(T))]”属性。 ## JS 异常转发（.NET 9+）在“InvokeJavaScriptAsync”期间引发的 JavaScript 异常会作为托管异常自动转发到 .NET。将调用包装在 try/catch 中：尝试 { var 结果 = 等待 myHybridWebView.InvokeJavaScriptAsync( “riskyFunction”，MyJsonContext.Default.String）； } catch（异常前） { Debug.WriteLine($"JS 错误: {ex.Message}"); } ## 修剪和 NativeAOT 在 MAUI 项目中，修剪和 NativeAOT **默认禁用**。如果启用它们，请确保使用 JSON 源生成器： <属性组> true 假无论修剪设置如何，都建议使用如上所示的“JsonSerializerContext”（源生成）模式。 ## 快速清单 1. 网页内容位于 `Resources/Raw/wwwroot` 下。 2. `index.html` 包含 ``。 3. 设置“DefaultFile”（或默认为“index.html”）。 4. 每个互操作类型在“JsonSerializerContext”中都有一个“[JsonSerialized]”条目。 5. `SetInvokeJavaScriptTarget` 在 JS 调用 C# 方法之前调用。 6. 在 try/catch 中包裹 `InvokeJavaScriptAsync` 来处理 JS 异常（.NET 9+）。

毛伊岛混合网络视图

包含技能