rust wasm 斐波那契数列示例（rust ferris）

myzbx 2025-07-10 19:24 4 浏览

完整项目结构

一个完整的 Rust Wasm 斐波那契项目应该包含以下文件：

plaintext

fibonacci/
├── Cargo.toml               # Rust 项目配置文件
├── src/
│   └── lib.rs               # Rust 源代码，实现斐波那契函数
└── www/
    ├── index.html           # 网页界面
    └── script.js            # JavaScript 调用代码

1, 初始化项目

cargo new --lib fibonacci
cd fibonacci

2，编辑 Cargo.toml

[package]
name = "fibonacci"
version = "0.1.0"
edition = "2024"

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

[dependencies]
wasm-bindgen = "0.2"

3,创建 www/index.html：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Rust Wasm Fibonacci</title>
</head>
<body>
    <h1>Fibonacci Calculator</h1>
    <input type="number" id="n" value="10">
    <button id="calculateBtn">Calculate</button>
    <p id="result">Result will appear here</p>

    <!-- 将 script.js 作为模块加载 -->
    <script type="module" src="script.js"></script>
</body>
</html>

4, 创建www/script.js

document.addEventListener('DOMContentLoaded', async () => {
    try {
        // 初始化 Wasm 模块
        await init('./pkg/fibonacci_bg.wasm');

        const calculateBtn = document.getElementById('calculateBtn');
        const nInput = document.getElementById('n');
        const resultElement = document.getElementById('result');

        calculateBtn.addEventListener('click', () => {
            const n = parseInt(nInput.value);
            if (isNaN(n) || n < 0) {
                resultElement.textContent = '请输入有效的非负整数';
                return;
            }

            // 直接调用导入的 fibonacci 函数
            const result = fibonacci(n);
            resultElement.textContent = `Fib(${n}) = ${result}`;
        });
    } catch (error) {
        console.error('Wasm 初始化失败:', error);
        document.getElementById('result').textContent = '加载计算模块失败';
    }
});

5, 编译

wasm-pack build --target web

6， cp -r pkg ./www/pkg

7, http-server ./www

http://localhost:8080/

8, nginx 配置与访问

server {
    listen 8081;
    server_name localhost;  # 替换为你的域名或 IP
    
    # 网站根目录，指向你的 WebAssembly 应用目录
    root /work/rust/test/fibonacci/www;
    
    # 默认索引文件
    index index.html;
    
    # 处理所有请求
    location / {
        try_files $uri $uri/ /index.html;
    }
    
    # 配置 MIME 类型
    types {
        application/javascript        js mjs;
        application/wasm              wasm;
        text/html                     html;
        text/css                      css;
        image/svg+xml                 svg;
        font/woff2                    woff2;
        # 添加其他需要的 MIME 类型
    }
    
    # 缓存策略 - 对于静态文件设置较长的缓存时间
    location ~* \.(js|css|wasm|svg|png|jpg|woff2)$ {
        expires 30d;
        add_header Cache-Control "public";
    }
    
    # 确保 Wasm 文件正确设置 Content-Type
    location ~ \.wasm$ {
        default_type application/wasm;
        # 如果需要支持旧浏览器，可以添加以下头
        # add_header application/wasm;
    }
}

http://localhost:80801

注意：编译时，wasm-pack build --target web, 如果没有 --target web, 报错 pkg/fibonacci_bg.wasm”的模块，它使用了不允许的 MIME 类型（“application/wasm”）

JS 类型转换

上一篇：双管、狙击手、还有泥头车!1.29版本新增坦克全解密
下一篇：只需三步，让二维码数据秒变ERP对象

rust wasm 斐波那契数列示例（rust ferris）

完整项目结构

1, 初始化项目

2，编辑 Cargo.toml

3,创建 www/index.html：

4, 创建www/script.js

5, 编译

6， cp -r pkg ./www/pkg

7, http-server ./www

8, nginx 配置与访问

相关推荐

使用VSCode模板提高Vue开发效率（vscode开发vue3）

吃透 Vue 项目开发实践|16个方面深入前端工程化开发技巧【下】

移动前端重构实战系列:5-7章（前端移动端主要技术有哪些）

说下你的vue项目的目录结构，该怎么划分?

这么牛逼的cursor功能，赶紧用起来

用上Vue3，你真的变了吗?（vue3 key）

8.7k star，一款超炫酷的动态可视化大屏项目

20个免费音乐音效下载网站，无版权素材商业影片也可用

什么是“恒定光圈”，什么是“浮动光圈”?-摄影早自习第331

谷歌SEO:外贸电商网站On-page SEO优化实战「附案例」