微软Wasm学习-创建一个最简单的c#WebAssembly测试工程

要创建一个最简单的微软 WebAssembly（Wasm）测试工程，最直接的方式是使用 Blazor WebAssembly，这是微软官方推荐的 WebAssembly 开发框架。下面是创建和运行最简单 Blazor WebAssembly 项目的步骤：

相关：微软的wasm 和 rust的wasm 方案对比》》

深入：c# WebAssembly，在网页上能运行多线程，异步，锁，原子加，减等代码吗

步骤 1：安装必要工具

确保已安装.NET SDK（5.0 或更高版本），可以从微软官网下载。

步骤 2：创建项目

打开命令行工具，运行以下命令创建一个新的 Blazor WebAssembly 项目：

dotnet new blazorwasm -n WasmTestApp
cd WasmTestApp

步骤 3：项目结构说明

最简单的项目结构包含：

• Program.cs - 应用入口点
• App.razor - 根组件
• Pages 文件夹 - 包含页面组件
• wwwroot - 静态文件

步骤 4：修改为最简单的测试

我们可以修改Pages/Index.razor文件，创建一个简单的测试页面：

最简单的Blazor WebAssembly测试项目,Index.razor：

@page "/"

<h1>微软Wasm测试</h1>

<p>这是一个最简单的Blazor WebAssembly应用</p>

<button @onclick="IncrementCount">点击计数</button>
<p>计数: @currentCount</p>

@code {
    private int currentCount = 0;

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

//Program.cs

using Microsoft.AspNetCore.Components.Web;
using Microsoft.AspNetCore.Components.WebAssembly.Hosting;
using WasmTestApp;

var builder = WebAssemblyHostBuilder.CreateDefault(args);
builder.RootComponents.Add<App>("#app");
builder.RootComponents.Add<HeadOutlet>("head::after");

builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });

await builder.Build().RunAsync();

创建时间：

步骤 5：运行项目

在命令行中执行以下命令运行项目：

dotnet run

然后打开浏览器访问 https://localhost:5001（或命令行显示的端口），你将看到一个简单的页面，包含一个按钮和计数器，点击按钮可以增加计数。

工作原理说明

1. Blazor WebAssembly 将 C# 代码编译为 WebAssembly
2. 应用在浏览器中运行，无需服务器端参与（除非需要 API 调用）
3. 上面的示例展示了基本的组件结构和事件处理

这个最简单的测试项目验证了 WebAssembly 环境的正常工作，包括：

• 页面渲染
• C# 代码执行
• 交互事件处理
• 状态管理

如果需要更深入的测试，可以添加更多组件、调用 JavaScript 或访问 Web API。