如何使用单纯的`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去提高我们的产品性能

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

目录
相关文章
|
开发框架 前端开发 JavaScript
C# 6.0+JavaScript云LIS系统源码  云LIS实验室信息管理新型解决方案
云LIS是为区域医疗提供临床实验室信息服务的计算机应用程序,可协助区域内所有临床实验室相互协调并完成日常检验工作,对区域内的检验数据进行集中管理和共享,通过对质量控制的管理,最终实现区域内检验结果互认。其目标是以医疗服务机构为主体,以医疗资源和检验信息共享为目标,集成共性技术及医疗服务关键技术,建立区域协同检验,最大化利用有限的医疗卫生资源。
323 1
|
JavaScript Linux
(简单成功详细)CentOS 安装 node.js
(简单成功详细)CentOS 安装 node.js
1944 1
|
网络协议 Linux
CentOS如何查看端口是被哪个应用/进程占用
CentOS如何查看端口是被哪个应用/进程占用
2034 0
|
缓存 小程序 API
微信小程序如何进行页面跳转
微信小程序如何进行页面跳转
754 3
|
人工智能 Cloud Native Java
从云原生视角看 AI 原生应用架构的实践
本文核心观点: • 基于大模型的 AI 原生应用将越来越多,容器和微服务为代表的云原生技术将加速渗透传统业务。 • API 是 AI 原生应用的一等公民,并引入了更多流量,催生企业新的生命力和想象空间。 • AI 原生应用对网关的需求超越了传统的路由和负载均衡功能,承载了更大的 AI 工程化使命。 • AI Infra 的一致性架构至关重要,API 网关、消息队列、可观测是 AI Infra 的重要组成。
53430 111
|
11月前
|
人工智能 NoSQL MongoDB
阿里云与MongoDB庆祝合作五周年,展望AI赋能新未来
阿里云与MongoDB庆祝合作五周年,展望AI赋能新未来
|
Ubuntu Linux
ubuntu22.04禁止自动休眠的几种方式
在Ubuntu 22.04中禁用自动休眠可以通过多种方法实现,用户可以根据自己的技术水平和需求选择合适的方法。无论是通过图形界面还是命令行,都可以有效地防止系统进入自动休眠状态,确保长时间运行的任务不受干扰。通过理解和应用这些设置,可以更好地管理Ubuntu系统的电源行为,提高工作效率和系统稳定性。
4247 4
|
Ubuntu 应用服务中间件 数据库
Nginx配置:阻止非国内IP地址访问的设置方法
此外,出于用户隐私和法律合规性的考虑,应慎重考虑阻止特定国家或地区IP地址的决策。在某些情况下,这可能被视为歧视性或违反当地法律。
873 3
|
存储 缓存 数据库
CodeFuse开源ModelCache大模型语义缓存
CodeFuse 开源火热进行中!本次开源的是 ModelCache 大模型语义缓存,可大幅降低大模型应用的推理成本,提升用户体验。 CodeFuse-ModelCache 项目地址: https://github.com/codefuse-ai/CodeFuse-ModelCache
797 0