🔥 BRAVE 質押池已上線 — 在錢包搜尋 BRAVE 即可委託

跨平台开发神器 Tauri:面向 Vibe Coding 学习者的入门指南

    • #32931

      📌 一、什么是 Tauri

      1.1 Tauri 的定义与定位

      Tauri(发音类似”涛瑞”)是一个开源的跨平台应用开发框架,它允许开发者使用熟悉的前端技术(HTML、CSS、JavaScript)构建桌面和移动应用程序。

      💡 一句话理解 Tauri: 用前端技术写界面,用 Rust 语言做后端,生成像原生应用一样小巧、快速、安全的跨平台 App。

      Tauri 的核心设计哲学可以概括为三个关键词:

      关键词含义
      🪶 轻量应用体积可小至 600KB,告别动辄上百 MB 的臃肿安装包
      🔐 安全基于 Rust 语言的内存安全特性,默认禁用所有危险权限
      🌍 跨平台一套代码,覆盖 Windows、macOS、Linux、iOS、Android 五大平台

      1.2 Tauri 的发展历程

      Tauri 项目诞生于 2019 年,由一群热爱开源的开发者发起。2024 年 10 月 2 日,Tauri 2.0 正式版发布,这是一个里程碑式的版本,标志着 Tauri 从”桌面专属”迈向”全平台覆盖”的新时代。

      关键时间线:

      📅 2019年     Tauri 项目启动,作为 Electron 的轻量替代方案
      📅 2022年6月  Tauri 1.0 正式发布,支持 Windows/macOS/Linux
      📅 2024年10月 Tauri 2.0 稳定版发布,新增 iOS 和 Android 支持
      📅 2025年2月  GitHub Star 突破 93,000,社区贡献者超过 2,000 人

      截至 2025 年,Tauri 已经成为桌面应用开发领域讨论度最高的新兴框架之一,其插件化架构和权限管理机制受到开发者的广泛好评。


      🏗️ 二、Tauri 的技术架构

      2.1 核心架构解析

      理解 Tauri 的架构是掌握这个框架的第一步。Tauri 采用了一种”前后端分离”的混合架构:

      ┌─────────────────────────────────────────────────────────┐
      │                    Tauri 应用架构                        │
      ├─────────────────────────────────────────────────────────┤
      │  ┌─────────────────┐     ┌─────────────────────────┐   │
      │  │   前端 (UI 层)   │ ←→ │      后端 (核心层)       │   │
      │  │                 │     │                         │   │
      │  │  HTML/CSS/JS    │     │    Rust 二进制文件      │   │
      │  │  React/Vue/     │     │    系统 API 调用        │   │
      │  │  Svelte 等      │     │    文件/网络/进程       │   │
      │  └─────────────────┘     └─────────────────────────┘   │
      │           ↓                         ↓                   │
      │  ┌─────────────────────────────────────────────────┐   │
      │  │            系统原生 WebView                      │   │
      │  │  Windows: WebView2 (Chromium 内核)              │   │
      │  │  macOS/iOS: WebKit                              │   │
      │  │  Linux: WebKitGTK                               │   │
      │  │  Android: Android WebView                       │   │
      │  └─────────────────────────────────────────────────┘   │
      └─────────────────────────────────────────────────────────┘

      架构的核心要点:

      1. 前端层:这是你作为前端开发者最熟悉的部分。你可以使用任何前端框架(React、Vue、Svelte、Angular 等)来构建用户界面,甚至纯 HTML/CSS/JS 也完全没问题。
      2. 后端层:由 Rust 语言编写的核心引擎。它负责与操作系统交互,处理文件读写、网络请求、系统通知等需要调用原生 API 的功能。
      3. WebView 层:这是 Tauri 与 Electron 最本质的区别。Tauri 不自带浏览器引擎,而是复用操作系统已经内置的 WebView 组件。这就是 Tauri 应用能够如此轻量的根本原因。

      2.2 前后端通信机制

      在 Tauri 应用中,前端(JavaScript)和后端(Rust)通过一套命令系统(Commands)事件系统(Events)进行通信:

      命令系统(同步调用):

      // 前端 JavaScript 调用后端 Rust 函数
      import { invoke } from '@tauri-apps/api/core';
      
      // 调用后端的 greet 命令
      const greeting = await invoke('greet', { name: '张三' });
      console.log(greeting); // 输出: "你好, 张三!"
      // 后端 Rust 定义命令
      #[tauri::command]
      fn greet(name: &str) -> String {
          format!("你好, {}!", name)
      }

      事件系统(异步通信):

      // 前端监听后端发送的事件
      import { listen } from '@tauri-apps/api/event';
      
      await listen('download-progress', (event) => {
          console.log(`下载进度: ${event.payload}%`);
      });

      🎯 Vibe Coding 学习者的好消息: 对于大多数简单应用,你几乎不需要编写 Rust 代码!Tauri 官方提供了丰富的 JavaScript API,可以直接调用常见的系统功能(文件对话框、系统通知、剪贴板等)。只有当你需要实现更高级的原生功能时,才需要接触 Rust。


      ⚔️ 三、Tauri vs Electron:深度对比

      3.1 为什么要和 Electron 比较?

      Electron 是目前最流行的跨平台桌面应用框架,由 GitHub 开发并开源。我们日常使用的许多知名应用都基于 Electron 构建:

      • 🟦 VS Code(微软的代码编辑器)
      • 💬 Slack(企业通讯工具)
      • 🎮 Discord(游戏社区平台)
      • 🎨 Figma 桌面版(设计工具)
      • 📝 Notion 桌面版(笔记工具)

      Electron 经过十余年的发展,生态成熟,文档丰富,是久经考验的可靠选择。然而,Electron 也有一个广为人知的”原罪”——它太重了

      3.2 核心差异对比

      对比维度Tauri 🦀Electron ⚛️
      后端语言RustNode.js (JavaScript)
      渲染引擎系统原生 WebView自带完整 Chromium 浏览器
      应用体积通常 < 10 MB,最小可达 600KB通常 > 100 MB,基础空项目约 120-150 MB
      内存占用约 30-50 MB约 150-300 MB
      启动速度< 0.5 秒1-2 秒
      移动端支持✅ 原生支持 iOS 和 Android❌ 仅支持桌面端
      安全模型默认禁用所有权限,按需开启默认开放,需手动限制
      学习曲线中等(可选择性学习 Rust)较低(纯 JavaScript 生态)
      生态成熟度快速成长中,插件体系完善非常成熟,NPM 生态全覆盖
      跨平台渲染一致性可能存在细微差异(不同 WebView 引擎)完全一致(统一 Chromium)

      来自真实项目的数据: 一个生产力应用团队报告称,从 Electron 迁移到 Tauri 后,安装包大小从 120MB 降至 8MB,冷启动时间缩短了 70%,用户反馈电池续航也得到明显改善。

      3.3 为什么 Electron 这么”重”?

      这要从 Electron 的架构说起。每一个 Electron 应用都会打包以下组件:

      Electron 应用包含:
      ├── 完整的 Chromium 浏览器内核(约 80-100 MB)
      ├── 完整的 Node.js 运行时(约 20-40 MB)
      ├── V8 JavaScript 引擎
      └── 你的应用代码(可能只有几百 KB)

      这意味着用户每安装一个 Electron 应用,就相当于安装了一个”定制版 Chrome 浏览器”。如果用户同时运行多个 Electron 应用,每个应用都会加载自己独立的 Chromium 实例,内存占用叠加起来相当可观。

      相比之下,Tauri 的策略是:

      Tauri 应用包含:
      ├── 精简的 Rust 二进制核心(几百 KB 到几 MB)
      ├── 你的前端代码
      └── 调用系统已有的 WebView(无需打包)

      3.4 如何选择?

      选择 Tauri 的情况:

      • ✅ 你对应用体积和性能有较高要求
      • ✅ 你需要同时支持桌面和移动端
      • ✅ 安全性是项目的重要考量
      • ✅ 你愿意学习一些 Rust 基础知识
      • ✅ 你正在开发新项目,没有历史包袱

      选择 Electron 的情况:

      • ✅ 你的团队只有 JavaScript 技术栈
      • ✅ 你需要使用大量现有的 NPM 包
      • ✅ 你需要保证所有平台渲染效果完全一致
      • ✅ 你的项目已经基于 Electron,迁移成本太高
      • ✅ 你需要使用最新的 Web API 特性

      📊 2025 年的市场格局: 根据 Stack Overflow 的数据,Electron 仍然占据约 60% 的跨平台应用市场份额。但 Tauri 的增长势头迅猛,2024-2025 年间采用率同比增长 35%。可以预见,未来几年 Tauri 将在轻量级应用和移动端应用场景中占据越来越重要的位置。


      🚀 四、Tauri 2.0 核心新特性

      2024 年 10 月发布的 Tauri 2.0 是一次重大升级,被官方称为”移动端更新(The Mobile Update)“,但它的改进远不止移动端支持。

      4.1 移动端全面支持(iOS & Android)

      这是 Tauri 2.0 最令人兴奋的特性。现在,你可以用同一套代码库开发覆盖五大平台的应用:

      Tauri 2.0 支持的平台:
      ├── 🪟 Windows
      ├── 🍎 macOS
      ├── 🐧 Linux
      ├── 📱 iOS(新增)
      └── 🤖 Android(新增)

      移动端开发的技术实现:

      • Tauri 通过集成 cargo-mobile2 库来实现跨平台移动端工具链
      • 移动端使用各平台原生的 WebView 组件渲染前端界面
      • 支持使用 Swift(iOS)Kotlin(Android) 编写平台特定的原生代码

      已支持的移动端原生 API:

      功能类别具体能力
      📢 通知系统推送通知
      💬 对话框原生弹窗、确认框、选择器
      📷 条形码扫描QR 码、EAN-13 等多种格式
      🔐 生物认证指纹识别、面容识别
      📍 地理位置GPS 定位、海拔、航向、速度追踪
      📋 剪贴板复制粘贴
      🔗 深度链接URL Scheme 唤起应用
      📡 NFC近场通信读写

      ⚠️ 当前限制: 移动端开发体验仍在持续优化中。此外,iOS/Android 的小组件(Widget)功能尚未支持,社区正在积极推进这一特性。

      4.2 全新插件系统

      Tauri 2.0 对插件架构进行了重大重构。许多以前内置的功能被移至官方插件,这带来了几个好处:

      1. 按需加载:只安装你需要的功能,应用更轻量
      2. 独立更新:插件可以独立于核心框架更新,迭代更快
      3. 社区贡献更容易:降低了为 Tauri 贡献代码的门槛

      官方插件示例:

      @tauri-apps/plugin-fs          # 文件系统操作
      @tauri-apps/plugin-dialog      # 系统对话框
      @tauri-apps/plugin-shell       # 执行系统命令
      @tauri-apps/plugin-http        # HTTP 客户端
      @tauri-apps/plugin-notification # 系统通知
      @tauri-apps/plugin-clipboard   # 剪贴板操作
      @tauri-apps/plugin-barcode-scanner # 条形码扫描
      @tauri-apps/plugin-biometric   # 生物认证
      @tauri-apps/plugin-geolocation # 地理位置
      @tauri-apps/plugin-nfc         # NFC 功能

      4.3 Swift 和 Kotlin 原生绑定

      对于需要深度访问平台特性的开发者,Tauri 2.0 提供了 Swift(iOS/macOS)Kotlin(Android) 的原生绑定能力:

      // iOS 插件示例 (Swift)
      import Tauri
      
      class MyPlugin: Plugin {
          @objc public func getDeviceInfo(_ invoke: Invoke) {
              let deviceModel = UIDevice.current.model
              invoke.resolve(["model": deviceModel])
          }
      }
      // Android 插件示例 (Kotlin)
      package com.example.plugin
      
      import app.tauri.plugin.Plugin
      
      class MyPlugin: Plugin() {
          @Command
          fun getDeviceInfo(invoke: Invoke) {
              val model = android.os.Build.MODEL
              invoke.resolve(mapOf("model" to model))
          }
      }

      这意味着你可以复用已有的 iOS/Android 原生代码,将其无缝集成到 Tauri 应用中。

      4.4 移动端热模块替换(HMR)

      在 Tauri 1.x 时代,热模块替换仅限于桌面端开发。Tauri 2.0 将这一能力扩展到了移动端模拟器和真机设备

      • 修改前端代码后,无需重新编译整个应用
      • 实时在设备或模拟器上预览变更
      • 大幅提升移动端开发效率

      4.5 安全性升级

      Tauri 2.0 的核心架构和主要变更经过了 Radically Open Security 的独立安全审计,审计工作由 NLNet 通过 NGI 项目资助

      Tauri 的安全模型特点:

      Electron 的安全模型:默认开放,手动关闭
           ┌──────────────────────────────┐
           │  所有 API 默认可用 (危险!)   │
           │  需要开发者主动添加限制      │
           └──────────────────────────────┘
      
      Tauri 的安全模型:默认关闭,按需开启 ✅
           ┌──────────────────────────────┐
           │  所有敏感 API 默认禁用        │
           │  通过配置显式授权所需权限     │
           └──────────────────────────────┘

      这种基于能力的权限系统(Capability-based Permission System)从设计层面减少了攻击面,使安全审计更加简单直接。


      🛠️ 五、开发环境搭建

      5.1 系统要求

      通用要求(所有平台):

      • Node.js:18.0 或更高版本
      • Rust:通过 rustup 安装最新稳定版
      • 包管理器:npm、yarn 或 pnpm

      平台特定要求:

      平台额外要求
      🪟 WindowsWebView2(Windows 10/11 通常已预装)、Visual Studio Build Tools
      🍎 macOSXcode Command Line Tools
      🐧 Linuxwebkit2gtk、相关开发库
      📱 iOS仅 macOS 可开发,需要完整安装 Xcode(非仅 Command Line Tools)
      🤖 AndroidAndroid Studio、Android SDK、NDK

      5.2 快速创建项目

      使用 create-tauri-app 脚手架:

      # 使用 npm
      npm create tauri-app@latest
      
      # 使用 yarn
      yarn create tauri-app
      
      # 使用 pnpm
      pnpm create tauri-app

      脚手架会引导你选择:

      1. 项目名称
      2. 前端框架(Vanilla JS、React、Vue、Svelte、Angular、SolidJS 等)
      3. 包管理器
      4. TypeScript 或 JavaScript

      项目结构预览:

      my-tauri-app/
      ├── src/                    # 前端源代码
      │   ├── main.js            # 入口文件
      │   └── style.css          # 样式文件
      ├── src-tauri/             # Tauri/Rust 后端代码
      │   ├── src/
      │   │   └── main.rs        # Rust 主程序
      │   ├── tauri.conf.json    # Tauri 配置文件
      │   ├── Cargo.toml         # Rust 依赖配置
      │   └── capabilities/       # 权限配置目录
      ├── package.json
      └── index.html

      5.3 开发命令

      # 启动开发服务器(带热重载)
      npm run tauri dev
      
      # 构建生产版本
      npm run tauri build
      
      # 移动端开发(需要额外配置)
      npm run tauri android dev
      npm run tauri ios dev

      💡 六、Vibe Coding 与 Tauri

      6.1 什么是 Vibe Coding?

      Vibe Coding 是一种以快速原型开发、直觉驱动、注重创意表达的编程风格。它强调:

      • 🎨 快速实现想法:不拘泥于最佳实践,先让东西跑起来
      • 🧪 实验性探索:尝试各种可能性,从失败中学习
      • 🎯 结果导向:关注最终效果,而非代码完美度
      • 🤖 善用 AI 工具:利用 Copilot、ChatGPT 等 AI 辅助开发

      6.2 为什么 Tauri 适合 Vibe Coding?

      1. 低门槛入门

      对于已经熟悉前端开发的 Vibe Coder 来说,Tauri 几乎没有额外的学习成本:

      // 就像写普通前端代码一样简单
      import { message } from '@tauri-apps/plugin-dialog';
      
      // 调用系统对话框
      await message('Hello from Tauri!', { title: '我的应用', kind: 'info' });

      2. 不一定需要 Rust

      对于基础应用,Tauri 官方封装的 JavaScript API 已经足够:

      常见需求Tauri 提供的 JS API
      文件读写@tauri-apps/plugin-fs
      打开/保存对话框@tauri-apps/plugin-dialog
      系统通知@tauri-apps/plugin-notification
      执行系统命令@tauri-apps/plugin-shell
      HTTP 请求@tauri-apps/plugin-http
      剪贴板@tauri-apps/plugin-clipboard

      只有当你需要实现这些 API 无法覆盖的高级功能时,才需要接触 Rust。而且,借助 AI 工具,即使是 Rust 新手也能完成许多任务。

      3. 快速看到成果

      Tauri 的热重载功能让你可以实时看到修改效果,非常适合快速迭代的开发风格。从创建项目到运行第一个窗口,可能只需要几分钟。

      4. 真正的”应用感”

      与纯 Web 应用不同,Tauri 应用运行在独立窗口中,可以:

      • 自定义标题栏
      • 访问本地文件系统
      • 发送系统通知
      • 常驻后台(系统托盘)
      • 调用原生系统 API

      这让你的创意项目看起来更专业、更有”桌面应用”的质感。

      6.3 Vibe Coding 实践建议

      1. 从简单项目开始
        • 用 Tauri 做一个 Markdown 笔记本
        • 做一个本地图片浏览器
        • 做一个简单的待办事项应用
      2. 善用 AI 辅助
        • 让 AI 帮你生成 Tauri 配置文件
        • 遇到 Rust 代码时,让 AI 解释和修改
        • 使用 AI 解决构建报错
      3. 拥抱官方插件
        • 优先使用官方插件实现功能
        • 查阅插件文档,通常有完整的代码示例
      4. 渐进式学习 Rust
        • 不必一开始就精通 Rust
        • 可以从读懂示例代码开始
        • 遇到需要自定义的场景再深入学习

      🔗 七、学习资源与社区

      7.1 官方资源

      资源链接
      📖 官方文档(英文)v2.tauri.app
      📖 官方文档(中文)v2.tauri.org.cn
      💻 GitHub 仓库github.com/tauri-apps/tauri
      💬 Discord 社区Tauri 官方 Discord 服务器

      7.2 学习路径建议

      阶段 1: 基础入门(1-2 周)
      ├── 熟悉前端开发(如果还不会的话)
      ├── 安装开发环境
      ├── 创建第一个 Tauri 项目
      └── 了解项目结构和配置文件
      
      阶段 2: 功能探索(2-4 周)
      ├── 学习使用官方 JavaScript API
      ├── 尝试各种官方插件
      ├── 构建一个完整的小项目
      └── 学习打包和分发应用
      
      阶段 3: 进阶提升(持续)
      ├── 学习 Rust 基础语法
      ├── 编写自定义 Tauri 命令
      ├── 开发自定义插件
      ├── 探索移动端开发
      └── 研究性能优化

      📝 八、总结与展望

      8.1 核心要点回顾

      1. Tauri 是什么:一个使用 Rust 构建后端、复用系统 WebView 渲染前端的跨平台应用框架
      2. 为什么选择 Tauri:轻量(应用体积小)、安全(默认最小权限)、跨平台(支持五大操作系统)
      3. 与 Electron 的区别:不打包浏览器引擎,体积可缩小 90% 以上,内存占用降低 60-80%
      4. Tauri 2.0 亮点:移动端支持、新插件系统、Swift/Kotlin 绑定、增强的安全审计
      5. Vibe Coding 友好:前端技术栈无缝衔接,可选择性学习 Rust,快速出成果

      8.2 未来展望

      Tauri 正在快速成长为桌面和移动应用开发的主流选择之一。截至 2025 年初,其 GitHub Star 已突破 93,000,社区活跃度持续攀升。

      可以预见的发展方向:

      • 📱 移动端开发体验持续优化
      • 🧩 插件生态更加丰富
      • 🚀 性能和启动速度进一步提升
      • 🔧 开发工具链更加完善
      • 🌐 更广泛的企业级应用采用

      对于 Vibe Coding 学习者来说,Tauri 提供了一个绝佳的机会:用你已经熟悉的前端技能,创造出真正的跨平台原生应用。无论你是想做一个小工具满足个人需求,还是希望开发一款面向用户的产品,Tauri 都值得你投入时间去学习和探索。


      🚀 开始你的 Tauri 之旅吧!

      npm create tauri-app@latest

  • 抱歉,回覆主題必需先登入。