.NET MAUI WebView如何通过JS回调获取异步函数返回数据？

完全可行，MAUI WebView可以通过自定义JS桥接对象实现类似WebView2的消息收发能力，替代postMessage完成异步回调结果的传递。以下是具体实现步骤：

1. 修改前端JS代码，在异步回调中调用原生暴露的方法 #

你需要修改原有的getCards函数，让异步回调的结果直接调用MAUI端预先注册的桥接方法，而不是通过return返回：

function getCards(){
   MyLib.getCards(function(resp){
     // 调用MAUI端暴露的桥接方法传递结果，先转成JSON字符串避免类型问题
     if (window.mauiBridge && window.mauiBridge.sendCardsResult) {
       window.mauiBridge.sendCardsResult(JSON.stringify(resp));
     }
   });
} 

2. 在MAUI端注册JS桥接对象并处理回调结果 #

步骤2.1：定义桥接类 #

创建一个供JS调用的类，其中接收结果的方法必须标记[JSInvokable]特性：

// JS桥接类，负责接收前端传递的数据
public class JavascriptBridge
{
    // 定义事件，用于通知原生逻辑处理结果
    public event EventHandler<string> CardsReceived;

    // 供JS调用的方法，必须标记[JSInvokable]
    [JSInvokable]
    public void SendCardsResult(string cardsJson)
    {
        CardsReceived?.Invoke(this, cardsJson);
    }
}

// 示例：对应JS返回结果的实体类
public class Card
{
    public int Id { get; set; }
    public string Name { get; set; }
    // 其他属性根据实际接口定义
}

步骤2.2：在页面中注册桥接并调用JS #

在MAUI页面的后台代码中，将桥接对象绑定到WebView，并订阅结果事件：

public partial class MainPage : ContentPage
{
    private readonly JavascriptBridge _jsBridge;

    public MainPage()
    {
        InitializeComponent();
        _jsBridge = new JavascriptBridge();
        
        // 将桥接对象注册到WebView，前端可通过window.mauiBridge访问
        MyWebView.AddJavascriptBinding(_jsBridge, "mauiBridge");
        
        // 订阅卡片结果接收事件
        _jsBridge.CardsReceived += OnCardsReceived;
    }

    // 触发JS调用的示例按钮点击事件
    private async void GetCardsBtn_Clicked(object sender, EventArgs e)
    {
        await MyWebView.EvaluateJavaScriptAsync("getCards()");
    }

    // 处理从JS传回的卡片数据
    private void OnCardsReceived(object sender, string cardsJson)
    {
        // 解析JSON字符串为实体对象
        var cards = System.Text.Json.JsonSerializer.Deserialize<List<Card>>(cardsJson);
        
        // 后续业务逻辑处理...
    }
}

关键注意事项 #

• 所有供JS调用的原生方法必须添加[JSInvokable]特性，否则无法被前端识别。
• 传递复杂对象时，务必转成JSON字符串传递，避免跨平台的类型兼容性问题。
• 确保WebView加载完成后再注册桥接对象（可在WebView.Navigated事件中执行注册逻辑）。
• 该方案兼容MAUI支持的所有平台（Android、iOS、Windows、MacCatalyst）。

内容的提问来源于stack exchange，提问作者Jeremy Ragsdale