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

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

目录
相关文章
|
Web App开发 存储 JavaScript
使用AssemblyScript 构建 WebAssembly 应用
WebAssembly,也称为 Wasm,是为 Web 创建的二进制格式。它允许通过从常规 JavaScript 访问的相同 Web API 访问浏览器功能。
749 0
使用AssemblyScript 构建 WebAssembly 应用
|
9天前
|
前端开发 JavaScript 安全
C#一分钟浅谈:Blazor WebAssembly 开发
Blazor WebAssembly 是一个客户端框架,允许开发者使用C#和Razor语法构建Web应用。本文介绍了Blazor WebAssembly的基本概念、常见问题及解决方案,包括路由配置、数据绑定、异步操作、状态管理和性能优化等方面的内容,并分享了一些易错点及如何避免的方法。希望这些内容能帮助你在Blazor WebAssembly开发中少走弯路,提高开发效率。
82 51
|
5月前
|
Rust 前端开发 JavaScript
Tauri框架:使用Rust构建轻量级桌面应用
Tauri是一个用Rust构建的开源框架,用于创建轻量、安全且高效的跨平台桌面应用,结合Rust与Web技术(HTML/CSS/JS)。它遵循最小权限原则,仅在必要时调用OS API。Tauri架构包括Rust后端、Web前端、Tauri API和包装器。通过`cargo tauri init`可创建新项目,Rust后端处理系统交互,前端负责UI,两者通过Tauri API通信。Tauri支持自定义API、集成前端框架、资源管理、自动更新、系统集成和安全配置。此外,Tauri拥有插件系统和丰富的扩展能力,提供调试和测试工具,并有性能优化建议。
323 4
|
6月前
|
Rust JavaScript 前端开发
【一起学Rust | 框架篇 | Frui框架】rust一个对开发者友好的GUI框架——Frui
【一起学Rust | 框架篇 | Frui框架】rust一个对开发者友好的GUI框架——Frui
2398 0
|
6月前
|
JavaScript 前端开发 API
如何利用JavaScript和Electron构建具有丰富功能的桌面应用
【4月更文挑战第30天】如何利用JavaScript和Electron构建具有丰富功能的桌面应用
32 0
|
6月前
|
Rust JavaScript 前端开发
深入探讨WebAssembly在现代Web开发中的应用
随着互联网技术的不断进步,传统的Web开发方法已经无法满足现代应用程序对性能和功能的高要求。WebAssembly(简称Wasm)作为一种新兴的技术,为解决这一问题提供了独特的视角和方法。本文将从WebAssembly的基本概念出发,详细探讨其在前端开发中的应用,包括与JavaScript的互操作性、在性能优化方面的优势,以及如何通过实例来实现复杂应用的性能提升。此外,文章还将探讨WebAssembly在未来Web开发中的潜在发展方向,旨在为开发者提供一种全新的视角,以更高效、更强大的方式构建Web应用。
|
6月前
|
Web App开发 Rust JavaScript
Rust 笔记:WebAssembly 的 JavaScript API
Rust 笔记:WebAssembly 的 JavaScript API
169 0
|
6月前
|
Rust JavaScript 前端开发
【一起学Rust | 框架篇 | iced框架】rust原生跨平台GUI框架——iced
【一起学Rust | 框架篇 | iced框架】rust原生跨平台GUI框架——iced
750 0
|
开发框架 Rust JavaScript
WebAssembly
关于使用和推荐方面,由于缺乏关于 Grain 语言的详细信息,我无法为您提供确切的建议。如果您需要关于 JavaScript 和 WebAssembly 的建议,我可以为您提供一些建议:
140 3