在Avalonia.Browser的C# WASM应用中访问Telegram Mini Apps的window.Telegram.WebApp对象报错的解决方案

我之前也遇到过类似的问题，核心原因是Telegram的WebApp脚本需要挂载到浏览器的全局window对象上，而Avalonia WASM的JSHost.ImportAsync是在WASM隔离的JS上下文中加载脚本，没法直接把对象注入到浏览器的window里。下面是一步步的解决思路：

1. 先把Telegram脚本正确加载到浏览器环境 #

不要用JSHost.ImportAsync加载Telegram的远程脚本，按照Telegram官方要求，直接修改Avalonia生成的index.html，在<head>标签里添加脚本引用，确保它在其他脚本之前加载：

<head>
    <!-- 其他meta标签、样式等 -->
    <script src="https://telegram.org/js/telegram-web-app.js?59"></script>
    <!-- Avalonia的脚本放在后面 -->
    <script type="module" src="/main.js"></script>
</head>

2. 调整JSImport的写法 #

既然脚本已经在浏览器的window上了，我们不需要指定模块名（JSImport的第二个参数），直接引用全局对象即可。修改你的TelegramMiniAppInterop.cs：

public partial class TelegramMiniAppInterop
{
    // 直接引用window上的属性，不需要模块名参数
    [JSImport("window.Telegram.WebApp.version")]
    public static partial string GetVersion();
}

3. 确保调用时机正确 #

不要在Main方法里直接调用interop方法——此时浏览器的window对象可能还没完全初始化，或者Telegram的WebApp对象还没准备好。建议在Avalonia UI加载完成后再调用，比如在主窗口的OnInitializedAsync方法里：

public partial class MainWindow : Window
{
    protected override async Task OnInitializedAsync()
    {
        await base.OnInitializedAsync();
        
        // 更可靠的方式是等待Telegram WebApp的ready事件，这里先做简单延时演示
        await Task.Delay(100);
        
        try
        {
            var version = TelegramMiniAppInterop.GetVersion();
            Console.WriteLine($"Telegram WebApp版本：{version}");
        }
        catch (Exception ex)
        {
            Console.WriteLine($"访问Telegram WebApp出错：{ex.Message}");
        }
    }
}

4. 用Telegram的ready事件确保初始化完成（推荐） #

Telegram WebApp提供了ready事件，能精准判断对象是否初始化完成。我们可以注册一个C#回调来监听这个事件：

第一步：更新Interop类 #

public partial class TelegramMiniAppInterop
{
    [JSImport("window.Telegram.WebApp.version")]
    public static partial string GetVersion();

    // 导出一个C#方法给JS调用
    [JSExport]
    public static void OnTelegramWebAppReady()
    {
        var version = GetVersion();
        Console.WriteLine($"Telegram WebApp已就绪，版本：{version}");
        // 这里可以执行所有需要访问Telegram WebApp的逻辑
    }
}

第二步：在index.html里添加监听脚本 #

<script>
    // 监听Telegram WebApp的ready事件
    window.Telegram.WebApp.onEvent('ready', () => {
        // 调用C#导出的方法
        DotNet.invokeMethodAsync('你的程序集名称', 'OnTelegramWebAppReady');
    });
    // 触发ready事件（Telegram要求必须调用）
    window.Telegram.WebApp.ready();
</script>

常见坑点排查 #

• 确保你的程序集名称正确：DotNet.invokeMethodAsync的第一个参数是你的C#项目的程序集名称（一般就是项目名）。
• 检查网络是否能正常加载Telegram的脚本：本地开发时如果有代理或者防火墙，可能会导致脚本加载失败。
• 不要尝试用globalThis.window这类写法：浏览器环境下window就是全局对象，直接引用即可。

内容来源于stack exchange