前言：为什么选择 Tauri 2.0？
Electron 本质上是把一个完整的 Chrome 浏览器塞进了你的安装包，而 Tauri 则利用系统原生 WebView。
- Electron: 代码 + Node.js + Chromium 内核 = 约 120MB 安装包。
- Tauri: 代码 + Rust 二进制 + 系统原生 WebView = 约 4MB 安装包。
Tauri 2.0 不仅继承了轻量的优势，还打通了移动端 (iOS/Android)，实现了真正的'一次编写，到处运行'。
架构对比
| 特性 | Tauri 应用 (轻量) | Electron 应用 (臃肿) |
|---|---|---|
| 前端 UI | Vue / React | HTML / JS |
| 核心进程 | Rust 二进制 (极小) | Node.js 运行时 |
| 渲染引擎 | OS 原生 WebView | Chromium 内核 (巨大) |
一、环境准备
你需要安装 Rust 编译环境和 Node.js。
- 安装 Rust:
curl --proto '=https' --tlsv1.2 -sSf https://sh.rustup.rs | sh - 创建项目:
npm create tauri-app@latest
- Project name:
stock-ticker - Identifier:
com.stock.ticker - Frontend flavor: Vue
- Option: TypeScript
二、前端开发：画一个精美的'小组件'
我们的目标是做一个像 Windows 小组件一样的悬浮窗。在 src/App.vue 中，我们画一个简洁的卡片。
<script setup lang="ts">
import { ref, onMounted } from "vue";
import { invoke } from "@tauri-apps/api/core";
// Tauri 2.0 核心 API
const price = ref("Loading...");
const percent = ref("0.00%");
const isUp = ref(true);
// 调用 Rust 后端获取数据
async function fetchStock() {
try {
// 'get_stock_data' 是我们稍后在 Rust 里定义的函数名
const data: any = await invoke("get_stock_data", { symbol: "AAPL" });
price.value = data.price;
percent.value = data.percent;
isUp.value = !data.percent.startsWith("-");
} catch (e) {
console.error(e);
}
}
onMounted(() => {
fetchStock();
// 每 3 秒刷新一次
setInterval(fetchStock, 3000);
});
</script>
<template>
<div class="container" :class="{ up: isUp, down: !isUp }">
<div class="symbol">AAPL</div>
<div class="price">${{ price }}</div>
<div class="percent">{{ percent }}</div>
</div>
</template>
<style scoped>
/* 简单的红涨绿跌样式，背景透明 */
.container {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
background: rgba(0, 0, 0, 0.6); /* 半透明黑底 */
color: white;
border-radius: 12px;
user-select: none; /* 禁止选中文本，像原生 App */
}
.up .price {
color: #ff5252;
}
.down .price {
color: #4caf50;
}
</style>
三、后端开发：Rust 的高性能网络请求
为什么不用 JS 的 fetch？
- 跨域问题 (CORS)：网页端请求金融 API 经常遇到跨域，Rust 后端完全无视 CORS。
- 安全性：API Key 藏在 Rust 二进制里，比暴露在前端 JS 里安全得多。
1. 添加依赖 (src-tauri/Cargo.toml)
我们需要一个 HTTP 客户端和一个 JSON 解析库。
[dependencies]
tauri = { version = "2.0.0", features = [] }
serde = { version = "1", features = ["derive"] }
serde_json = "1"
reqwest = { version = "0.11", features = ["json", "blocking"] } # 简化演示用 blocking
2. 编写 Rust 逻辑 (src-tauri/src/lib.rs)
use tauri::command;
use serde::Serialize;
// 定义返回给前端的数据结构
#[derive(Serialize)]
struct StockData {
price: String,
percent: String,
}
// 宏定义：这是一个可以被 JS 调用的命令
#[command]
fn get_stock_data(symbol: String) -> StockData {
// 真实场景请替换为真实的 API (如 Yahoo Finance, Alpha Vantage)
// 这里模拟一个随机波动的数据
println!("Frontend is asking for: {}", symbol);
StockData {
price: format!("{:.2}", 150.0 + (rand::random::<f64>() * 10.0)),
percent: format!("{:.2}%", rand::random::<f64>() * 2.0 - 1.0),
}
}
#[cfg_attr(mobile, tauri::mobile_entry_point)]
pub fn run() {
tauri::Builder::default()
// 注册命令
.invoke_handler(tauri::generate_handler![get_stock_data])
.run(tauri::generate_context!())
.expect("error while running tauri application");
}
四、窗口定制：打造'原生小组件'感
为了让它不像一个浏览器窗口，我们需要修改 src-tauri/tauri.conf.json。我们要去掉标题栏，设定固定大小，并允许透明。
{
"app": {
"windows": [
{
"title": "StockTicker",
"width": 200, // 很小，只显示关键信息
"height": 120,
"decorations": false, // 去掉标题栏和边框
"transparent": true, // 开启背景透明
"alwaysOnTop": true, // 永远置顶 (盯盘必备)
"resizable": false
}
]
}
}
五、结果对比：碾压级的胜利
运行 npm run tauri build 进行打包。我们将最终产物与同样的 Electron 项目进行对比。
| 指标 | Tauri 2.0 (Rust) | Electron (Node) | 结论 |
|---|---|---|---|
| 安装包体积 | 4.2 MB | 85 MB | Tauri 胜 |
| 冷启动内存 | 15 MB | 120 MB | Tauri 胜 |
| 磁盘占用 | 8 MB | 240 MB | Tauri 胜 |
| 开发难度 | 中 (需懂少量 Rust) | 低 (纯 JS) | Electron 胜 |
总结
Tauri 2.0 让我们看到了一种新的可能：在享受 Web 开发的高效率（Vue/React）的同时，拥有原生应用的高性能（Rust）。
虽然 Rust 有一定的学习门槛，但对于普通的桌面应用，你只需要掌握最基础的 Rust 语法（结构体、函数、HTTP 请求）即可。剩下的 UI 交互，依然是你最熟悉的 HTML/CSS/JS。
下一步建议：尝试给这个小组件加一个系统托盘图标（System Tray）。在 Tauri 中，你可以在 Rust 端轻松创建系统托盘，实现'右键菜单 -> 退出应用'或'切换股票'的功能。