在MAUI跨平台应用开发中，WebView组件常用于展示网页内容，当网页需要调用原生C#实现的功能时，就需要建立JavaScript和C#的通信通道。这种通信方式可以让前端页面复用已有的Web逻辑，同时调用MAUI原生的系统能力，提升应用的整体功能丰富度。
核心实现原理
MAUI的WebView组件提供了AddJavascriptInterface方法，可以将C#对象暴露给WebView中的JavaScript环境，JavaScript可以直接调用该对象上暴露的方法，实现从前端到原生的通信。整个过程不需要复杂的桥接逻辑，MAUI已经封装了底层的通信机制。
准备工作
首先需要在MAUI页面的XAML文件中添加WebView组件，设置好基础的布局属性，确保WebView可以正常加载网页内容。示例XAML代码如下：
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="MauiJsCallCSharpDemo.MainPage">
<VerticalStackLayout>
<WebView x:Name="MyWebView"
HeightRequest="500"
WidthRequest="400"/>
</VerticalStackLayout>
</ContentPage>
暴露C#方法给JavaScript
首先需要创建一个用于通信的C#类，这个类中的方法需要标记特定的特性，才能被JavaScript正确识别和调用。示例通信类代码如下：
using System;
using System.Threading.Tasks;
namespace MauiJsCallCSharpDemo
{
// 标记JS可导出的特性
[System.Runtime.InteropServices.JavaScriptExport]
public class JsBridge
{
// 供JavaScript调用的无参方法
public string GetDeviceInfo()
{
return "当前设备运行MAUI应用，系统版本为.NET 8";
}
// 供JavaScript调用的带参方法
public int CalculateSum(int a, int b)
{
return a + b;
}
// 异步方法示例
public async Task<string> GetDataAsync()
{
await Task.Delay(1000);
return "异步获取的数据内容";
}
}
}
然后在页面的后台代码中，将创建的通信类实例注册到WebView的JavaScript环境中，同时加载测试用的网页内容：
using Microsoft.Maui.Controls;
namespace MauiJsCallCSharpDemo
{
public partial class MainPage : ContentPage
{
public MainPage()
{
InitializeComponent();
InitWebView();
}
private void InitWebView()
{
// 创建通信桥实例
var jsBridge = new JsBridge();
// 将C#对象暴露给JavaScript，名称设置为jsBridge
MyWebView.AddJavascriptInterface(jsBridge, "jsBridge");
// 加载本地HTML测试页面
MyWebView.Source = "test.html";
}
}
}
JavaScript调用C#方法
接下来需要准备测试用的HTML页面，页面中的JavaScript代码可以直接通过之前注册的jsBridge对象调用C#方法。示例HTML代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>JS调用C#测试</title>
</head>
<body>
<h3>MAUI与JS通信测试</h3>
<button onclick="callCSharpMethod()">调用C#无参方法</button>
<button onclick="callCSharpWithParam()">调用C#带参方法</button>
<button onclick="callCSharpAsync()">调用C#异步方法</button>
<div id="result"></div>
<script>
// 调用无参C#方法
function callCSharpMethod() {
// 直接调用jsBridge上的GetDeviceInfo方法
var result = jsBridge.getDeviceInfo();
document.getElementById("result").innerText = "调用结果：" + result;
}
// 调用带参C#方法
function callCSharpWithParam() {
// 传递两个参数给C#方法
var sum = jsBridge.calculateSum(10, 20);
document.getElementById("result").innerText = "10+20的结果：" + sum;
}
// 调用异步C#方法
async function callCSharpAsync() {
// 异步方法调用需要处理Promise
// MAUI会自动将C#的Task转换为JS的Promise
var data = await jsBridge.getDataAsync();
document.getElementById("result").innerText = "异步数据：" + data;
}
</script>
</body>
</html>
注意事项
- C#中暴露给JavaScript的方法名在JS调用时会自动转为驼峰命名，比如C#的
GetDeviceInfo在JS中调用为getDeviceInfo - 复杂参数传递时，建议将对象序列化为JSON字符串，C#端再反序列化处理，避免类型转换错误
- 如果需要C#调用JavaScript方法，可以使用WebView的
EvaluateJavaScriptAsync方法执行JS代码 - 不同平台的WebView实现可能有细微差异，测试时需要覆盖Android、iOS、Windows等目标平台
常见问题排查
如果JavaScript调用C#方法没有反应，可以先检查以下几点：
确认AddJavascriptInterface方法是否在WebView加载页面之前调用，否则注册可能不生效。确认C#类和方法是否标记了正确的导出特性，确认JavaScript中调用的对象名和方法名是否和注册时一致。通过以上步骤，就可以完整实现MAUI中从JavaScript调用C#代码的需求，满足WebView和原生逻辑的交互场景。
MAUIWebViewJavaScript调用C#_代码跨平台通信修改时间：2026-07-16 16:18:33