如何使用单纯的`WebAssembly`

手机

iphone11大小尺寸是多少？苹果iPhone11和iPhone13的区别是什么？

警方通报辅警执法直播中被撞飞：犯罪嫌疑人已投案

家电

如何使用单纯的`WebAssembly`

2023-02-01 22:03:00 来源：博客园

(资料图片)

一般来说在.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

  WebAssemblyDemo            <script type="module" src="./main.js"></script>

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

试试看执行一下程序，效果如下图：

关键词：一般来说新建项目性能瓶颈

如何使用单纯的`WebAssembly`

安装WebAssembly模板

安装`WebAssembly`模板