1、AI程序员系列文章2、AI面试系列文章3、AI编程系列文章目录开篇为什么我们要逃离ElectronTauri架构全景RustWebview的优雅组合架构图解核心设计理念环境搭建5分钟跑起第一个Tauri应用前置依赖创建项目项目结构解析运行第一个应用命令系统前后端通信的艺术为什么需要命令系统基础命令示例复杂类型传递窗口管理多窗口、托盘、菜单全掌握创建和管理窗口系统托盘System Tray应用菜单Menu Bar自动更新与打包分发Tauri Updater 配置代码签名重要GitHub Actions 自动构建Tauri vs Electron全方位对比什么时候选Tauri一个真实的迁移案例开篇为什么我们要逃离Electron你是否遇到过这样的痛苦场景一个简单的待办事项应用安装包体积竟然有200MB打开应用后内存占用直逼Chrome浏览器300MB起步安全漏洞频出每次Electron更新都伴随着一堆CVE公告用户抱怨“你们的软件怎么比Photoshop还大”这就像是你只想买辆自行车代步结果商家硬塞给你一辆重型卡车——功能确实强大但你真的需要吗Tauri的出现就是为了终结这种过度包装的荒诞。用Rust重写后端复用系统自带的WebviewWindows用Edge WebView2macOS用WKWebViewLinux用WebKitGTK让你的桌面应用体积缩小90%内存占用降低50%启动速度提升3倍。网上搜到的Tauri教程太少缺乏系统性实践。本文将从原理到实战给出一个零成本上手方案包含完整代码和避坑指南。Tauri架构全景RustWebview的优雅组合架构图解┌─────────────────────────────────────────────────────────────┐ │ 你的前端代码 │ │ (React/Vue/Svelte/Vanilla JS) │ ├─────────────────────────────────────────────────────────────┤ │ Tauri JS API │ │ (invoke, event, window, dialog, fs...) │ ├─────────────────────────────────────────────────────────────┤ │ Webview 渲染层 │ │ ┌──────────┬──────────┬──────────┐ │ │ │ Windows │ macOS │ Linux │ │ │ │Edge Web │ WKWebView│WebKitGTK │ │ │ │View2 │ │ │ │ │ └──────────┴──────────┴──────────┘ │ ├─────────────────────────────────────────────────────────────┤ │ Tauri Core (Rust) │ │ ┌─────────────────────┐ │ │ │ 命令路由系统 │ │ │ │ 窗口管理器 │ │ │ │ 安全策略引擎 │ │ │ │ 自动更新模块 │ │ │ └─────────────────────┘ │ ├─────────────────────────────────────────────────────────────┤ │ 操作系统 API │ │ (文件系统、通知、剪贴板、系统托盘...) │ └─────────────────────────────────────────────────────────────┘核心设计理念1. 安全优先Security FirstTauri的安全模型堪称教科书级别。每个功能都需要显式启用默认情况下你的应用被关在沙盒里——就像给熊孩子戴上手铐想搞破坏先问过我手里的权限清单。2. 轻量至上Lightweight不复刻Chromium而是直接调用系统Webview。这就好比你家装修Electron是自带发电机Tauri是直接插家里的插座——哪个更轻量一目了然。3. 前端自由Frontend AgnosticReact、Vue、Svelte、Solid、Angular甚至纯HTMLJSTauri来者不拒。你的前端技术栈不需要为桌面应用做任何妥协。环境搭建5分钟跑起第一个Tauri应用前置依赖# 1. 安装 Rust如果还没有 curl --proto https --tlsv1.2 -sSf https://sh.rustup.rs | sh # 2. 安装 Node.js推荐 v18 # 去 https://nodejs.org 下载安装包 # 3. Windows 用户需要安装 WebView2 Runtime # 下载地址https://developer.microsoft.com/microsoft-edge/webview2/⚠️避坑警告Windows 用户如果遇到无法找到 WebView2的错误先检查系统是否安装了 Edge WebView2 Runtime。Win11 自带Win10 部分版本需要手动安装。创建项目# 使用 create-tauri-app 脚手架 npm create tauri-applatest # 按照提示选择 # - 项目名称my-tauri-app # - 前端框架选择你熟悉的这里以 React TypeScript 为例 # - 包管理器npm / yarn / pnpm效率技巧如果你已经有现成的Web项目可以直接在现有项目中集成Tauri# 进入现有项目目录 cd your-existing-project # 初始化 Tauri npm install tauri-apps/cli tauri-apps/api npx tauri init项目结构解析my-tauri-app/ ├── src/ # 前端代码 │ ├── App.tsx │ └── main.tsx ├── src-tauri/ # Rust 后端代码 │ ├── Cargo.toml # Rust 依赖管理 │ ├── tauri.conf.json # Tauri 配置文件 │ ├── src/ │ │ └── main.rs # 应用入口 │ └── icons/ # 应用图标 └── package.json运行第一个应用# 开发模式热更新 npm run tauri dev # 构建生产版本 npm run tauri build看到窗口弹出的那一刻恭喜你——你已经迈出了逃离Electron的第一步命令系统前后端通信的艺术为什么需要命令系统前端JavaScript想调用Rust代码这就是命令系统的用武之地。Tauri的命令系统基于JSON-RPC类型安全、异步支持、错误处理一应俱全。基础命令示例Rust 端src-tauri/src/main.rs// 引入必要的模块 use tauri::command; // 定义一个命令 #[command] fn greet(name: str) - String { format!(你好{}欢迎来到Tauri世界, name) } // 带错误处理的命令 #[command] fn read_file_contents(path: str) - ResultString, String { std::fs::read_to_string(path) .map_err(|e| format!(读取文件失败: {}, e)) } // 异步命令适合耗时操作 #[command] async fn fetch_data(url: str) - ResultString, String { let response reqwest::get(url) .await .map_err(|e| e.to_string())?; let text response.text() .await .map_err(|e| e.to_string())?; Ok(text) } fn main() { tauri::Builder::default() .invoke_handler(tauri::generate_handler![ greet, read_file_contents, fetch_data ]) .run(tauri::generate_context!()) .expect(运行Tauri应用时出错); }前端调用React 示例import { invoke } from tauri-apps/api/tauri; // 调用简单命令 const handleGreet async () { const result await invoke(greet, { name: 开发者 }); console.log(result); // 输出: 你好开发者欢迎来到Tauri世界 }; // 调用带错误处理的命令 const handleReadFile async (filePath: string) { try { const content await invokestring(read_file_contents, { path: filePath }); console.log(文件内容:, content); } catch (error) { console.error(出错了:, error); } }; // 调用异步命令 const handleFetch async () { const data await invokestring(fetch_data, { url: https://api.example.com/data }); console.log(获取的数据:, data); };复杂类型传递// 定义数据结构 use serde::{Deserialize, Serialize}; #[derive(Serialize, Deserialize)] struct User { id: u64, name: String, email: OptionString, } #[derive(Serialize, Deserialize)] struct CreateUserRequest { name: String, email: String, } #[command] fn create_user(request: CreateUserRequest) - ResultUser, String { // 模拟数据库操作 let user User { id: 1, name: request.name, email: Some(request.email), }; Ok(user) }// 前端类型定义 interface CreateUserRequest { name: string; email: string; } interface User { id: number; name: string; email?: string; } const createNewUser async () { const request: CreateUserRequest { name: 张三, email: zhangsanexample.com }; const user await invokeUser(create_user, { request }); console.log(创建的用户:, user); };⚠️避坑警告Rust的OptionT在前端会变成T | null而不是T | undefined。如果你的TypeScript严格模式开启注意类型转换。效率技巧使用tauri-specta可以自动生成TypeScript类型定义避免手写类型出错cargo add specta # 在命令上添加 #[specta::specta] 宏 # 自动生成 types.ts 文件窗口管理多窗口、托盘、菜单全掌握创建和管理窗口use tauri::{Manager, WindowBuilder, WindowUrl}; #[command] async fn create_new_window(app: tauri::AppHandle) - Result(), String { // 创建新窗口 let new_window WindowBuilder::new( app, new-window, // 窗口唯一标识 WindowUrl::App(/settings.into()) ) .title(设置) .inner_size(800.0, 600.0) .min_inner_size(400.0, 300.0) .center() .resizable(true) .fullscreen(false) .decorations(true) // 是否显示原生窗口边框 .always_on_top(false) .build() .map_err(|e| e.to_string())?; Ok(()) } // 获取窗口并操作 #[command] fn close_window(app: tauri::AppHandle, label: str) { if let Some(window) app.get_window(label) { window.close().unwrap(); } } // 窗口间通信 #[command] fn send_to_main_window(app: tauri::AppHandle, message: str) { if let Some(main_window) app.get_window(main) { main_window.emit(message-from-child, message).unwrap(); } }系统托盘System Trayuse tauri::{SystemTray, SystemTrayMenu, SystemTrayMenuItem, SystemTrayEvent}; fn main() { // 创建托盘菜单 let tray_menu SystemTrayMenu::new() .add_item(CustomMenuItem::new(open, 打开应用)) .add_native_item(SystemTrayMenuItem::Separator) .add_item(CustomMenuItem::new(settings, 设置)) .add_native_item(SystemTrayMenuItem::Separator) .add_item(CustomMenuItem::new(quit, 退出)); let system_tray SystemTray::new().with_menu(tray_menu); tauri::Builder::default() .system_tray(system_tray) .on_system_tray_event(|app, event| { match event { SystemTrayEvent::LeftClick { position: _, size: _, .. } { // 左键点击显示/隐藏窗口 if let Some(window) app.get_window(main) { if window.is_visible().unwrap() { window.hide().unwrap(); } else { window.show().unwrap(); window.set_focus().unwrap(); } } } SystemTrayEvent::MenuItemClick { id, .. } { match id.as_str() { open { if let Some(window) app.get_window(main) { window.show().unwrap(); window.set_focus().unwrap(); } } settings { // 打开设置窗口 } quit { std::process::exit(0); } _ {} } } _ {} } }) .run(tauri::generate_context!()) .expect(error while running tauri application); }应用菜单Menu Baruse tauri::{Menu, MenuItem, Submenu, CustomMenuItem}; fn main() { // 创建菜单 let file_menu Submenu::new(文件, Menu::new() .add_item(CustomMenuItem::new(new, 新建).accelerator(CmdOrCtrlN)) .add_item(CustomMenuItem::new(open, 打开...).accelerator(CmdOrCtrlO)) .add_native_item(MenuItem::Separator) .add_item(CustomMenuItem::new(save, 保存).accelerator(CmdOrCtrlS)) .add_native_item(MenuItem::Separator) .add_item(CustomMenuItem::new(quit, 退出).accelerator(CmdOrCtrlQ)) ); let edit_menu Submenu::new(编辑, Menu::new() .add_native_item(MenuItem::Undo) .add_native_item(MenuItem::Redo) .add_native_item(MenuItem::Separator) .add_native_item(MenuItem::Cut) .add_native_item(MenuItem::Copy) .add_native_item(MenuItem::Paste) ); let menu Menu::new() .add_submenu(file_menu) .add_submenu(edit_menu); tauri::Builder::default() .menu(menu) .on_menu_event(|event| { match event.menu_item_id() { new { // 处理新建 } open { // 处理打开 } save { // 处理保存 } quit { std::process::exit(0); } _ {} } }) .run(tauri::generate_context!()) .expect(error while running tauri application); }效率技巧macOS 和 Windows 的菜单习惯不同macOS 习惯在顶部菜单栏Windows 习惯在窗口内。Tauri会自动适配但你可能需要为不同平台定制菜单内容。自动更新与打包分发Tauri Updater 配置tauri.conf.json{ tauri: { updater: { active: true, endpoints: [ https://your-server.com/updates/{{target}}/{{current_version}} ], dialog: true, pubkey: YOUR_PUBLIC_KEY_HERE } } }更新服务器响应格式{ version: 1.1.0, notes: 修复了一些bug优化了性能, pub_date: 2024-01-15T12:00:00Z, platforms: { darwin-x86_64: { signature: 签名内容, url: https://your-server.com/releases/v1.1.0/app-x86_64.app.tar.gz }, darwin-aarch64: { signature: 签名内容, url: https://your-server.com/releases/v1.1.0/app-aarch64.app.tar.gz }, windows-x86_64: { signature: 签名内容, url: https://your-server.com/releases/v1.1.0/app-x64.msi.zip } } }代码签名重要未签名的应用在 Windows 上会触发 SmartScreen 警告在 macOS 上会被 Gatekeeper 拦截。Windows 代码签名# 使用 signtool 签名 signtool sign /f certificate.pfx /p password /tr http://timestamp.digicert.com /td sha256 /fd sha256 MyApp.exemacOS 代码签名# 使用 codesign 签名 codesign --force --options runtime --sign Developer ID Application: Your Name --deep MyApp.app # 公证Notarization xcrun altool --notarize-app --primary-bundle-id com.yourcompany.app \ --username youremail.com --password app-specific-password \ --file MyApp.app.zip⚠️避坑警告macOS 10.15 要求所有分发应用必须经过公证。跳过这一步用户会看到无法验证开发者的警告。GitHub Actions 自动构建name: Release on: push: tags: - v* jobs: release: strategy: fail-fast: false matrix: platform: [macos-latest, ubuntu-latest, windows-latest] runs-on: ${{ matrix.platform }} steps: - uses: actions/checkoutv3 - name: Setup Node.js uses: actions/setup-nodev3 with: node-version: 18 - name: Setup Rust uses: dtolnay/rust-actionstable - name: Install dependencies (Ubuntu) if: matrix.platform ubuntu-latest run: | sudo apt-get update sudo apt-get install -y libgtk-3-dev libwebkit2gtk-4.0-dev libappindicator3-dev librsvg2-dev patchelf - name: Install frontend dependencies run: npm install - name: Build Tauri uses: tauri-apps/tauri-actionv0 env: GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} TAURI_PRIVATE_KEY: ${{ secrets.TAURI_PRIVATE_KEY }} TAURI_KEY_PASSWORD: ${{ secrets.TAURI_KEY_PASSWORD }} with: tagName: ${{ github.ref_name }} releaseName: App v__VERSION__ releaseBody: See the assets to download this version. releaseDraft: true prerelease: falseTauri vs Electron全方位对比维度TauriElectron胜出者安装包体积~3-5MB~150-200MB Tauri内存占用~50-80MB~150-300MB Tauri启动速度快~1s较慢~3-5s Tauri安全模型显式权限默认安全需要额外配置 Tauri前端生态任意框架任意框架 平手原生APIRust学习曲线陡Node.js熟悉 Electron社区规模快速增长中庞大成熟 Electron调试体验Chrome DevToolsChrome DevTools 平手跨平台一致性依赖系统Webview自带Chromium Electron什么时候选Tauri✅适合场景对安装包体积敏感下载量大的工具类应用需要高安全性金融、隐私敏感类应用追求极致性能启动速度、内存占用团队有Rust经验或愿意学习❌不适合场景需要复杂的原生功能深度系统集成追求像素级一致的跨平台体验团队没有Rust经验且时间紧迫需要大量现成的原生Node.js模块一个真实的迁移案例某笔记应用从Electron迁移到Tauri后迁移前 (Electron): - 安装包: 187MB - 启动内存: 245MB - 冷启动时间: 4.2s 迁移后 (Tauri): - 安装包: 4.2MB (减少 97.8%) - 启动内存: 78MB (减少 68%) - 冷启动时间: 0.8s (提升 5.25x)用户反馈“你们的软件怎么突然变快了”文末三件套1. 【源码获取】关注此系列获取后续更新后台回复**‘tauri’**获取完整源码链接。项目包含完整的 Tauri React 示例代码多窗口、系统托盘、自动更新实现GitHub Actions 自动构建配置代码签名脚本2. 【思考题】你的桌面应用需要换Tauri吗问自己三个问题用户是否抱怨过安装包太大启动速度是否影响了用户体验团队是否有能力/意愿学习Rust如果至少两个答案是是那Tauri值得你认真考虑。3. 【系列预告】下一篇《AI辅助前端开发实战》——如何用GitHub Copilot、Cursor等AI工具提升前端开发效率从代码补全到自动重构让AI成为你的编程搭档。总结Tauri不是银弹但它是桌面应用开发领域的一股清流。在这个越大越好的时代它证明了精简也是一种竞争力。从Electron到Tauri的迁移不只是技术栈的切换更是一种产品哲学的转变——把选择权还给用户让用户决定自己的电脑要运行什么。如果你正在开发桌面应用不妨给Tauri一个机会。毕竟谁不喜欢一个既轻量又安全的开发框架呢标签Tauri, Rust, 桌面应用, 轻量级, Webview, 跨平台, 前端开发参考资料Tauri 官方文档Tauri GitHubAwesome Tauri
前端技术29-Tauri实战：Rust后端、Web前端、安全架构完全指南
发布时间：2026/7/5 3:54:27
1、AI程序员系列文章2、AI面试系列文章3、AI编程系列文章目录开篇为什么我们要逃离ElectronTauri架构全景RustWebview的优雅组合架构图解核心设计理念环境搭建5分钟跑起第一个Tauri应用前置依赖创建项目项目结构解析运行第一个应用命令系统前后端通信的艺术为什么需要命令系统基础命令示例复杂类型传递窗口管理多窗口、托盘、菜单全掌握创建和管理窗口系统托盘System Tray应用菜单Menu Bar自动更新与打包分发Tauri Updater 配置代码签名重要GitHub Actions 自动构建Tauri vs Electron全方位对比什么时候选Tauri一个真实的迁移案例开篇为什么我们要逃离Electron你是否遇到过这样的痛苦场景一个简单的待办事项应用安装包体积竟然有200MB打开应用后内存占用直逼Chrome浏览器300MB起步安全漏洞频出每次Electron更新都伴随着一堆CVE公告用户抱怨“你们的软件怎么比Photoshop还大”这就像是你只想买辆自行车代步结果商家硬塞给你一辆重型卡车——功能确实强大但你真的需要吗Tauri的出现就是为了终结这种过度包装的荒诞。用Rust重写后端复用系统自带的WebviewWindows用Edge WebView2macOS用WKWebViewLinux用WebKitGTK让你的桌面应用体积缩小90%内存占用降低50%启动速度提升3倍。网上搜到的Tauri教程太少缺乏系统性实践。本文将从原理到实战给出一个零成本上手方案包含完整代码和避坑指南。Tauri架构全景RustWebview的优雅组合架构图解┌─────────────────────────────────────────────────────────────┐ │ 你的前端代码 │ │ (React/Vue/Svelte/Vanilla JS) │ ├─────────────────────────────────────────────────────────────┤ │ Tauri JS API │ │ (invoke, event, window, dialog, fs...) │ ├─────────────────────────────────────────────────────────────┤ │ Webview 渲染层 │ │ ┌──────────┬──────────┬──────────┐ │ │ │ Windows │ macOS │ Linux │ │ │ │Edge Web │ WKWebView│WebKitGTK │ │ │ │View2 │ │ │ │ │ └──────────┴──────────┴──────────┘ │ ├─────────────────────────────────────────────────────────────┤ │ Tauri Core (Rust) │ │ ┌─────────────────────┐ │ │ │ 命令路由系统 │ │ │ │ 窗口管理器 │ │ │ │ 安全策略引擎 │ │ │ │ 自动更新模块 │ │ │ └─────────────────────┘ │ ├─────────────────────────────────────────────────────────────┤ │ 操作系统 API │ │ (文件系统、通知、剪贴板、系统托盘...) │ └─────────────────────────────────────────────────────────────┘核心设计理念1. 安全优先Security FirstTauri的安全模型堪称教科书级别。每个功能都需要显式启用默认情况下你的应用被关在沙盒里——就像给熊孩子戴上手铐想搞破坏先问过我手里的权限清单。2. 轻量至上Lightweight不复刻Chromium而是直接调用系统Webview。这就好比你家装修Electron是自带发电机Tauri是直接插家里的插座——哪个更轻量一目了然。3. 前端自由Frontend AgnosticReact、Vue、Svelte、Solid、Angular甚至纯HTMLJSTauri来者不拒。你的前端技术栈不需要为桌面应用做任何妥协。环境搭建5分钟跑起第一个Tauri应用前置依赖# 1. 安装 Rust如果还没有 curl --proto https --tlsv1.2 -sSf https://sh.rustup.rs | sh # 2. 安装 Node.js推荐 v18 # 去 https://nodejs.org 下载安装包 # 3. Windows 用户需要安装 WebView2 Runtime # 下载地址https://developer.microsoft.com/microsoft-edge/webview2/⚠️避坑警告Windows 用户如果遇到无法找到 WebView2的错误先检查系统是否安装了 Edge WebView2 Runtime。Win11 自带Win10 部分版本需要手动安装。创建项目# 使用 create-tauri-app 脚手架 npm create tauri-applatest # 按照提示选择 # - 项目名称my-tauri-app # - 前端框架选择你熟悉的这里以 React TypeScript 为例 # - 包管理器npm / yarn / pnpm效率技巧如果你已经有现成的Web项目可以直接在现有项目中集成Tauri# 进入现有项目目录 cd your-existing-project # 初始化 Tauri npm install tauri-apps/cli tauri-apps/api npx tauri init项目结构解析my-tauri-app/ ├── src/ # 前端代码 │ ├── App.tsx │ └── main.tsx ├── src-tauri/ # Rust 后端代码 │ ├── Cargo.toml # Rust 依赖管理 │ ├── tauri.conf.json # Tauri 配置文件 │ ├── src/ │ │ └── main.rs # 应用入口 │ └── icons/ # 应用图标 └── package.json运行第一个应用# 开发模式热更新 npm run tauri dev # 构建生产版本 npm run tauri build看到窗口弹出的那一刻恭喜你——你已经迈出了逃离Electron的第一步命令系统前后端通信的艺术为什么需要命令系统前端JavaScript想调用Rust代码这就是命令系统的用武之地。Tauri的命令系统基于JSON-RPC类型安全、异步支持、错误处理一应俱全。基础命令示例Rust 端src-tauri/src/main.rs// 引入必要的模块 use tauri::command; // 定义一个命令 #[command] fn greet(name: str) - String { format!(你好{}欢迎来到Tauri世界, name) } // 带错误处理的命令 #[command] fn read_file_contents(path: str) - ResultString, String { std::fs::read_to_string(path) .map_err(|e| format!(读取文件失败: {}, e)) } // 异步命令适合耗时操作 #[command] async fn fetch_data(url: str) - ResultString, String { let response reqwest::get(url) .await .map_err(|e| e.to_string())?; let text response.text() .await .map_err(|e| e.to_string())?; Ok(text) } fn main() { tauri::Builder::default() .invoke_handler(tauri::generate_handler![ greet, read_file_contents, fetch_data ]) .run(tauri::generate_context!()) .expect(运行Tauri应用时出错); }前端调用React 示例import { invoke } from tauri-apps/api/tauri; // 调用简单命令 const handleGreet async () { const result await invoke(greet, { name: 开发者 }); console.log(result); // 输出: 你好开发者欢迎来到Tauri世界 }; // 调用带错误处理的命令 const handleReadFile async (filePath: string) { try { const content await invokestring(read_file_contents, { path: filePath }); console.log(文件内容:, content); } catch (error) { console.error(出错了:, error); } }; // 调用异步命令 const handleFetch async () { const data await invokestring(fetch_data, { url: https://api.example.com/data }); console.log(获取的数据:, data); };复杂类型传递// 定义数据结构 use serde::{Deserialize, Serialize}; #[derive(Serialize, Deserialize)] struct User { id: u64, name: String, email: OptionString, } #[derive(Serialize, Deserialize)] struct CreateUserRequest { name: String, email: String, } #[command] fn create_user(request: CreateUserRequest) - ResultUser, String { // 模拟数据库操作 let user User { id: 1, name: request.name, email: Some(request.email), }; Ok(user) }// 前端类型定义 interface CreateUserRequest { name: string; email: string; } interface User { id: number; name: string; email?: string; } const createNewUser async () { const request: CreateUserRequest { name: 张三, email: zhangsanexample.com }; const user await invokeUser(create_user, { request }); console.log(创建的用户:, user); };⚠️避坑警告Rust的OptionT在前端会变成T | null而不是T | undefined。如果你的TypeScript严格模式开启注意类型转换。效率技巧使用tauri-specta可以自动生成TypeScript类型定义避免手写类型出错cargo add specta # 在命令上添加 #[specta::specta] 宏 # 自动生成 types.ts 文件窗口管理多窗口、托盘、菜单全掌握创建和管理窗口use tauri::{Manager, WindowBuilder, WindowUrl}; #[command] async fn create_new_window(app: tauri::AppHandle) - Result(), String { // 创建新窗口 let new_window WindowBuilder::new( app, new-window, // 窗口唯一标识 WindowUrl::App(/settings.into()) ) .title(设置) .inner_size(800.0, 600.0) .min_inner_size(400.0, 300.0) .center() .resizable(true) .fullscreen(false) .decorations(true) // 是否显示原生窗口边框 .always_on_top(false) .build() .map_err(|e| e.to_string())?; Ok(()) } // 获取窗口并操作 #[command] fn close_window(app: tauri::AppHandle, label: str) { if let Some(window) app.get_window(label) { window.close().unwrap(); } } // 窗口间通信 #[command] fn send_to_main_window(app: tauri::AppHandle, message: str) { if let Some(main_window) app.get_window(main) { main_window.emit(message-from-child, message).unwrap(); } }系统托盘System Trayuse tauri::{SystemTray, SystemTrayMenu, SystemTrayMenuItem, SystemTrayEvent}; fn main() { // 创建托盘菜单 let tray_menu SystemTrayMenu::new() .add_item(CustomMenuItem::new(open, 打开应用)) .add_native_item(SystemTrayMenuItem::Separator) .add_item(CustomMenuItem::new(settings, 设置)) .add_native_item(SystemTrayMenuItem::Separator) .add_item(CustomMenuItem::new(quit, 退出)); let system_tray SystemTray::new().with_menu(tray_menu); tauri::Builder::default() .system_tray(system_tray) .on_system_tray_event(|app, event| { match event { SystemTrayEvent::LeftClick { position: _, size: _, .. } { // 左键点击显示/隐藏窗口 if let Some(window) app.get_window(main) { if window.is_visible().unwrap() { window.hide().unwrap(); } else { window.show().unwrap(); window.set_focus().unwrap(); } } } SystemTrayEvent::MenuItemClick { id, .. } { match id.as_str() { open { if let Some(window) app.get_window(main) { window.show().unwrap(); window.set_focus().unwrap(); } } settings { // 打开设置窗口 } quit { std::process::exit(0); } _ {} } } _ {} } }) .run(tauri::generate_context!()) .expect(error while running tauri application); }应用菜单Menu Baruse tauri::{Menu, MenuItem, Submenu, CustomMenuItem}; fn main() { // 创建菜单 let file_menu Submenu::new(文件, Menu::new() .add_item(CustomMenuItem::new(new, 新建).accelerator(CmdOrCtrlN)) .add_item(CustomMenuItem::new(open, 打开...).accelerator(CmdOrCtrlO)) .add_native_item(MenuItem::Separator) .add_item(CustomMenuItem::new(save, 保存).accelerator(CmdOrCtrlS)) .add_native_item(MenuItem::Separator) .add_item(CustomMenuItem::new(quit, 退出).accelerator(CmdOrCtrlQ)) ); let edit_menu Submenu::new(编辑, Menu::new() .add_native_item(MenuItem::Undo) .add_native_item(MenuItem::Redo) .add_native_item(MenuItem::Separator) .add_native_item(MenuItem::Cut) .add_native_item(MenuItem::Copy) .add_native_item(MenuItem::Paste) ); let menu Menu::new() .add_submenu(file_menu) .add_submenu(edit_menu); tauri::Builder::default() .menu(menu) .on_menu_event(|event| { match event.menu_item_id() { new { // 处理新建 } open { // 处理打开 } save { // 处理保存 } quit { std::process::exit(0); } _ {} } }) .run(tauri::generate_context!()) .expect(error while running tauri application); }效率技巧macOS 和 Windows 的菜单习惯不同macOS 习惯在顶部菜单栏Windows 习惯在窗口内。Tauri会自动适配但你可能需要为不同平台定制菜单内容。自动更新与打包分发Tauri Updater 配置tauri.conf.json{ tauri: { updater: { active: true, endpoints: [ https://your-server.com/updates/{{target}}/{{current_version}} ], dialog: true, pubkey: YOUR_PUBLIC_KEY_HERE } } }更新服务器响应格式{ version: 1.1.0, notes: 修复了一些bug优化了性能, pub_date: 2024-01-15T12:00:00Z, platforms: { darwin-x86_64: { signature: 签名内容, url: https://your-server.com/releases/v1.1.0/app-x86_64.app.tar.gz }, darwin-aarch64: { signature: 签名内容, url: https://your-server.com/releases/v1.1.0/app-aarch64.app.tar.gz }, windows-x86_64: { signature: 签名内容, url: https://your-server.com/releases/v1.1.0/app-x64.msi.zip } } }代码签名重要未签名的应用在 Windows 上会触发 SmartScreen 警告在 macOS 上会被 Gatekeeper 拦截。Windows 代码签名# 使用 signtool 签名 signtool sign /f certificate.pfx /p password /tr http://timestamp.digicert.com /td sha256 /fd sha256 MyApp.exemacOS 代码签名# 使用 codesign 签名 codesign --force --options runtime --sign Developer ID Application: Your Name --deep MyApp.app # 公证Notarization xcrun altool --notarize-app --primary-bundle-id com.yourcompany.app \ --username youremail.com --password app-specific-password \ --file MyApp.app.zip⚠️避坑警告macOS 10.15 要求所有分发应用必须经过公证。跳过这一步用户会看到无法验证开发者的警告。GitHub Actions 自动构建name: Release on: push: tags: - v* jobs: release: strategy: fail-fast: false matrix: platform: [macos-latest, ubuntu-latest, windows-latest] runs-on: ${{ matrix.platform }} steps: - uses: actions/checkoutv3 - name: Setup Node.js uses: actions/setup-nodev3 with: node-version: 18 - name: Setup Rust uses: dtolnay/rust-actionstable - name: Install dependencies (Ubuntu) if: matrix.platform ubuntu-latest run: | sudo apt-get update sudo apt-get install -y libgtk-3-dev libwebkit2gtk-4.0-dev libappindicator3-dev librsvg2-dev patchelf - name: Install frontend dependencies run: npm install - name: Build Tauri uses: tauri-apps/tauri-actionv0 env: GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} TAURI_PRIVATE_KEY: ${{ secrets.TAURI_PRIVATE_KEY }} TAURI_KEY_PASSWORD: ${{ secrets.TAURI_KEY_PASSWORD }} with: tagName: ${{ github.ref_name }} releaseName: App v__VERSION__ releaseBody: See the assets to download this version. releaseDraft: true prerelease: falseTauri vs Electron全方位对比维度TauriElectron胜出者安装包体积~3-5MB~150-200MB Tauri内存占用~50-80MB~150-300MB Tauri启动速度快~1s较慢~3-5s Tauri安全模型显式权限默认安全需要额外配置 Tauri前端生态任意框架任意框架 平手原生APIRust学习曲线陡Node.js熟悉 Electron社区规模快速增长中庞大成熟 Electron调试体验Chrome DevToolsChrome DevTools 平手跨平台一致性依赖系统Webview自带Chromium Electron什么时候选Tauri✅适合场景对安装包体积敏感下载量大的工具类应用需要高安全性金融、隐私敏感类应用追求极致性能启动速度、内存占用团队有Rust经验或愿意学习❌不适合场景需要复杂的原生功能深度系统集成追求像素级一致的跨平台体验团队没有Rust经验且时间紧迫需要大量现成的原生Node.js模块一个真实的迁移案例某笔记应用从Electron迁移到Tauri后迁移前 (Electron): - 安装包: 187MB - 启动内存: 245MB - 冷启动时间: 4.2s 迁移后 (Tauri): - 安装包: 4.2MB (减少 97.8%) - 启动内存: 78MB (减少 68%) - 冷启动时间: 0.8s (提升 5.25x)用户反馈“你们的软件怎么突然变快了”文末三件套1. 【源码获取】关注此系列获取后续更新后台回复**‘tauri’**获取完整源码链接。项目包含完整的 Tauri React 示例代码多窗口、系统托盘、自动更新实现GitHub Actions 自动构建配置代码签名脚本2. 【思考题】你的桌面应用需要换Tauri吗问自己三个问题用户是否抱怨过安装包太大启动速度是否影响了用户体验团队是否有能力/意愿学习Rust如果至少两个答案是是那Tauri值得你认真考虑。3. 【系列预告】下一篇《AI辅助前端开发实战》——如何用GitHub Copilot、Cursor等AI工具提升前端开发效率从代码补全到自动重构让AI成为你的编程搭档。总结Tauri不是银弹但它是桌面应用开发领域的一股清流。在这个越大越好的时代它证明了精简也是一种竞争力。从Electron到Tauri的迁移不只是技术栈的切换更是一种产品哲学的转变——把选择权还给用户让用户决定自己的电脑要运行什么。如果你正在开发桌面应用不妨给Tauri一个机会。毕竟谁不喜欢一个既轻量又安全的开发框架呢标签Tauri, Rust, 桌面应用, 轻量级, Webview, 跨平台, 前端开发参考资料Tauri 官方文档Tauri GitHubAwesome Tauri
