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,并且打开调试控制台,可以看到运行结果。

相关推荐
Whoisshutiao7 分钟前
Python网安-zip文件暴力破解(仅供学习)
开发语言·python·网络安全
寻月隐君17 分钟前
告别竞态条件:基于 Axum 和 Serde 的 Rust 并发状态管理最佳实践
后端·rust·github
ComputerInBook40 分钟前
C++ 标准模板库算法之 transform 用法
开发语言·c++·算法·transform算法
杰哥技术分享1 小时前
PHP Yii2 安装SQL Server扩展-MAC M4 Pro芯片
开发语言·php
快下雨了L1 小时前
Lua现学现卖
开发语言·lua
香饽饽~、2 小时前
【第十一篇】SpringBoot缓存技术
java·开发语言·spring boot·后端·缓存·intellij-idea
Devil枫3 小时前
Kotlin扩展函数与属性
开发语言·python·kotlin
菠萝加点糖3 小时前
Kotlin Data包含ByteArray类型
android·开发语言·kotlin
2301_803554524 小时前
c++中类的前置声明
java·开发语言·c++
不想写bug呀7 小时前
多线程案例——单例模式
java·开发语言·单例模式