下面我用 “从编译 → 运行 → 部署” 的角度,把 Uno Platform 的 WebAssembly(WASM)运行与部署机制一次讲清楚,并顺便和 传统前端 / Blazor / Flutter Web 做个对比,帮助你建立正确心智模型。
✅ 一句话总览
Uno WebAssembly = C# / WinUI → 编译成 .NET WASM → 在浏览器里跑 → 静态站点部署
没有服务器渲染、没有 Node 运行时、也不需要特殊后端。
🧠 核心运行原理(先理解这个)
Uno WASM 的本质是:
你的 C# / XAML
↓
.NET Runtime (WebAssembly)
↓
浏览器 WASM 虚拟机
↓
HTML5 Canvas / DOM
✅ 浏览器中运行的是:
- .wasm 文件
- .dll(.NET 程序集)
- JavaScript 引导代码
- HTML + CSS
✅ UI 渲染方式:
- 主要走 Canvas(Skia)
- 部分平台 API 会桥接到 DOM / JS
🏗️ 构建流程(开发时)
1️⃣ 创建 Uno WASM 项目
dotnet new unoapp
生成结构(简化):
MyApp/
├─ MyApp/
│ ├─ MainPage.xaml
│ ├─ App.xaml
├─ MyApp.Wasm/
│ ├─ index.html
│ ├─ Program.cs
👉 MyApp.Wasm 就是 WebAssembly 入口项目
2️⃣ 本地运行(开发阶段)
dotnet run --project MyApp.Wasm
内部发生了什么:
- C# → IL → WASM
- 启动本地开发服务器
- 浏览器加载:
-
index.html
-
dotnet.wasm
-
MyApp.dll
- Uno UI 初始化 → 渲染到 Canvas
✅ 类似:
- Blazor WASM
- Flutter Web(CanvasKit 模式)
📦 发布构建(关键)
3️⃣ 发布 WebAssembly
dotnet publish MyApp.Wasm -c Release
输出目录(非常重要):
bin/Release/netX.Y/browser-wasm/publish/wwwroot/
├─ index.html
├─ dotnet.wasm
├─ *.dll
├─ *.js
├─ *.json
👉 整个 wwwroot 是一个“纯静态网站”
🚀 部署方式(非常简单)
✅ Uno WASM = 静态站点
你可以部署到:
| 平台 | 可行 |
|---|
| GitHub Pages | ✅ |
| Azure Static Web Apps | ✅ |
| Azure Blob Static Website | ✅ |
| Netlify | ✅ |
| Vercel | ✅ |
| Nginx / Apache | ✅ |
| CDN | ✅ |
不需要:
- ASP.NET Server
- Node.js
- Docker(除非你想)
示例:Nginx
server {
location / {
root /var/www/uno;
index index.html;
}
}
把 wwwroot 内容复制进去即可 ✅
🌐 访问流程(用户视角)
浏览器访问 URL
↓
下载 index.html
↓
加载 dotnet.wasm + dll
↓
Uno App 启动
↓
UI 显示
⚠️ 首次加载比传统 Web 大(WASM 特性)
🧩 与 Blazor / Flutter Web 对比
| 特性 | Uno WASM | Blazor WASM | Flutter Web |
|---|
| UI 技术 | WinUI / XAML | Razor | Widget |
| 运行时 | .NET WASM | .NET WASM | Dart WASM |
| 渲染 | Canvas / Skia | DOM | CanvasKit |
| 代码复用 | 100%(和桌面/移动) | Web 优先 | Flutter 体系 |
| 部署 | 静态 | 静态 | 静态 |
✅ Uno 最大优势:
同一套 WinUI UI + C# 业务逻辑,直接跑在浏览器
⚠️ 实际项目中要注意的点
1️⃣ 首屏体积
- WASM + .NET Runtime 较大
- 需开启:
- AOT(可选)
- IL trimming
- gzip / brotli
2️⃣ 浏览器限制
- 无多线程(部分浏览器)
- 文件系统、设备 API 受限
- 必须 async 思维
3️⃣ JS 互操作
- 可用
IJSRuntime - Uno 提供 JS interop 封装
✅ 适合用 Uno WASM 的场景
✅ 企业后台
✅ 内部系统
✅ 工具型应用
✅ 跨平台统一 UI(桌面 + Web)
✅ 从 WPF / UWP / WinUI 迁移到 Web
❌ 不适合:
- SEO 重度页面
- 超轻量首屏页面
- 高交互动画 Web 游戏(除非你接受体积)
✅ 总结一句话
Uno WebAssembly 是“把完整的 .NET + WinUI 应用,原样搬进浏览器”,部署就是一个静态站点。