当前位置： 首页 > news >正文

WASM 使用说明23事(RUST实现)

news 2026/5/13 9:08:47

文章目录

    • 1. wasm是什么
      • 1.1 chatgpt定义如下:
      • 1.2 wasm关键特性：
    • 2. wasm demo
      • 2.1 cargo 创建项目
      • 2.2 编写code
      • 2.3 安装wasm-pack
      • 2.4 编译
    • 3.1 html页面引用wasm代码（js引用）
    • 3.2 访问页面
    • 4 导入js function
      • 4.1 编写lib.rs文件，内容如下：
      • 4.2 编译
      • 4.3 html
      • 4.4 访问页面， 结果如下:

1. wasm是什么

1.1 chatgpt定义如下:

WebAssembly（WASM）是一种新兴的、低级的二进制格式，旨在为 web 提供一种高性能的执行环境。它可以与 JavaScript 互操作，使开发者能够在浏览器中运行复杂的应用程序，比如游戏、图形处理、科学计算等。

1.2 wasm关键特性：

  • 高性能：WASM 被设计为快速加载和执行，接近原生代码的性能。
  • 安全性：WASM 在一个安全的沙箱环境中运行，可以防止未授权的内存访问。
  • 跨平台：可以在任何支持的环境中运行，包括浏览器、服务器和嵌入式设备。
  • 语言支持：除了 JavaScript，许多编程语言（如
    Rust、C、C++、Go）可以编译为 WASM。

2. wasm demo

2.1 cargo 创建项目

cargo new --lib wasm-hello

2.2 编写code

2.2.1 修改Cargo.toml文件， 内容如下：

[package]
name = "wasm-hello"
version = "0.1.0"
edition = "2021"[lib]
crate-type = ["cdylib"][dependencies]
wasm-bindgen = "0.2"

2.2.2 修改src/lib.rs文件， 内容如下：

use wasm_bindgen::prelude::*;#[wasm_bindgen]
pub fn add(a: i32, b: i32) -> i32 {return a + b;
}

2.3 安装wasm-pack

cargo install wasm-pack

2.4 编译

进入项目根目录， 然后编译

wasm-pack build --target web

命令执行成功后， 截图如下：
说明： 1. wasm_hello_bg.wasm就是输出的二进制文件
在这里插入图片描述

3.1 html页面引用wasm代码（js引用）

wasm-hello根目录下创建index.html页面， 内容如下：

<!DOCTYPE html>
<html>
<head><meta charset="UTF-8" /><title>Hello World - Rust</title><script type="module">import init from "./pkg/wasm_hello.js";const runWasm = async () => {// Instantiate our wasm moduleconst helloWorld = await init("./pkg/wasm_hello_bg.wasm");// Call the Add function export from wasm, save the resultconst addResult = helloWorld.add(24, 24);// Set the result onto the bodydocument.body.textContent = `Hello World! addResult: ${addResult}`;};runWasm();</script>
</head>
<body></body>
</html>

3.2 访问页面

截图如下：
在这里插入图片描述

4 导入js function

4.1 编写lib.rs文件，内容如下：

use wasm_bindgen::prelude::*;#[wasm_bindgen]
pub fn add(a: i32, b: i32) -> i32 {return a + b;
}// Here, we will define our external `console.log`
#[wasm_bindgen]
extern "C" {// Use `js_namespace` here to bind `console.log(..)` instead of just#[wasm_bindgen(js_namespace = console)]fn log(s: &str);
}// Export a function that will be called in JavaScript
// but call the "imported" console.log.
#[wasm_bindgen]
pub fn console_log_from_wasm() {log("This console.log is from wasm!");
}

4.2 编译

进入项目根目录， 然后编译

wasm-pack build --target web

4.3 html

<!DOCTYPE html>
<html>
<head><meta charset="UTF-8" /><title>Hello World - Rust</title><script type="module">import init from "./pkg/wasm_hello.js";const runWasm = async () => {// Instantiate our wasm moduleconst helloWorld = await init("./pkg/wasm_hello_bg.wasm");// Call the Add function export from wasm, save the resultconst addResult = helloWorld.add(24, 24);// Set the result onto the bodydocument.body.textContent = `Hello World! addResult: ${addResult} `;helloWorld.console_log_from_wasm();};runWasm();</script>
</head>
<body></body>
</html>

4.4 访问页面， 结果如下:

页面有console输出“This console.log is from wasm!”
在这里插入图片描述

相关文章：

WASM 使用说明23事(RUST实现)

文章目录 1. wasm是什么1.1 chatgpt定义如下:1.2 wasm关键特性&#xff1a; 2. wasm demo2.1 cargo 创建项目2.2 编写code2.3 安装wasm-pack2.4 编译 3.1 html页面引用wasm代码&#xff08;js引用&#xff09;3.2 访问页面4 导入js function4.1 编写lib.rs文件&#xff0c;内容…...

编程日记 2024/10/26 18:15:47

Visual studio 下载安装

1&#xff0c;Visual stutdio 网址 下载 Visual Studio Tools - 免费安装 Windows、Mac、Linux 2&#xff0c;下划页面&#xff0c;点击 较早的下载 3&#xff0c;选择对应的版本进行下载...

编程日记 2024/10/26 18:10:43

jEasyUI 创建自定义视图

jEasyUI 创建自定义视图 jEasyUI&#xff08;jQuery EasyUI&#xff09;是一个基于jQuery的用户界面插件集合&#xff0c;它为用户提供了一系列的UI组件&#xff0c;如菜单、窗口、表格等&#xff0c;使得Web界面的开发变得更加简单快捷。在本文中&#xff0c;我们将探讨如何使…...

编程日记 2024/10/26 18:09:41

SpringMVC6-SpringMVC的视图

目录 ThymeleafView 转发视图 重定向视图 视图控制器view-controller SpringMVC中的视图是View接口&#xff0c;视图的作用&#xff1a;渲染数据&#xff0c;将模型Model中的数据展示给用户 SpringMVC视图的种类很多&#xff0c;默认有转发视图InternalResourceView 和重定…...

编程日记 2024/10/26 18:07:40

echarts给Y轴的不同轴线设置不同的颜色的样式

官方文档 option {xAxis: {type: category,data: [Mon, Tue, Wed, Thu, Fri, Sat, Sun]},yAxis: {type: value},series: [{data: [150, 230, 224, 218, 135, 147, 260],type: line,}] }; 效果&#xff1a; 需要添加参数markLine option {xAxis: {type: category,data: [M…...

编程日记 2024/10/26 18:06:39

从0到1构建 UniApp + Vue3 + TypeScript 移动端跨平台开源脚手架

&#x1f680; 作者主页&#xff1a; 有来技术 &#x1f525; 开源项目&#xff1a; youlai-mall &#x1f343; vue3-element-admin &#x1f343; youlai-boot &#x1f343; vue-uniapp-template &#x1f33a; 仓库主页&#xff1a; GitCode&#x1f4ab; Gitee &#x1f…...

编程日记 2024/10/26 18:05:37

论文笔记：LaDe: The First Comprehensive Last-mile Delivery Dataset from Industry

2023 KDD 1 intro 1.1 背景 随着城市化进程的加快和电子商务的发展&#xff0c;最后一公里配送已成为一个关键的研究领域 最后一公里配送&#xff0c;如图1所示&#xff0c;是指连接配送中心和客户的包裹运输过程&#xff0c;包括包裹的取件和配送除了对客户满意度至关重要外…...

编程日记 2024/10/26 18:04:36

无用的知识又增加了-静态二值贝叶斯滤波

静态二值贝叶斯滤波 静态二值贝叶斯滤波&#xff08;Static Binary Bayes Filter&#xff09;是一种用于处理二值状态&#xff08;例如&#xff0c;目标存在或不存在&#xff09;的简单贝叶斯滤波器。这种滤波器通常应用于目标检测、传感器融合等场景&#xff0c;其中状态空间…...

编程日记 2024/10/26 18:03:35

cesium相机（camera）控制

camera基础属性&#xff1a; Cesium 中的相机通过 viewer.camera 来获取和操作。 position:相机的位置,用 Cartesian3 坐标表示&#xff0c;表示的是相机在世界坐标系中的绝对位置。 viewer.camera.position Cesium.Cartesian3.fromDegrees(longitude, latitude, height);dir…...

编程日记 2024/10/26 18:01:32

Java 反射

一、基本概念 Java反射机制是Java语言的一种动态特性&#xff0c;允许程序在运行时检查和操作类、接口、字段和方法。反射机制使得Java程序可以在运行时获取关于类的详细信息&#xff0c;并且可以动态地调用类的方法、访问类的字段等。反射机制主要涉及以下几个核心类和接口&a…...

编程日记 2024/10/26 18:00:31

【目标检测01】真实框、预测框、锚框和交并比IoU

文章目录 1. 任务定义2. 基本概念2.1 边界框&#xff08;bounding box&#xff09;2.2 真实框、预测框和锚框2.3 交并比 (IoU)2.4 代码实现 1. 任务定义 目标检测的主要目的是让计算机可以自动识别图片或者视频帧中所有目标的类别&#xff0c;并在该目标周围绘制边界框&#x…...

编程日记 2024/10/26 17:55:21

青少年编程能力等级测评CPA C++五级试卷（2）

青少年编程能力等级测评CPA C++五级试卷（2） 一、单项选择题（共15题，每题3分，共45分） CP5_2_1.下列有关类的重用方法的叙述中，不正确的是（ ）。 A．类的继承可以实现类的重用 B．类的组合可以实现类的重用 C．类的封装可以实现类的重用 D．类的继承和类的组合都可…...

编程日记 2024/10/26 17:51:15

SATA数据线

SATA 数据线&#xff08;Serial ATA 数据线&#xff09;是一种用于连接计算机主板与存储设备&#xff08;如硬盘、固态硬盘和光驱&#xff09;的线缆。它的主要作用是传输数据&#xff0c;允许计算机与这些设备之间进行高效的数据交换。 主要作用 数据传输&#xff1a;SATA 数…...

编程日记 2024/10/26 17:49:13

《云原生安全攻防》-- K8s攻击案例：权限维持的攻击手法

在本节课程中&#xff0c;我们将一起深入了解K8s权限维持的攻击手法&#xff0c;通过研究这些攻击手法的技术细节&#xff0c;来更好地认识K8s权限维持所带来的安全风险。 在这个课程中&#xff0c;我们将学习以下内容&#xff1a; K8s权限维持&#xff1a;简单介绍K8s权限维持…...

编程日记 2024/10/26 17:48:12

回溯算法-Java【力扣】【算法学习day.14】

前言 ###我做这类文档一个重要的目的还是给正在学习的大家提供方向&#xff08;例如想要掌握基础用法&#xff0c;该刷哪些题&#xff1f;&#xff09;我的解析也不会做的非常详细&#xff0c;只会提供思路和一些关键点&#xff0c;力扣上的大佬们的题解质量是非常非常高滴&am…...

编程日记 2024/10/26 17:46:09

从本地到云端：跨用户请求问题的完美解决方案

对于某些单个请求或响应中含有多个用户信息的服务&#xff0c;SDK提供了一套基于统一的UCS拆分和聚合的解决方案供开发者使用。 请求拆分 对于跨用户服务的请求&#xff0c;我们提供了两个处理方案&#xff1a; 【1】根据用户信息拆分请求&#xff1a; 场景&#xff1a;请求内…...

编程日记 2024/10/26 17:45:08

leetcode day4 409+5

409 最长回文串 给定一个包含大写字母和小写字母的字符串 s &#xff0c;返回 通过这些字母构造成的 最长的 回文串 的长度。 在构造过程中&#xff0c;请注意 区分大小写 。比如 "Aa" 不能当做一个回文字符串。 示例 1: 输入:s "abccccdd" 输出:7 解…...

编程日记 2024/10/26 17:43:06

英语语法学习框架（考研）

一、简单句 英语都是由简单句构成&#xff0c;简单句共有五种基本句型&#xff1a;①主谓&#xff1b;②主谓宾&#xff1b;③主谓宾宾补&#xff1b;④主谓宾间宾&#xff08;间接宾语&#xff09;&#xff1b;⑤主系表&#xff1b; 其中谓语是句子最重要的部分&#xff0c;谓…...

编程日记 2024/10/26 17:42:03

基于neo4j的学术论文关系管理系统

正在为毕业设计头疼&#xff1f;又或者在学术研究中总是找不到像样的工具来管理浩瀚的文献资料&#xff1f;今天给大家介绍一款超实用的工具——基于Neo4j的学术论文关系管理系统&#xff0c;让你轻松搞定学术文献的管理与展示&#xff01;&#x1f389; 系统的核心是什么呢&a…...

编程日记 2024/10/26 17:40:00

C#中的委托、匿名方法、Lambda、Action和Func

委托 委托概述 委托是存有对某个方法的引用的一种引用类型变量。定义方法的类型&#xff0c;可以把一个方法当作另一方法的参数。所有的委托&#xff08;Delegate&#xff09;都派生自 System.Delegate 类。委托声明决定了可由该委托引用的方法。 # 声明委托类型 委托类型声…...

编程日记 2024/10/26 17:35:56

WarcraftHelper完整指南：5分钟让魔兽争霸3在现代电脑上完美运行

WarcraftHelper完整指南&#xff1a;5分钟让魔兽争霸3在现代电脑上完美运行 【免费下载链接】WarcraftHelper Warcraft III Helper , support 1.20e, 1.24e, 1.26a, 1.27a, 1.27b 项目地址: https://gitcode.com/gh_mirrors/wa/WarcraftHelper 还在为魔兽争霸3在现代Win…...

编程新知 2026/5/13 8:39:43

Axon：极简AI代理命令行工具，无缝集成自动化工作流

1. 项目概述&#xff1a;一个极简主义的AI代理命令行工具如果你和我一样&#xff0c;对市面上那些动辄需要复杂环境配置、依赖一大堆库、启动缓慢的AI代理工具感到疲惫&#xff0c;那么Axon的出现&#xff0c;绝对会让你眼前一亮。它不是一个运行在后台的守护进程&#xff0c;也…...

编程新知 2026/5/13 8:12:34

感应照明技术：从工业到家用，一场技术降维的工程冒险

1. 项目概述&#xff1a;当感应照明技术走进寻常百姓家最近在整理一些老旧的行业资料时&#xff0c;翻到了2014年的一则新闻&#xff0c;讲的是当时一家初创公司“Finally Light Bulb Company”宣布要推出一款售价低于10美元的感应灯泡&#xff0c;用来替代传统的白炽灯。这让我…...

编程新知 2026/5/13 8:03:22

GPU资源利用率监测与优化实战指南

1. GPU资源利用率监测基础解析在超算中心和AI训练集群中&#xff0c;GPU资源利用率&#xff08;GPU_UTIL&#xff09;是衡量计算效率的核心指标。这个看似简单的百分比背后&#xff0c;实际上反映了GPU内部多个执行单元的综合活跃状态。通过NVIDIA的DCGM&#xff08;Data Cente…...

编程新知 2026/5/13 7:30:29

OnmyojiAutoScript：阴阳师自动化脚本终极指南，20+日常任务一键托管解放双手

OnmyojiAutoScript&#xff1a;阴阳师自动化脚本终极指南&#xff0c;20日常任务一键托管解放双手 【免费下载链接】OnmyojiAutoScript Onmyoji Auto Script | 阴阳师脚本 项目地址: https://gitcode.com/gh_mirrors/on/OnmyojiAutoScript 还在为阴阳师中重复繁琐的日常…...

编程新知 2026/5/13 7:28:13

【PyTorch实战】从零构建CNN模型：MNIST手写数字识别全流程解析

1. 环境准备与数据加载 第一次接触PyTorch时&#xff0c;我对着官方文档折腾了半天环境配置。后来发现用Anaconda管理Python环境真是省心&#xff0c;这里分享我的配置经验。建议先安装Anaconda最新版&#xff0c;然后创建专属环境&#xff1a; conda create -n pytorch_env py…...

编程新知 2026/5/13 6:16:54

基于多智能体协作的AI开发流程：三人团队模式解析与实践

1. 项目概述与核心痛点如果你和我一样&#xff0c;在日常开发中深度依赖像Claude这样的AI编码助手&#xff0c;那你一定也经历过那种“又爱又恨”的时刻。爱的是它强大的代码生成和理解能力&#xff0c;恨的是它时不时会“放飞自我”——比如你只想让它修改一个函数&#xff0c…...

编程新知 2026/5/13 5:57:51

软件开发加速安全审查滞后：“查找 - 修复”与“防御 - 推迟”难敌新风险！

ZDNET的关键要点持续部署让旧安全模型过时&#xff0c;漏洞积压令开发团队不堪重负&#xff0c;应用程序安全需向代码创建阶段转移。锻炼时在跑步机上反复踏步&#xff0c;付出努力却原地不动&#xff0c;毫无成就感&#xff0c;第二天再重复就更觉沮丧。应用程序安全也类似&am…...

编程新知 2026/5/13 5:40:37

SpringBoot快速入门指南

Spring Boot 是一个基于 Spring 框架的“约定优于配置”的快速应用开发框架&#xff0c;旨在简化基于 Spring 的应用初始搭建和开发过程。它通过自动配置、起步依赖和嵌入式容器等特性&#xff0c;使开发者能够快速创建独立的、生产级别的 Spring 应用程序。 一、 核心特性与快…...

编程新知 2026/5/13 5:23:22

Nitric常见问题解答：开发者最关心的25个问题汇总

Nitric常见问题解答&#xff1a;开发者最关心的25个问题汇总 【免费下载链接】nitric Nitric is a multi-language framework for cloud applications with infrastructure from code. 项目地址: https://gitcode.com/gh_mirrors/ni/nitric Nitric是一个多语言框架&…...

编程新知 2026/5/13 4:55:31