以下是关于cargo-run-wasm工具的完整使用示例和说明：

安装

在项目目录中运行以下Cargo命令：

cargo add cargo-run-wasm

或在Cargo.toml中添加：

cargo-run-wasm = "0.4.0"

完整示例

首先创建一个新的Rust项目：

cargo new wasm-example
cd wasm-example

添加必要的依赖到Cargo.toml：

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

[dependencies]
wasm-bindgen = "0.2"
cargo-run-wasm = "0.4.0"

创建src/lib.rs文件：

use wasm_bindgen::prelude::*;

// 导出一个简单的加法函数到WebAssembly
#[wasm_bindgen]
pub fn add(a: i32, b: i32) -> i32 {
    a + b
}

// 导出一个greet函数
#[wasm_bindgen]
pub fn greet(name: &str) -> String {
    format!("Hello, {}!", name)
}

创建index.html文件（在项目根目录）：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>WASM Example</title>
</head>
<body>
    <script type="module">
        import init from './pkg/wasm_example.js';
        
        async function run() {
            await init();
            console.log(window.add(2, 3)); // 应该输出5
            console.log(window.greet("World")); // 应该输出"Hello, World!"
        }
        
        run();
    </script>
</body>
</html>

运行项目：

cargo run-wasm --bin wasm-example

主要功能

自动编译Rust代码为WebAssembly
启动本地开发服务器
自动重新加载浏览器
支持热模块替换(HMR)

注意事项

确保已安装wasm-bindgen-cli：cargo install wasm-bindgen-cli
项目必须配置为cdylib库类型
默认会在http://localhost:8080启动开发服务器

这个工具简化了Rust WebAssembly项目的开发和测试流程，特别适合需要快速迭代的项目。

完整示例demo

以下是一个更完整的Wasm示例，展示如何使用cargo-run-wasm构建一个简单的计数器应用：

项目结构：

wasm-counter/
├── Cargo.toml
├── index.html
└── src/
    └── lib.rs

Cargo.toml内容：

[package]
name = "wasm-counter"
version = "0.1.0"
edition = "2021"

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

[dependencies]
wasm-bindgen = "0.2"
web-sys = { version = "0.3", features = ["console"] }

src/lib.rs内容：

use wasm_bindgen::prelude::*;
use web_sys::console;

// 导出Counter结构体到JS
#[wasm_bindgen]
pub struct Counter {
    count: i32,
}

#[wasm_bindgen]
impl Counter {
    // 构造函数
    pub fn new() -> Counter {
        Counter { count: 0 }
    }

    // 获取当前计数
    pub fn get_count(&self) -> i32 {
        self.count
    }

    // 增加计数
    pub fn increment(&mut self) {
        self.count += 1;
        console::log_1(&format!("Count: {}", self.count).into());
    }

    // 减少计数
    pub fn decrement(&mut self) {
        self.count -= 1;
        console::log_1(&format!("Count: {}", self.count).into());
    }
}

index.html内容：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>WASM Counter</title>
    <style>
        body { font-family: sans-serif; text-align: center; margin-top: 50px; }
        button { padding: 10px 20px; font-size: 16px; margin: 0 10px; }
    </style>
</head>
<body>
    <h1>WASM Counter Example</h1>
    <div>
        <button id="decrement">-</button>
        <span id="count">0</span>
        <button id="increment">+</button>
    </div>

    <script type="module">
        import init, { Counter } from './pkg/wasm_counter.js';
        
        async function run() {
            await init();
            
            const counter = Counter.new();
            
            document.getElementById('increment').addEventListener('click', () => {
                counter.increment();
                document.getElementById('count').textContent = counter.get_count();
            });
            
            document.getElementById('decrement').addEventListener('click', () => {
                counter.decrement();
                document.getElementById('count').textContent = counter.get_count();
            });
        }
        
        run();
    </script>
</body>
</html>

运行项目：

cargo run-wasm --bin wasm-counter

这个示例展示了：

如何导出Rust结构体和方法到JavaScript
如何在Wasm中使用浏览器API（如console）
如何构建交互式Web应用
使用cargo-run-wasm的完整开发流程

phonegap100 1楼

Rust WebAssembly编译与运行工具cargo-run-wasm的使用

介绍

cargo-run-wasm 是一个用于简化 Rust WebAssembly (Wasm) 应用开发和测试的Cargo工具。它提供了一个简单的方式来编译、运行和测试Wasm项目，特别适合前端Web开发场景。

主要特性：

自动配置wasm-bindgen
内置开发服务器
支持热重载
自动打开浏览器
简化wasm项目的构建流程

安装

首先确保你已经安装了Rust和wasm-pack：

# 安装wasm-pack
curl https://rustwasm.github.io/wasm-pack/installer/init.sh -sSf | sh

# 安装cargo-run-wasm
cargo install cargo-run-wasm

基本使用

1. 创建新项目

cargo new --lib my-wasm-app
cd my-wasm-app

2. 修改Cargo.toml

确保你的Cargo.toml包含wasm相关依赖：

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

[dependencies]
wasm-bindgen = "0.2"

3. 编写示例代码

在src/lib.rs中添加：

use wasm_bindgen::prelude::*;

#[wasm_bindgen]
pub fn greet(name: &str) -> String {
    format!("Hello, {}!", name)
}

#[wasm_bindgen(start)]
pub fn run() {
    console_log::init_with_level(log::Level::Debug).unwrap();
    log::info!("WASM initialized!");
}

4. 运行项目

cargo run-wasm

这会自动：

编译项目为Wasm
启动开发服务器
打开浏览器窗口
监听文件变化并热重载

高级用法

自定义HTML模板

创建index.html文件：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>My Wasm App</title>
</head>
<body>
    <script type="module">
        import init from './pkg/my_wasm_app.js';
        init().then(() => {
            console.log(greet("World"));
        });
    </script>
</body>
</html>

指定不同的浏览器

cargo run-wasm --browser firefox

自定义端口

cargo run-wasm --port 8080

发布构建

cargo run-wasm --release

配置选项

可以通过在项目根目录创建RunWasm.toml文件来配置：

[run-wasm]
# 默认浏览器
default_browser = "chrome"
# 默认端口
default_port = 3000
# 自定义HTML文件路径
html_file = "custom.html"
# 额外的wasm-pack参数
wasm_pack_args = ["--target", "web"]

示例项目结构

my-wasm-app/
├── Cargo.toml
├── RunWasm.toml
├── index.html
├── src/
│   └── lib.rs
└── pkg/ (自动生成)

cargo-run-wasm极大地简化了Rust WebAssembly项目的开发流程，特别适合快速原型开发和测试。

完整示例demo

下面是一个完整的Rust WebAssembly项目示例：

创建项目并修改Cargo.toml：

cargo new --lib wasm-demo
cd wasm-demo

Cargo.toml内容：

[package]
name = "wasm-demo"
version = "0.1.0"
edition = "2021"

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

[dependencies]
wasm-bindgen = "0.2"
console_log = "1.0"
web-sys = { version = "0.3", features = ["console"] }

编写src/lib.rs：

use wasm_bindgen::prelude::*;
use web_sys::console;

// 导出一个简单的加法函数
#[wasm_bindgen]
pub fn add(a: i32, b: i32) -> i32 {
    a + b
}

// 导出一个打招呼函数
#[wasm_bindgen]
pub fn greet(name: &str) -> String {
    format!("Hello, {}!", name)
}

// 初始化函数，WASM加载时自动执行
#[wasm_bindgen(start)]
pub fn init() {
    // 初始化日志系统
    console_log::init_with_level(log::Level::Debug).unwrap();
    
    // 在浏览器控制台输出日志
    log::info!("WASM module initialized!");
    console::log_1(&"Console log from WASM".into());
    
    // 调用greet函数并输出结果
    let greeting = greet("WASM Developer");
    console::log_1(&greeting.into());
}

创建index.html：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>WASM Demo</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
        }
        button {
            padding: 10px 15px;
            background: #4CAF50;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
        }
        #result {
            margin-top: 20px;
            padding: 10px;
            border: 1px solid #ddd;
            border-radius: 4px;
        }
    </style>
</head>
<body>
    <h1>Rust WASM Demo</h1>
    
    <div>
        <button id="greetBtn">Greet</button>
        <button id="addBtn">Calculate 5 + 7</button>
    </div>
    
    <div id="result"></div>
    
    <script type="module">
        import init, { greet, add } from './pkg/wasm_demo.js';
        
        async function run() {
            await init();
            
            document.getElementById('greetBtn').addEventListener('click', () => {
                const result = greet("Web Developer");
                document.getElementById('result').textContent = result;
                console.log(result);
            });
            
            document.getElementById('addBtn').addEventListener('click', () => {
                const sum = add(5, 7);
                document.getElementById('result').textContent = `5 + 7 = ${sum}`;
                console.log(`Addition result: ${sum}`);
            });
        }
        
        run();
    </script>
</body>
</html>

运行项目：

cargo run-wasm

这个完整示例展示了：

基本的WASM函数导出
Rust与JavaScript的交互
控制台日志输出
简单的UI交互
WASM模块的初始化和使用

项目启动后会自动打开浏览器，你可以点击按钮查看WASM函数的执行结果。

Rust WebAssembly编译与运行工具cargo-run-wasm的使用，快速构建和测试Wasm应用

安装

完整示例

主要功能

注意事项

完整示例demo

Rust WebAssembly编译与运行工具cargo-run-wasm的使用

介绍

安装

基本使用

1. 创建新项目

2. 修改Cargo.toml

3. 编写示例代码

4. 运行项目

高级用法

自定义HTML模板

指定不同的浏览器

自定义端口

发布构建

配置选项

示例项目结构

完整示例demo