首页 > 其他分享 >如何使用单纯的`WebAssembly`

如何使用单纯的`WebAssembly`

时间:2023-02-01 22:14:17浏览次数:32  
标签:WebAssembly const text js 如何 单纯 dotnet

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

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

标签:WebAssembly,const,text,js,如何,单纯,dotnet
From: https://www.cnblogs.com/hejiale010426/p/17084259.html

相关文章

  • 浅析Git Subtree的原理与实际应用:git subtree是什么、子仓库与仓库共用、共用代码需求
    一、为什么需要使用GitSubtree关于子仓库或者说是仓库共用,git官方推荐的工具是gitsubtree。在实际的项目开发过程中,公共的代码或者模块是必定会出现的,为了不重......
  • 【测试如何学代码?】学习代码的最佳实践经验分享
    为什么要写这篇?经常在群里看到大家问:该选择哪门语言?哪门语言有钱途?其实,不管哪门语言,只要深入学好了都不会差,当然,我们选择语言最好还是要和自己的技术方向及职业发展相匹......
  • WGCLOUD 挖掘与利用 如何关闭web ssh
    WGCLOUD运维平台,自带webssh,可以在浏览器使用ssh连接Linux服务器,执行各种指令那么如何关闭webssh呢?很简单的,配置文件server/config/application.yml,修改如下配置项,把yes改......
  • 超大文件上传-如何上传文件-大文件上传
    ​ 文件上传是最古老的互联网操作之一,20多年来几乎没有怎么变化,还是操作麻烦、缺乏交互、用户体验差。一、前端代码英国程序员RemySharp总结了这些新的接口 ,本文在他......
  • AIRIOT答疑第7期|如何快速提升物联网项目交付速度?
    平台+模板,套上就能用!贼拉快!AIRIOT提供物联网低代码平台+多套行业案例模板,针对于有明确项目的服务商,用平台已经配置好的节点数、功能模块、流程,直接上手干项目!AIRIOT......
  • 【解决方案】多线程如何避免重复插入
    【先记录,日后完善验证】1、设置唯一键,如果是插入或更新操作可以增加trycatch,把更新的sql写在catch里面;2、synchornized关键字和lock接口,但是只能用于单机;4、多服务可......
  • 目前我国外贸企业生存现状如何?
    今天,最新的进出口贸易数据发布。海关总署9日公布的数据显示,今年前4个月,我国进出口总值12.58万亿元,同比增长7.9%。虽然整体增速有所回落,但完全在可控范围内。但是增速下的外......
  • 如何生成设备ID?(node-machine-id)
    业务场景:前端需要在请求登录接口的时候传一个设备ID,用于后台记录同一台设备异常登录的次数,然后返回一个字段让前端判断是否展示异常信息的弹框。分析:首先说下,为什么这里是......
  • WIN10 自带输入法如何开启软键盘
    在任务栏上鼠标右键,在弹出的菜单栏上选择“显示触摸键盘按钮(Y)” 点击后托盘区语言栏左边会多出一个软键盘小图标 点击该图标即可调出软键盘:......
  • 记录--原生 canvas 如何实现大屏?
    这里给大家分享我在网上总结出来的一些知识,希望对大家有所帮助前言可视化大屏该如何做?有可能一天完成吗?废话不多说,直接看效果,线上Demo地址lxfu1.github.io/large-sc......