桌面应用开发框架Tauri零基础入门1. Tauri 功能介绍核心特点Tauri vs Electron2. 安装教程环境准备各平台安装步骤macOS / LinuxWindows创建第一个 Tauri 项目启动开发服务器3. 功能开发3.1 项目结构3.2 核心概念命令系统Commands定义 Rust 命令 (src-tauri/src/main.rs)前端调用 (src/App.vue)3.3 常用 API 示例文件系统操作窗口管理系统通知3.4 状态管理3.5 打包发布参考文档学习资源1. Tauri 功能介绍Tauri是一个用于构建跨平台桌面应用程序的框架它的核心理念是使用 Web 前端技术HTML/CSS/JS构建 UI同时使用 Rust 编写高性能的后端逻辑。核心特点特性说明轻量级最终打包体积通常只有2-5MB相比 Electron 动辄 100MB 大幅减小高性能后端使用 Rust内存占用低运行速度快安全性Rust 的内存安全特性 严格的权限系统Capabilities跨平台支持 Windows、macOS、Linux移动端iOS/Android也在积极开发中前端自由可以使用任何前端框架Vue、React、Svelte、Solid、纯 HTML 等原生 API提供文件系统、窗口管理、通知、剪贴板等系统级 APITauri vs Electron对比项TauriElectron打包体积~2-5MB~100-200MB内存占用低高后端语言RustNode.js渲染引擎系统 WebView捆绑 Chromium启动速度快较慢2. 安装教程环境准备必需依赖RustTauri 的核心运行时Node.js用于前端构建系统依赖根据操作系统不同各平台安装步骤macOS / Linux# 1. 安装 Rustcurl--protohttps--tlsv1.2-sSfhttps://sh.rustup.rs|shsource$HOME/.cargo/env# 2. 安装 Node.js推荐使用 fnm 或 nvm# macOS 示例使用 Homebrewbrewinstallfnm fnminstall20# 3. 安装系统依赖# macOS:xcode-select--install# Ubuntu/Debian:sudoaptupdatesudoaptinstalllibwebkit2gtk-4.0-dev build-essentialcurlwgetfilelibssl-dev libgtk-3-dev libayatana-appindicator3-dev librsvg2-devWindows# 1. 安装 Rust通过 rustup-init.exe# 下载地址https://rustup.rs/# 2. 安装 Node.js# 下载地址https://nodejs.org/# 3. 安装 Visual Studio Build Tools# 需要安装 Desktop development with C 工作负载创建第一个 Tauri 项目# 使用 create-tauri-app 脚手架推荐npmcreate tauri-applatest# 或者使用 pnpmpnpmcreate tauri-app# 或者使用 cargocargoinstallcreate-tauri-appcargocreate-tauri-app交互式配置示例✔ Project name · my-tauri-app ✔ Choose your package manager · pnpm ✔ Choose your UI template · Vue ✔ Choose your UI flavor · TypeScript启动开发服务器cdmy-tauri-apppnpminstallpnpmtauri dev3. 功能开发3.1 项目结构src-tauri/ # Rust 后端代码 ├── src/ │ └── main.rs # 程序入口 ├── Cargo.toml # Rust 依赖配置 ├── tauri.conf.json # Tauri 配置文件 └── icons/ # 应用图标 src/ # 前端代码Vue/React 等 ├── App.vue └── main.ts3.2 核心概念命令系统CommandsTauri 使用命令来实现前端与 Rust 后端的通信。定义 Rust 命令 (src-tauri/src/main.rs)// 引入 Tauri 宏usetauri::command;// 定义一个命令#[command]fngreet(name:str)-String{format!(你好{}来自 Rust 的问候 ,name)}fnmain(){tauri::Builder::default().invoke_handler(tauri::generate_handler![greet]).run(tauri::generate_context!()).expect(运行 Tauri 应用时出错);}前端调用 (src/App.vue)template div input v-modelname placeholder输入你的名字 / button clicksendGreet发送问候/button p{{ message }}/p /div /template script setup langts import { ref } from vue import { invoke } from tauri-apps/api/core const name ref() const message ref() async function sendGreet() { // 调用 Rust 命令 message.value await invoke(greet, { name: name.value }) } /script3.3 常用 API 示例文件系统操作// src-tauri/src/main.rsusetauri::command;usestd::fs;usestd::path::Path;#[command]fnread_file(path:str)-ResultString,String{fs::read_to_string(path).map_err(|e|e.to_string())}#[command]fnwrite_file(path:str,contents:str)-Result(),String{fs::write(path,contents).map_err(|e|e.to_string())}配置权限(src-tauri/capabilities/default.json){$schema:../gen/schemas/desktop-schema.json,identifier:default,description:默认能力配置,windows:[main],permissions:[core:default,fs:allow-read-file,fs:allow-write-file,fs:allow-read-dir,dialog:allow-open,dialog:allow-save]}窗口管理usetauri::Manager;#[command]fncreate_new_window(app:tauri::AppHandle){let_tauri::WebviewWindowBuilder::new(app,new-window,tauri::WebviewUrl::App(new-page.html.into())).title(新窗口).inner_size(800.0,600.0).build();}#[command]fnclose_window(window:tauri::Window){let_window.close();}系统通知usetauri::notification::Notification;#[command]fnsend_notification(title:str,body:str){Notification::new().title(title).body(body).show().unwrap();}3.4 状态管理在 Rust 端维护全局状态usestd::sync::Mutex;usetauri::State;structAppState{counter:Mutexi32,username:MutexString,}#[command]fnincrement_counter(state:StateAppState)-i32{letmutcounterstate.counter.lock().unwrap();*counter1;*counter}#[command]fnget_username(state:StateAppState)-String{state.username.lock().unwrap().clone()}fnmain(){tauri::Builder::default().manage(AppState{counter:Mutex::new(0),username:Mutex::new(默认用户.to_string()),}).invoke_handler(tauri::generate_handler![increment_counter,get_username]).run(tauri::generate_context!()).expect(error while running tauri application);}3.5 打包发布# 开发调试pnpmtauri dev# 构建生产版本pnpmtauri build# 构建特定平台pnpmtauri build--targetx86_64-pc-windows-msvcpnpmtauri build--targetx86_64-apple-darwinpnpmtauri build--targetaarch64-apple-darwin# Apple Silicon构建后的安装包位于src-tauri/target/release/bundle/目录下。参考文档【开发语言】Rust语言介绍【Rust编程】在 Windows 下搭建完整的 Rust 开发环境【Rust编程】Cargo 工具详解从基础到高级的完整指南学习资源官方文档: https://tauri.app/API 参考: https://tauri.app/reference/插件生态: https://tauri.app/plugin/Discord 社区: https://discord.gg/tauriTauri 特别适合需要小体积、高性能、高安全性的桌面应用如果你熟悉 Web 开发又想尝试 Rust这是一个绝佳的选择
【Rust编程】桌面应用开发框架Tauri零基础入门
桌面应用开发框架Tauri零基础入门1. Tauri 功能介绍核心特点Tauri vs Electron2. 安装教程环境准备各平台安装步骤macOS / LinuxWindows创建第一个 Tauri 项目启动开发服务器3. 功能开发3.1 项目结构3.2 核心概念命令系统Commands定义 Rust 命令 (src-tauri/src/main.rs)前端调用 (src/App.vue)3.3 常用 API 示例文件系统操作窗口管理系统通知3.4 状态管理3.5 打包发布参考文档学习资源1. Tauri 功能介绍Tauri是一个用于构建跨平台桌面应用程序的框架它的核心理念是使用 Web 前端技术HTML/CSS/JS构建 UI同时使用 Rust 编写高性能的后端逻辑。核心特点特性说明轻量级最终打包体积通常只有2-5MB相比 Electron 动辄 100MB 大幅减小高性能后端使用 Rust内存占用低运行速度快安全性Rust 的内存安全特性 严格的权限系统Capabilities跨平台支持 Windows、macOS、Linux移动端iOS/Android也在积极开发中前端自由可以使用任何前端框架Vue、React、Svelte、Solid、纯 HTML 等原生 API提供文件系统、窗口管理、通知、剪贴板等系统级 APITauri vs Electron对比项TauriElectron打包体积~2-5MB~100-200MB内存占用低高后端语言RustNode.js渲染引擎系统 WebView捆绑 Chromium启动速度快较慢2. 安装教程环境准备必需依赖RustTauri 的核心运行时Node.js用于前端构建系统依赖根据操作系统不同各平台安装步骤macOS / Linux# 1. 安装 Rustcurl--protohttps--tlsv1.2-sSfhttps://sh.rustup.rs|shsource$HOME/.cargo/env# 2. 安装 Node.js推荐使用 fnm 或 nvm# macOS 示例使用 Homebrewbrewinstallfnm fnminstall20# 3. 安装系统依赖# macOS:xcode-select--install# Ubuntu/Debian:sudoaptupdatesudoaptinstalllibwebkit2gtk-4.0-dev build-essentialcurlwgetfilelibssl-dev libgtk-3-dev libayatana-appindicator3-dev librsvg2-devWindows# 1. 安装 Rust通过 rustup-init.exe# 下载地址https://rustup.rs/# 2. 安装 Node.js# 下载地址https://nodejs.org/# 3. 安装 Visual Studio Build Tools# 需要安装 Desktop development with C 工作负载创建第一个 Tauri 项目# 使用 create-tauri-app 脚手架推荐npmcreate tauri-applatest# 或者使用 pnpmpnpmcreate tauri-app# 或者使用 cargocargoinstallcreate-tauri-appcargocreate-tauri-app交互式配置示例✔ Project name · my-tauri-app ✔ Choose your package manager · pnpm ✔ Choose your UI template · Vue ✔ Choose your UI flavor · TypeScript启动开发服务器cdmy-tauri-apppnpminstallpnpmtauri dev3. 功能开发3.1 项目结构src-tauri/ # Rust 后端代码 ├── src/ │ └── main.rs # 程序入口 ├── Cargo.toml # Rust 依赖配置 ├── tauri.conf.json # Tauri 配置文件 └── icons/ # 应用图标 src/ # 前端代码Vue/React 等 ├── App.vue └── main.ts3.2 核心概念命令系统CommandsTauri 使用命令来实现前端与 Rust 后端的通信。定义 Rust 命令 (src-tauri/src/main.rs)// 引入 Tauri 宏usetauri::command;// 定义一个命令#[command]fngreet(name:str)-String{format!(你好{}来自 Rust 的问候 ,name)}fnmain(){tauri::Builder::default().invoke_handler(tauri::generate_handler![greet]).run(tauri::generate_context!()).expect(运行 Tauri 应用时出错);}前端调用 (src/App.vue)template div input v-modelname placeholder输入你的名字 / button clicksendGreet发送问候/button p{{ message }}/p /div /template script setup langts import { ref } from vue import { invoke } from tauri-apps/api/core const name ref() const message ref() async function sendGreet() { // 调用 Rust 命令 message.value await invoke(greet, { name: name.value }) } /script3.3 常用 API 示例文件系统操作// src-tauri/src/main.rsusetauri::command;usestd::fs;usestd::path::Path;#[command]fnread_file(path:str)-ResultString,String{fs::read_to_string(path).map_err(|e|e.to_string())}#[command]fnwrite_file(path:str,contents:str)-Result(),String{fs::write(path,contents).map_err(|e|e.to_string())}配置权限(src-tauri/capabilities/default.json){$schema:../gen/schemas/desktop-schema.json,identifier:default,description:默认能力配置,windows:[main],permissions:[core:default,fs:allow-read-file,fs:allow-write-file,fs:allow-read-dir,dialog:allow-open,dialog:allow-save]}窗口管理usetauri::Manager;#[command]fncreate_new_window(app:tauri::AppHandle){let_tauri::WebviewWindowBuilder::new(app,new-window,tauri::WebviewUrl::App(new-page.html.into())).title(新窗口).inner_size(800.0,600.0).build();}#[command]fnclose_window(window:tauri::Window){let_window.close();}系统通知usetauri::notification::Notification;#[command]fnsend_notification(title:str,body:str){Notification::new().title(title).body(body).show().unwrap();}3.4 状态管理在 Rust 端维护全局状态usestd::sync::Mutex;usetauri::State;structAppState{counter:Mutexi32,username:MutexString,}#[command]fnincrement_counter(state:StateAppState)-i32{letmutcounterstate.counter.lock().unwrap();*counter1;*counter}#[command]fnget_username(state:StateAppState)-String{state.username.lock().unwrap().clone()}fnmain(){tauri::Builder::default().manage(AppState{counter:Mutex::new(0),username:Mutex::new(默认用户.to_string()),}).invoke_handler(tauri::generate_handler![increment_counter,get_username]).run(tauri::generate_context!()).expect(error while running tauri application);}3.5 打包发布# 开发调试pnpmtauri dev# 构建生产版本pnpmtauri build# 构建特定平台pnpmtauri build--targetx86_64-pc-windows-msvcpnpmtauri build--targetx86_64-apple-darwinpnpmtauri build--targetaarch64-apple-darwin# Apple Silicon构建后的安装包位于src-tauri/target/release/bundle/目录下。参考文档【开发语言】Rust语言介绍【Rust编程】在 Windows 下搭建完整的 Rust 开发环境【Rust编程】Cargo 工具详解从基础到高级的完整指南学习资源官方文档: https://tauri.app/API 参考: https://tauri.app/reference/插件生态: https://tauri.app/plugin/Discord 社区: https://discord.gg/tauriTauri 特别适合需要小体积、高性能、高安全性的桌面应用如果你熟悉 Web 开发又想尝试 Rust这是一个绝佳的选择
