桌面应用
用 Tauri 为 Web 模板接入桌面应用
桌面端路线让你从一个 Tauri 骨架开始,逐步改成自己的桌面应用。先把 Web/API 跑通,再接窗口、本地能力和系统交互。
你可以参考什么: React + Tauri v2、登录、API 调用、本地偏好、桌面打包和窗口能力。后端复用 Web/API(Hono + Better Auth + oRPC),桌面端只管窗口、本地能力和系统交互。
当前状态: Lab / Beta。适合学习、评估和二次开发;正式分发前要补齐签名、公证、自动更新和真实安装测试。
什么时候该做桌面应用
- 需要托盘常驻、后台运行或全局快捷键
- 需要读取本地文件、写入 app data、批量处理资料
- 需要系统剪贴板、打开外部应用、拖拽文件
- Web 已经有核心业务,但用户希望一个固定的桌面入口
如果只是想让用户离线打开网页,优先考虑 PWA。一旦走桌面路线,系统权限、代码签名、安装包和自动更新都得处理。
开始之前
| 准备项 | 什么时候需要 |
|---|---|
| Node.js + Vite Plus | 第一天就需要 |
| Rust + Cargo | 跑 Tauri 原生窗口前 |
| 目标平台机器 | macOS 安装包需要 Mac,Windows 需要 Windows |
| Web/API 地址 | 登录和业务功能前,本地用 http://localhost:7001/api |
技术栈
| 层 | 方案 |
|---|---|
| 桌面框架 | Tauri v2 |
| 前端 | React 19 + TypeScript + Vite Plus |
| 样式 | Tailwind CSS v4 |
| 数据请求 | TanStack Query + oRPC |
| 登录 | Better Auth,通过现有 Hono 后端 |
| 本地能力 | Tauri commands、capabilities、tray、process、opener |
模板里有什么
- 登录、注册和退出入口
- 公开 health API 和受保护 profile API 的调用示例
- 本地偏好读取、保存和重置
- 浏览器预览 fallback,方便先调 UI
- Tauri 原生窗口、托盘、single instance 和打开 app data 目录
- 桌面端独立的
VITE_DESKTOP_*环境变量校验
推荐阅读顺序
桌面端基础
先理解 Tauri、窗口、权限、存储和签名的基本概念。
快速开始
安装依赖,启动 Web/API,打开桌面预览和 Tauri 原生窗口。
项目结构
看懂前端、runtime adapter、Rust commands 和后端边界。
配置与应用身份
配置应用名、identifier、窗口、环境变量、图标和后端 origin。
改成自己的 App
按顺序替换名称、Bundle ID、图标、后端地址、权限和发布配置。
登录与 API
桌面端登录、API 接入和 origin 配置的完整流程。
Runtime 与权限
理解 Tauri commands、capabilities、plugin 和系统权限。
本地存储
区分前端状态、app data、Keychain 和后端数据。
托盘与窗口
处理托盘菜单、关闭行为和后台运行。
测试与验收
代码检查、浏览器预览、Tauri 原生窗口和发布前验收。
构建与分发
生成安装包,处理 macOS、Windows、Linux 的分发差异。
自动更新
配置签名更新产物、更新端点和 Tauri updater。
macOS 签名与权限
处理 Apple Developer 注册、证书、公证和 TCC 权限。
Vibe Coding
用 AI 辅助改造桌面模板的安全顺序。
桌面端 UI
桌面工具界面的视觉层级、布局和状态设计。
Skills 与插件
按任务选择合适的 AI Skill 和开发插件。
想和其他创造者交流?
这篇文档有问题?