Rust WebAssembly 中的货币转换器
大家好，在这篇文章中我将向您展示如何使用 WebAssembly 创建一个用 Rust 编写的简单货币转换器，首先您需要使用下面的 Rust 官方网站安装 Rust（适用于 Windows） :
(https://www.rust-lang.org/tools/install)
成功安装 Rust 后，我们需要确保使用下面的命令安装 WASM 或 WebAssembly，打开 Windows Powershell 并以管理员身份运行它：
货物安装 wasm-pack
Cargo 是 Rust 的构建系统和包管理器。
我们安装 Wasm pack 或 WebAssembly 以在 Web 视图上运行 Rust 并运行 HTML 代码，因此在 Windows Powershell 中成功安装 WebAssembly 后，选择要为 Rust 创建文件的路径，然后键入以下命令来创建所需的文件夹和文件：
cargo new **您在此处选择的文件夹名称** --lib
这将创建 Rust 与 WebAssembly 一起运行所需的文件夹名称和文件。
然后我们需要修改位于您使用上述命令创建的文件夹中的 Cargo.toml 文件，右键单击并编辑我使用记事本（要下载记事本，请使用此链接 (https://notepad-plus-plus.org /) 这样你就可以选择直接编辑文件。
在 Cargo.toml 文件中写入以下内容：
[dependencies]
reqwest = { version = "=0.11.7", features = ["json"] }
serde = { version = "1.0", features = ["derive"] }
serde_json = "1.0"
wasm-bindgen = "0.2"
wasm-bindgen-futures = "0.4"
[dev-dependencies]
wasm-bindgen-test = "0.3"
[lib]
crate-type = ["cdylib"]
然后在最初使用 Cargo 命令创建的主文件夹内的 src 文件夹中，您会发现另一个我们需要编辑的文件，名为 lib.rs，在该文件中我们将编写 Rust 代码：
use wasm_bindgen::prelude::*;
use wasm_bindgen_futures::JsFuture;
use reqwest::Error;
use serde::Deserialize;
use std::collections::HashMap;
#[derive(Deserialize)]
struct ExchangeRates {
rates: HashMap<String, f64>,
}
#[wasm_bindgen]
pub async fn convert_currency(base: String, target: String, amount: f64) -> Result<JsValue, JsValue> {
let url = format!("https://api.exchangerate-api.com/v4/latest/{}", base);
let response = reqwest::get(&url)
.await
.map_err(|err| JsValue::from_str(&format!("Failed to fetch rates: {}", err)))?;
let rates: ExchangeRates = response.json()
.await
.map_err(|err| JsValue::from_str(&format!("Invalid response format: {}", err)))?;
if let Some(&rate) = rates.rates.get(&target) {
let converted = amount * rate;
Ok(JsValue::from_f64(converted)) // Return the converted amount
} else {
Err(JsValue::from_str(&format!("Currency {} not found", target)))
}
}
然后我们将进入需要创建网页视图所需的文件夹和文件的部分。
打开 Powershell，然后导航到您的文件夹路径，确保您位于使用 Cargo new 命令创建的主文件夹内，然后运行此命令：
wasm-pack build --target web
这将创建名为 pkg 和 target 的文件夹以及其他文件。
然后在您使用 Cargo 新文件夹名称 --lib 创建的主文件夹中创建名为 index.html 的 HTML 文件，并在其中写入以下代码：
<html lang="zh-cn">
<头>
<title>货币转换器</title>
身体 {
字体系列：Arial、无衬线字体；
背景颜色：#f0f8ff；
保证金：0；
填充：0；
显示：柔性；
调整内容：居中；
对齐项目：居中；
高度：100vh；
}
。容器 {
背景：#ffffff；
盒子阴影：0 4px 6px rgba(0, 0, 0, 0.1);
边框半径：10px；
内边距：20px 30px；
宽度：350px；
文本对齐：居中；
}
h1 {
颜色：#333；
下边距：20px；
}
标签 {
显示：块；
边距：10px 0 5px；
字体粗细：粗体；
颜色：#555；
}
输入 {
宽度：100%；
内边距：10px；
下边距：15px；
边框：1px实心#ccc；
边框半径：5px；
字体大小：16px；
}
按钮 {
宽度：100%；
内边距：10px；
背景颜色：#007bff；
边框：无；
边框半径：5px；
颜色: 白色;
字体大小：16px；
光标：指针；
过渡：背景色0.3s；
}
按钮：悬停{
背景颜色：#0056b3；
}
。结果 {
顶部边距：20px；
字体大小：18px；
颜色：绿色；
字体粗细：粗体；
}
。错误 {
顶部边距：20px；
字体大小：16px；
颜色: 红色;
}
</风格>
</头>
<div>
<p>确保此行 import init, { Convert_currency } from "../pkg/**name of yourfolder.js**";在 pkg 文件夹中找到的 javascript 文件，确保它指向正确的 .js 文件，通常它是根据您的主文件夹名称以 pkg 文件夹中的 .js 结尾命名的。</p>
<p>要在本地计算机上运行服务器，请导航到我们使用 Cargo new **文件夹名称** --lib 创建的主文件夹，并运行此命令以在您的计算机上启动服务器：<br>
python -m http.server<br><br>
安装python请参考<br>
(https://www.python.org/downloads/windows/)</p>
<p>运行命令后，打开您选择的 Web 浏览器并输入 localhost:8000 或 127.0.0.1:8000，然后回车。</p>
<p>您需要输入货币代码才能检查此网站：<br>
https://taxsummaries.pwc.com/glossary/currency-codes</p>
<p>希望您喜欢它，并对这么长的帖子表示歉意。</p>
</div>
以上是Rust WebAssembly 中的货币转换器的详细内容。更多信息请关注PHP中文网其他相关文章！
热AI工具
Undresser.AI Undress
人工智能驱动的应用程序，用于创建逼真的裸体照片
AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。
Undress AI Tool
免费脱衣服图片
Clothoff.io
AI脱衣机
Video Face Swap
使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸！
热门文章
热工具
记事本++7.3.1
好用且免费的代码编辑器
SublimeText3汉化版
中文版，非常好用
禅工作室 13.0.1
功能强大的PHP集成开发环境
Dreamweaver CS6
视觉化网页开发工具
SublimeText3 Mac版
神级代码编辑软件(SublimeText3)
Python vs. JavaScript：学习曲线和易用性
Apr 16, 2025 am 12:12 AM
Python更适合初学者，学习曲线平缓，语法简洁；JavaScript适合前端开发，学习曲线较陡，语法灵活。1.Python语法直观，适用于数据科学和后端开发。2.JavaScript灵活，广泛用于前端和服务器端编程。
JavaScript和Web：核心功能和用例
Apr 18, 2025 am 12:19 AM
JavaScript在Web开发中的主要用途包括客户端交互、表单验证和异步通信。1)通过DOM操作实现动态内容更新和用户交互；2)在用户提交数据前进行客户端验证，提高用户体验；3)通过AJAX技术实现与服务器的无刷新通信。
JavaScript在行动中：现实世界中的示例和项目
Apr 19, 2025 am 12:13 AM
JavaScript在现实世界中的应用包括前端和后端开发。1)通过构建TODO列表应用展示前端应用，涉及DOM操作和事件处理。2)通过Node.js和Express构建RESTfulAPI展示后端应用。
了解JavaScript引擎：实施详细信息
Apr 17, 2025 am 12:05 AM
理解JavaScript引擎内部工作原理对开发者重要，因为它能帮助编写更高效的代码并理解性能瓶颈和优化策略。1)引擎的工作流程包括解析、编译和执行三个阶段；2)执行过程中，引擎会进行动态优化，如内联缓存和隐藏类；3)最佳实践包括避免全局变量、优化循环、使用const和let，以及避免过度使用闭包。
Python vs. JavaScript：社区，图书馆和资源
Apr 15, 2025 am 12:16 AM
Python和JavaScript在社区、库和资源方面的对比各有优劣。1)Python社区友好，适合初学者，但前端开发资源不如JavaScript丰富。2)Python在数据科学和机器学习库方面强大，JavaScript则在前端开发库和框架上更胜一筹。3)两者的学习资源都丰富，但Python适合从官方文档开始，JavaScript则以MDNWebDocs为佳。选择应基于项目需求和个人兴趣。
Python vs. JavaScript：开发环境和工具
Apr 26, 2025 am 12:09 AM
Python和JavaScript在开发环境上的选择都很重要。1)Python的开发环境包括PyCharm、JupyterNotebook和Anaconda，适合数据科学和快速原型开发。2)JavaScript的开发环境包括Node.js、VSCode和Webpack，适用于前端和后端开发。根据项目需求选择合适的工具可以提高开发效率和项目成功率。
C/C在JavaScript口译员和编译器中的作用
Apr 20, 2025 am 12:01 AM
C和C 在JavaScript引擎中扮演了至关重要的角色，主要用于实现解释器和JIT编译器。 1）C 用于解析JavaScript源码并生成抽象语法树。 2）C 负责生成和执行字节码。 3）C 实现JIT编译器，在运行时优化和编译热点代码，显着提高JavaScript的执行效率。
Python vs. JavaScript：比较用例和应用程序
Apr 21, 2025 am 12:01 AM
Python更适合数据科学和自动化，JavaScript更适合前端和全栈开发。1.Python在数据科学和机器学习中表现出色，使用NumPy、Pandas等库进行数据处理和建模。2.Python在自动化和脚本编写方面简洁高效。3.JavaScript在前端开发中不可或缺，用于构建动态网页和单页面应用。4.JavaScript通过Node.js在后端开发中发挥作用，支持全栈开发。
