从零开始：构建你的第一个 Blazor WebAssembly 应用

Blazor WebAssembly 基础入门

1. Blazor WebAssembly 简介

什么是 Blazor 和 WebAssembly

📚 Blazor是一个由微软推出的开源 Web 框架，其核心优势在于允许开发者使用 C# 和 .NET 技术栈来构建丰富的交互式 Web 用户界面（UI），而无需过多依赖 JavaScript。它的名称 “Blazor” 是 Browser（浏览器）和 Razor（.NET 的模板引擎）的组合词，点明了其运行在浏览器中并使用 Razor 语法的特点。

⚡ WebAssembly（缩写为 WASM）是一种为 Web 设计的高性能、低级的二进制指令格式。它作为一种通用的编译目标，允许使用 C++、Rust、C# 等多种高级语言编写的代码在现代 Web 浏览器中以接近原生的速度运行。

Blazor WebAssembly 学习大纲

Blazor WebAssembly 的工作原理：

• 🛠️ 你的 C# 代码被编译成 .NET 程序集
• 📥 这些程序集与 .NET 运行时一起下载到浏览器
• 🚀 WebAssembly 在浏览器中执行 .NET 代码
• 🔄 通过 JavaScript 互操作与 DOM 交互

Blazor Server vs Blazor WebAssembly

架构对比示意图：

架构对比示意图

优势和应用场景

✅ Blazor WebAssembly 的优势：

• 全栈 .NET 开发：前后端都使用 C#
• 丰富的生态系统：利用现有的 .NET 库和工具
• 性能优秀：接近原生应用的性能
• 安全可靠：代码在浏览器沙箱中运行
• 可离线运行：支持渐进式 Web 应用

🎯 适用场景：

• 🏢 企业内部应用
• 📊 数据密集型仪表板
• ⚙️ 需要复杂业务逻辑的应用
• 🔄 希望重用 .NET 技能的项目

2. 开发环境搭建

安装 .NET SDK

步骤 1：下载 .NET SDK 访问 https://dotnet.microsoft.com/download.NET官方网站下载最新版本的.NET SDK。

下载页面

根据你的操作系统选择合适版本：

• Windows: x64 安装程序
• macOS: x64 或 ARM64 安装程序
• Linux: 选择对应的发行版

步骤 2：验证安装 💻 点击安装程序直接安装。

配置 Visual Studio

Visual Studio 2022 配置：

1. 🛠️ 安装时选择"ASP.NET 和 Web 开发"工作负载
2. ✅ 确保包含 Blazor WebAssembly 工具

安装步骤：运行 Visual Studio Installer，点击"修改"现有安装或安装新版本 在工作负载标签页中勾选ASP.NET 和Web开发。

勾选截图

勾选截图

浏览器要求和调试工具

🌐 支持的浏览器：

• Chrome/Edge 90+
• Firefox 90+
• Safari 14+

🔧 启用调试：在 Chrome/Edge 中：

1. 按 F12 打开开发者工具
2. 转到"源代码"标签
3. 启用".NET 调试"

详细调试设置：

1. 确保安装了浏览器调试扩展
2. 在 launchSettings.json 中配置 inspectUri
3. 运行应用时，浏览器地址栏会显示"已连接调试器"

3. 创建第一个 Blazor WebAssembly 应用

项目模板介绍

📋 Blazor WebAssembly 提供多种项目模板：

# 查看可用模板
dotnet new --list

#主要模板：
dotnet new blazorwasm          # 独立 Blazor WebAssembly
dotnet new blazorwasm --hosted # 带 ASP.NET Core 主机
dotnet new blazorwasm --pwa    # 渐进式 Web 应用

模板选择指南：

• 🏢 企业应用：选择 --hosted（有后端 API）
• 📱 单页应用：选择独立版本
• 🔄 离线应用：选择 --pwa 版本

项目结构解析

🛠️ 让我们创建一个新项目并分析其结构：

# 创建Blazor WebAssembly 独立应用
dotnet new blazorwasm -n MyFirstBlazorApp
#进入项目文件夹
cd MyFirstBlazorApp

使用Visual Studio 2022打开项目

项目解决方案

🔍 关键文件详细解析：

📄 wwwroot/index.html - 应用入口：

应用入口部分代码

应用入口部分代码

📄 Program.cs - 应用配置入口：

Program配置文件

Program配置文件

运行和调试应用

▶️ 运行应用：

# 在项目目录中运行
dotnet run

#使用热重载（推荐用于开发）
dotnet watch run

运行效果图

运行效果图

🐛 调试配置：

在 Properties/launchSettings.json 中配置启动设置：

{
  "$schema": "https://json.schemastore.org/launchsettings.json",
"profiles": {
    "http": {
      "commandName": "Project",
      "dotnetRunMessages": true,
      "launchBrowser": true,
      "inspectUri": "{wsProtocol}://{url.hostname}:{url.port}/_framework/debug/ws-proxy?browser={browserInspectUri}",
      "applicationUrl": "http://localhost:5116",
      "environmentVariables": {
        "ASPNETCORE_ENVIRONMENT": "Development"
      }
    },
    "https": {
      "commandName": "Project",
      "dotnetRunMessages": true,
      "launchBrowser": true,
      "inspectUri": "{wsProtocol}://{url.hostname}:{url.port}/_framework/debug/ws-proxy?browser={browserInspectUri}",
      "applicationUrl": "https://localhost:7228;http://localhost:5116",
      "environmentVariables": {
        "ASPNETCORE_ENVIRONMENT": "Development"
      }
    }
  }
}

🔧 调试步骤：

1. 在 Visual Studio 中按 F5 开始调试
2. 或在 VS Code 中按 F5 选择".NET Core Launch"
3. 🎯 在代码中设置断点
4. 🔄 刷新浏览器触发断点

🔄 修改 Counter 组件体验实时更新：

打开 Pages/Counter.razor，修改代码：

@page "/counter"
<PageTitle>Counter</PageTitle>
<h1>记数器</h1>
<p role="status">当前计数: @currentCount 🎰</p>
<button class="btn btn-primary" @onclick="IncrementCount">🚀 点击我！(现在有表情！ 👍)</button>
@code {
    private int currentCount = 0;

    private void IncrementCount()
    {
        currentCount+=2;
    }
}

计数器页面运行效果图

计数器页面运行效果图

💾 保存文件后，浏览器将自动刷新显示更改！

🎉 下一步行动

✅ 恭喜！ 你已经成功搭建了开发环境并创建了第一个 Blazor WebAssembly 应用。

📚 在下一部分中，我们将深入探讨：

• Razor 组件的基础知识
• 数据绑定和事件处理
• 组件生命周期

💪 练习建议：

1. 🎨 尝试修改 Counter 组件的样式
2. ➕ 添加一个新的页面组件
3. ⚡ 实验不同的按钮点击效果
4. 🔧 探索项目中的其他组件

示例源码地址：https://pan.quark.cn/s/28c51d3480e2?pwd=rC8C