大家好，在这篇文章中我将向您展示如何使用 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中文网其他相关文章！
