如何使用单纯的`WebAssembly`

如何,使用,单纯,webassembly · 浏览次数 : 97

小编点评

**使用单纯的WebAssembly安装WebAssembly模板dotnet new install Microsoft.NET.Runtime.WebAssembly.Templates** 1. 创建一个新项目。 2. 在项目中添加一个新文件 named `main.js`。 3. 将以下代码添加到 `main.js` 中： ```js 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(); ``` 4. 在 `Program.cs` 中添加以下代码： ```csharp using System; using System.Runtime.InteropServices.JavaScript; using Microsoft.NET.Core.Runtime.WebAssembly; [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() { return globalThis.window.location.href; } ``` 5. 在项目中构建项目。 6. 在 HTML 中创建一个 `#out` 元素并设置其 `id` 属性为 `out`： ```html ``` 7. 启动项目。 **效果：** 在运行项目之前，您可以看到一个名为 `Hello, World!` 的消息。 **注意：** * `main.js` 文件的命名必须为 `main.js`。 * `window.location.href` 属性将返回指向窗口的当前 URL。 * 此代码使用 MIT 许可协议。

正文

一般来说在.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去提高我们的产品性能

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