如何使用单纯的`WebAssembly`

简介: 如何使用单纯的`WebAssembly`

一般来说在.net core使用WebAssembly都是Blazor,但是Blazor渲染界面,.net core也提供单纯的WebAssembly这篇博客我将讲解如何使用单纯的WebAssembly

安装WebAssembly模板

dotnet new install Microsoft.NET.Runtime.WebAssembly.Templates

安装完成以后在vs的新建项目的时候会出现如图的模板

然后我们下一步创建一个WebAssembly的项目,WebAssembly的项目很单纯,项目结构如下图:

我们可以看到项目及其简单,分别查看文件代码

Program.cs

using System;
using System.Runtime.InteropServices.JavaScript;

Console.WriteLine("Hello, Browser!");

public partial class MyClass
{
   
   
    [JSExport]
    internal static string Greeting()
    {
   
   
        var text = $"Hello, World! Greetings from {GetHRef()}";
        Console.WriteLine(text);
        return text;
    }

    [JSImport("window.location.href", "main.js")]
    internal static partial string GetHRef();
}

main.js

// Licensed to the .NET Foundation under one or more agreements.
// The .NET Foundation licenses this file to you under the MIT license.

import {
   
    dotnet } from './dotnet.js'

const {
   
    setModuleImports, getAssemblyExports, getConfig } = await dotnet
    .withDiagnosticTracing(false)
    .withApplicationArgumentsFromQuery()
    .create();

setModuleImports('main.js', {
   
   
    window: {
   
   
        location: {
   
   
            href: () => globalThis.window.location.href
        }
    }
});

const config = getConfig();
const exports = await getAssemblyExports(config.mainAssemblyName);
const text = exports.MyClass.Greeting();
console.log(text);

document.getElementById('out').innerHTML = text;
await dotnet.run();

index.html

<!DOCTYPE html>
<!--  Licensed to the .NET Foundation under one or more agreements. -->
<!-- The .NET Foundation licenses this file to you under the MIT license. -->
<html>

<head>
  <title>WebAssemblyDemo</title>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="modulepreload" href="./main.js" />
  <link rel="modulepreload" href="./dotnet.js" />
</head>

<body>
  <span id="out"></span>
  <script type='module' src="./main.js"></script>
</body>

</html>

这些代码及其简单,如果在遇到js性能瓶颈的时候就可以使用当前这种模式,使用单纯的WebAssembly去提高我们的产品性能

试试看执行一下程序,效果如下图:

目录
相关文章
|
网络协议 Linux
CentOS如何查看端口是被哪个应用/进程占用
CentOS如何查看端口是被哪个应用/进程占用
2239 0
|
开发框架 前端开发 JavaScript
C# 6.0+JavaScript云LIS系统源码  云LIS实验室信息管理新型解决方案
云LIS是为区域医疗提供临床实验室信息服务的计算机应用程序,可协助区域内所有临床实验室相互协调并完成日常检验工作,对区域内的检验数据进行集中管理和共享,通过对质量控制的管理,最终实现区域内检验结果互认。其目标是以医疗服务机构为主体,以医疗资源和检验信息共享为目标,集成共性技术及医疗服务关键技术,建立区域协同检验,最大化利用有限的医疗卫生资源。
393 1
|
9天前
|
人工智能 自然语言处理 安全
Claude Code 全攻略:命令大全+三种模式+记忆体系+实战工作流完整手册
Claude Code 是当前最流行的终端级 AI 编程助手,能够直接在命令行中完成代码生成、项目理解、文件修改、命令执行、错误修复等全流程开发工作。它不依赖图形界面、不占用额外资源,却能深度理解项目结构,自动生成规范代码,大幅提升研发效率。
2490 3
|
2月前
|
人工智能 API Docker
claude_code_mineru_skill
为Claude Code等Code Agent新增PDF解析能力!一行命令安装MinerU Skill,无需Docker、API Key或服务器,自动智能解析PDF/截图,支持复杂表格、公式与双栏论文,转为高质量Markdown供AI理解,大幅提升文档驱动开发效率。
1008 10
|
2月前
|
人工智能 JSON 文字识别
一行命令,让你的 Code Agent 会读PDF
一行命令 `npx skills add tanis90/pdf-converter-mineru`,即可为Claude Code、Cursor等主流Code Agent注入PDF阅读能力。基于上海AI Lab开源的MinerU引擎,支持扫描件OCR、表格/公式识别、中英混排,自动选择快读或高精模式,开箱即用,无需部署MCP服务。(239字)
2310 16
|
3月前
|
人工智能 架构师 API
生产级AI架构实战:Claude架构师五维能力+OpenClaw多Agent部署配置攻略教程
2026年,AI架构已经从简单对话走向规模化、工程化、可落地的生产级系统。Claude架构师认证所定义的五大核心能力领域,不仅是考试要点,更是构建企业级AI应用、多智能体协同、自动化工作流、高可靠服务的真实标准。与此同时,OpenClaw(Clawdbot)作为轻量化、可扩展、本地优先的AI执行框架,完美承接这些架构理念,让个人与团队快速搭建稳定、高效、可维护的智能体系统。
1302 1
|
人工智能 自然语言处理
Claude
Claude 3是由人工智能初创公司Anthropic推出的一款大型语言模型,旨在更好地执行复杂的指令。Cla
1096 1
|
存储 监控 安全
深度剖析Linux进程的内部机制:一探/proc/pid的奥秘
深度剖析Linux进程的内部机制:一探/proc/pid的奥秘
3789 0
|
Rust 安全 C#
c#如何使用WASM跨语言调用?
c#如何使用WASM跨语言调用?
452 0
c#如何使用WASM跨语言调用?
|
8天前
|
缓存 测试技术 API
Qwen 3.7 Plus 与 Max 实测:性价比与多模态能力差异解析(2026)
2026 年 6 月 1 日,阿里悄无声息地发布了 Qwen 3.7 Plus,距 Qwen 3.7 Max 上线刚好 11 天。同样的 1M 上下文,同样的 35 小时自治上限。但价格才是头条:Plus 是 0.40/M输入,Max是 2.50/M——便宜约 6 倍——并且还能看图、看视频。Vision Arena 上 Plus 已经排到 #16。所以这周真正值得讨论的问题不是”要不要为视觉能力买单”,而是”Max 凭什么用 6 倍价格换来 2 个百分点的 benchmark 领先”。

热门文章

最新文章