You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

能否在Web.Sdk风格项目中托管Uno应用作为嵌入式UI?

能否将Uno应用托管在ASP.NET Core(Web.Sdk风格)项目中作为嵌入式UI?

完全可以。Uno Platform支持将WASM目标的Uno应用嵌入到常规ASP.NET Core项目里,而非必须使用独立的WASM模板项目。下面是实现的关键步骤:

  • 搭建项目结构

    1. 创建一个ASP.NET Core项目(可以是空项目、MVC或Razor Pages项目,均基于Web.Sdk)。
    2. 添加或引入一个Uno Platform的WASM类库项目(如果已有现成Uno应用,只需提取其WASM目标部分即可)。
  • 配置ASP.NET Core托管Uno资源
    在ASP.NET Core项目的Program.cs中配置静态文件中间件,确保能访问Uno WASM的编译产物:

    var builder = WebApplication.CreateBuilder(args);
    var app = builder.Build();
    
    // 托管ASP.NET Core自身的静态资源
    app.UseStaticFiles();
    
    // 托管Uno WASM的编译输出资源
    app.UseStaticFiles(new StaticFileOptions
    {
        FileProvider = new PhysicalFileProvider(
            Path.Combine(builder.Environment.ContentRootPath, "../YourUnoWasmProject/bin/Debug/net8.0/dist")),
        RequestPath = "/uno-ui"
    });
    
    app.Run();
    
  • 在ASP.NET Core页面中嵌入Uno应用
    可以通过iframe直接嵌入Uno的入口页面,也可以在当前页面中直接加载Uno的脚本和样式:

    <!-- 方式1:iframe嵌入 -->
    <iframe src="/uno-ui/index.html" width="100%" height="800px" frameborder="0"></iframe>
    
    <!-- 方式2:直接在页面中初始化Uno应用 -->
    <link href="/uno-ui/css/app.css" rel="stylesheet" />
    <script src="/uno-ui/bootstrapper.js"></script>
    <div id="uno-host"></div>
    <script>
        Uno.UI.WebAssemblyRuntime.main("uno-host");
    </script>
    
  • 优化Uno项目的输出配置
    在Uno WASM项目的.csproj中,设置输出目录到ASP.NET Core项目的wwwroot下,方便发布和调试:

    <PropertyGroup>
        <!-- 将Uno编译产物直接输出到ASP.NET Core项目的wwwroot/uno-ui目录 -->
        <WasmOutputPath>../AspNetCoreProject/wwwroot/uno-ui</WasmOutputPath>
    </PropertyGroup>
    

这种集成方式允许你将Uno UI作为嵌入式组件融入现有ASP.NET Core应用,共享后端服务、身份验证等逻辑,无需单独部署独立的WASM应用。

内容的提问来源于stack exchange,提问作者Alexander.Furer

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.06.16 02:47:38