(3) rust和前端交互

在 Tauri + React 项目里，前端调用 Rust 的 #[tauri::command] 方法是通过 Tauri 提供的 invoke API 完成的。

---

1️⃣ Rust 端命令

#[tauri::command]
fn greet(name: &str) -> String {format!("Hello, {}! You've been greeted from Rust!", name)
}

在 lib.rs 注册：

tauri::Builder::default().invoke_handler(tauri::generate_handler![greet]).run(tauri::generate_context!()).expect("error while running tauri application");

---

2️⃣ React 前端调用

import React, { useState } from "react";
import { invoke } from "@tauri-apps/api/tauri";export default function GreetComponent() {const [name, setName] = useState("");const [message, setMessage] = useState("");async function handleGreet() {try {const result = await invoke<string>("greet", { name }); // 调用 Rust 命令setMessage(result);} catch (error) {console.error("调用 Rust greet 出错:", error);}}return (<div className="p-4"><inputtype="text"value={name}onChange={(e) => setName(e.target.value)}placeholder="输入名字"className="border p-1"/><button onClick={handleGreet} className="ml-2 px-4 py-1 bg-blue-500 text-white">打招呼</button>{message && <div className="mt-4 text-green-700">{message}</div>}</div>);
}

---

3️⃣ 说明

1. invoke 第一个参数是 Rust 命令名（greet）。

2. 第二个参数是 命令参数（对象形式），对应 Rust 函数参数。

3. invoke 返回一个 Promise，类型可用泛型指定（如 <string>）。

4. Rust 的返回值会自动序列化为 JSON 传给前端。

---

这样，React 就能直接调用 Rust 的 greet 方法，前端显示返回值。

---