用 Tauri 2.0 搓一个 5MB 的股票盯盘小窗

我想搞一个悬浮在屏幕角落的股票小组件，最小、最快、别碍事。用 Electron 当然能写，但一个空壳就 80MB，单纯看个价格也太浪费了。Tauri 2.0 正好补齐了移动端支持，体积能控制在 5MB 左右，就它了。

环境准备

先装 Rust 和 Node.js：

curl --proto '=https' --tlsv1.2 -sSf https://sh.rustup.rs | sh

然后用脚手架创建项目，一路选 Vue + TypeScript：

npm create tauri-app@latest

• Project name: stock-ticker
• Identifier: com.stock.ticker
• Frontend flavor: Vue
• Option: TypeScript

---

前端：画一个小窗卡片

组件很简单：红涨绿跌，半透明黑底，像系统小组件那样不能选中文字。我在 src/App.vue 里直接撸：

<script setup lang="ts">
import { ref, onMounted } from "vue";
import { invoke } from "@tauri-apps/api/core";

const price = ref("Loading...");
const percent = ref("0.00%");
const isUp = ref(true);

async function fetchStock() {
  try {
    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();
  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;
}
.up .price {
  color: #ff5252;
}
.down .price {
  color: #4caf50;
}
</style>

---

后端：用 Rust 请求数据

本来可以用前端 fetch 直接调接口，但金融 API 常常有 CORS 限制，把密钥藏在 Rust 端也更安全。虽然例子用随机数模拟，但结构和真实请求一样。

src-tauri/Cargo.toml 里加依赖：

[dependencies]
tauri = { version = "2.0.0", features = [] }
serde = { version = "1", features = ["derive"] }
serde_json = "1"
 = { version = , features = [, ] }