如何在Blazor WASM中调用Tauri API？窗口功能调用异常求助

我用Tauri + Blazor WebAssembly开发桌面应用，想添加窗口最大化这类原生窗口功能，但在index.razor里调用JavaScript函数时触发异常，没法定位问题。已经通过yarn add @tauri-apps/api安装了依赖，调用prompt、alert这类普通JS函数没问题，但就是没法正常调用Tauri API。

相关代码 #

js/scripts.js代码 #

import { appWindow } from "@tauri-apps/api/window";

export async function ToggleWindowMax() {
  await appWindow.toggleMaximize();
}

Pages/index.razor代码 #

@page "/"
@inject IJSRuntime JS

<PageTitle>Index</PageTitle>

<MudStack>
    <MudButton Class="pa-3 border-solid" Variant="Variant.Outlined" DisableRipple="true" OnClick="ToggleMax"
        Style="@($"color: {Colors.Purple.Accent3}; border-color:{Colors.Purple.Accent2}; border-width: 2px; border-radius: 9999px;")">
        @result
    </MudButton>

</MudStack>

@code {
    private IJSObjectReference? module;
    private string result = "Toggle Maximize";
    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            module = await JS.InvokeAsync<IJSObjectReference>("import", "./js/scripts.js");
        }
    }

    private async Task ToggleMax()
    {
        await module.InvokeVoidAsync("ToggleWindowMax");
    }
}

问题排查与解决方案 #

1. 配置Tauri窗口权限 #

Tauri的窗口操作需要显式配置权限，否则会触发权限拦截。打开项目根目录的tauri.conf.json，确保tauri > allowlist > window下包含对应权限：

{
  "tauri": {
    "allowlist": {
      "window": {
        "toggleMaximize": true,
        "maximize": true,
        "unmaximize": true
      }
    }
  }
}

2. 添加错误捕获定位问题 #

修改JS模块，添加异常捕获逻辑，方便在控制台查看具体错误信息：

import { appWindow } from "@tauri-apps/api/window";

export async function ToggleWindowMax() {
  try {
    await appWindow.toggleMaximize();
  } catch (error) {
    console.error("窗口最大化操作失败:", error);
    throw error;
  }
}

3. 优化Blazor模块调用逻辑 #

在Blazor的点击方法中，先确认模块已加载完成，避免空引用异常：

private async Task ToggleMax()
{
    if (module == null)
    {
        module = await JS.InvokeAsync<IJSObjectReference>("import", "./js/scripts.js");
    }
    await module.InvokeVoidAsync("ToggleWindowMax");
}

4. 确认运行环境 #

Tauri API仅在Tauri打包的桌面应用内可用，不要直接在浏览器中运行Blazor页面测试该功能，必须启动Tauri桌面应用进行验证。

内容的提问来源于stack exchange，提问作者Sean Wang