Rust开发WASM,浏览器运行WASM

首先需要安装wasm-pack

复制代码
cargo install wasm-pack

使用cargo创建工程

复制代码
cargo new --lib mywasm

编辑Cargo.toml文件,修改lib的类型为cdylib,并且添加依赖wasm-bindgen

复制代码
[package]
name = "mywasm"
version = "0.1.0"
edition = "2021"

# See more keys and their definitions at https://doc.rust-lang.org/cargo/reference/manifest.html

[lib]
crate-type = ["cdylib"]

[dependencies]
wasm-bindgen = "0.2"

修改代码lib.rs

复制代码
use wasm_bindgen::prelude::*;

#[wasm_bindgen]
pub fn add(n1: usize, n2: usize) -> usize {
    n1 + n2
}

编译lib.rs生成wasm

复制代码
wasm-pack build --target web

下载wasm-bindgen的过程大概需要10分钟,请耐心等待。

接下来创建文件index.html,使用wasm

复制代码
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>wasm web demo</title>
  </head>
  <body>
    <script type="module">
      import init, {add} from "./pkg/mywasm.js";
      init().then(() => {
          console.log("add(1,2) = " + add(1, 2))
        });
      </script>
  </body>
</html>

启动测试用web server

复制代码
python3 -m http.server 8000

打开chrome访问http://localhost:8000,并且打开调试控制台,可以看到运行结果。

相关推荐
charlie11451419114 分钟前
HTML 理论笔记
开发语言·前端·笔记·学习·html·1024程序员节
郝学胜-神的一滴19 分钟前
Linux中的`fork`函数详解:深入解析
linux·服务器·开发语言·c++·算法
曾凡宇先生35 分钟前
无法远程连接 MySQL
android·开发语言·数据库·sql·tcp/ip·mysql·adb
Q一件事2 小时前
R语言随机森林分析显示R方和P值
开发语言·随机森林·r语言
Mr.Jessy2 小时前
JavaScript学习第六天:函数
开发语言·前端·javascript·学习·html·1024程序员节
九皇叔叔3 小时前
Java循环结构全解析:从基础用法到性能优化
java·开发语言·性能优化
sulikey3 小时前
Qt 入门简洁笔记:从框架概念到开发环境搭建
开发语言·前端·c++·qt·前端框架·visual studio·qt框架
zzzsde3 小时前
【C++】stack和queue:优先级队列的使用及底层原理
开发语言·c++
是苏浙3 小时前
零基础入门C语言之操作符详解2
c语言·开发语言
总有刁民想爱朕ha4 小时前
银河麒麟v10批量部署Python Flask项目小白教程
开发语言·python·flask·银河麒麟v10