CodeRoadMap
首页路线题库资源库文章社区
CodeRoadMap

程序员的学习成长路线图。内容免费开放,登录后可同步路线图与课时进度。

由 程序员柏风 独立维护 · 关于作者

学习

  • 路线图
  • 课程
  • 面试题
  • 文章
  • 我

更多

  • 资源
  • 社区
  • 关于作者
  • 内容说明

© 2026 CodeRoadMap

津ICP备2026012044号-1·津公网安备12011002026155号·coderoadmap@126.com
跨平台前端入门/课时/Tauri
RawBlame
课时目录12 节

跨平台前端入门

  1. 01跨平台前端地图
  2. 02PWA 基础
  3. 03Service Worker
  4. 04Web API
  5. 05Electron
  6. 06Tauri
  7. 07移动 Web 与混合
  8. 08Flutter 概览
  9. 09Ionic 概览
  10. 10Web Components
  11. 11Lighthouse 与 DevTools
  12. 12综合练习

Tauri

Rust 壳 + Web UI;对比 Electron。

30 分钟

Tauri

Tauri 用 系统 WebView(WebView2 / WKWebView)+ Rust 后端 承载 Web UI,安装包往往比 Electron 小一个数量级。UI 仍用 html-css-essentials 与 react-essentials 那套;Rust 侧 负责窗口、文件、系统调用。

学习目标

  • 对比 Tauri 与 Electron 的架构与体积差异
  • 理解 invoke 命令:前端 ↔ Rust 边界
  • 评估团队是否需要引入 Rust 工具链

架构对比

ElectronTauri
渲染引擎捆绑 ChromiumOS 自带 WebView
后端运行时Node.jsRust
典型体积较大较小(仍含 WebView 运行时依赖)
前端栈任意 Web任意 Web(常见 Vite + React)
系统 APINode + 原生模块Rust command + 插件

Tauri 不捆绑整颗 Chromium——Windows 依赖 WebView2,macOS 用 WKWebView;部署时要确认目标机器 WebView 可用。

前端调用 Rust(概念)

Rust 侧注册命令,前端:

import { invoke } from "@tauri-apps/api/core";

const tracks = await invoke("fetch_tracks_cache");

Rust 侧实现读取本地缓存、调用 http-protocol-essentials 风格的 HTTP 客户端等——敏感逻辑放 Rust,前端只拿 DTO。

与 Electron preload 类似:最小暴露、强类型、校验输入。

与工具链衔接

  • 脚手架:create-tauri-app,常配 ft-vite 开发 UI
  • CI 需 Rust toolchain + 各平台打包(比纯 Web ft-deploy 复杂)
  • 若团队只有前端、无 Rust 维护者,Electron 的 Node 生态 可能更易招人

何时选 Tauri

倾向 Tauri:

  • 对安装包体积敏感(工具类、B 端小客户端)
  • 愿意维护 Rust 侧 API 层
  • 不需要 Electron 某款 仅 Node 可用 的遗留模块

倾向 Electron:

  • 依赖特定 Chromium 版本行为一致
  • 大量现有 Electron 插件/示例
  • 团队已熟悉 Node 主进程代码

两者 替代良好 Web 版的理由——先问用户是否只需浏览器 + PWA。

都不是

练习

  • 列表对比:Electron 与 Tauri 各三个优缺点
  • 假想「离线 tracks 阅读器」,哪些 API 放 Rust、哪些留前端
  • 查 Tauri v2 文档中 Capabilities / Permissions 一句话含义

小结

Tauri = 系统 WebView + Rust 壳;省体积,换 Rust 与 WebView 差异成本。 下一课移动 Web 与混合方案。

加载本节练习…
← 上一课Electron下一课 →移动 Web 与混合