Tauri: a framework that allows you to build cross-platform apps

[hhstore]

📖 Abstract:

• ✅ Tauri: Rust 跨平台(Windows/MacOS/Linux/iOS/Android) App 开发框架, 基于 WebView.
• ✅ v2 版本, 已支持 mobile app 开发.

💯 Related:

• ✅ #208
• ✅ #403
• ✅ #405
• ✅ #401

[hhstore]

Tauri: 跨平台 app 开发框架

• ✅️ https://tauri.app/
• ✅️ https://github.com/tauri-apps/tauri
• ✅️ Tauri 已经用了很久, 一直以为已经写过了 tauri 的介绍文档.(发现并没有!)
• ✅️ 正巧 v2 的初始化过程, 和 v1 有不少差异(踩坑). 故更新一篇.

适用场景:

• ✅️ desktop app 开发
• ✅️ mobile app 开发

核心优势:

• ✅️ 打通 rust + js 2大生态, 兼顾开发效率 和 性能.
• ✅️ 100% 复用 前端生态能力.
• ✅️ 100% 底层 OS API 操作能力, 基于 rust 这种 系统编程语言, 无所不能.

势能:

• ✅️ 随着2大生态(rust+js)持续不断繁荣, tauri 的能力也会持续爆炸.

原理:

• ✅ rust + OS 系统自带 webview 方案, 无需打包 浏览器内核. (部分低端老旧 OS平台, 需要单独安装 webview)
• ✅ 区别 electron 这种打包浏览器内核的方案.

对比 electron/react-native:

• ✅ 技术路线: 类似, 都是基于前端方案(vue.js / react.js 等) 写 UI 层.
• ✅ 优点: 包体积更小(1~2 MB), 启动更快. 相比 electron 动辄 200MB+.
• ✅ 缺点: 兼容性不如 electron, 对老 OS 支持弱.(考虑拿低端用户不当人, 这个可以忽略)

对比 flutter:

• ✅ 技术路线: 不同. flutter 是偏原生的 UI 方案.
• ✅ 优点: desktop app, 比 flutter 完备, flutter 坑非常多, 不建议使用.
• ✅ 缺点: mobile app, 中期, 不如 flutter.

[hhstore]

v2 初始化:

• https://next--tauri.netlify.app/next/mobile/development/configuration
• 有官方文档, 为何还要写教程?
• 因为有坑.

准备工作:

• https://tauri.app/v1/guides/getting-started/prerequisites

安装 cli:

• ✅️ https://tauri.app/v1/guides/getting-started/setup/integrate

v2:

• ✅️ 命令行执行: 基于 rust + cargo

cargo install tauri-cli --version "^2.0.0-alpha"

cargo tauri -h

# 查看版本:
cargo tauri -V

# 初始化:
cargo tauri init

• ✅️ 前端项目里, 执行:

# 添加依赖:
yarn add -D @tauri-apps/cli@next
yarn add @tauri-apps/api@next

# 依赖:
yarn add -D internal-ip
pnpm add -D internal-ip

# 初始化项目: 生成 tauri 目录
yarn tauri init

v1:

• ✅️ 前端项目里, 执行:

pnpm add -D @tauri-apps/cli
yarn add -D @tauri-apps/cli

# 初始化:
yarn tauri init

初始化 mobile app 目录:

• ✅️ https://next--tauri.netlify.app/next/mobile/development/mobile_workflow#generate-mobile-setup

• ✅️ 初始化 iOS/Android 目录:

# 小坑: 要设置环境变量:
TAURI_APPLE_DEVELOPMENT_TEAM="a24z" cargo tauri ios init
TAURI_APPLE_DEVELOPMENT_TEAM="a24z" cargo tauri android init

# iOS:
pnpm tauri ios init
yarn tauri ios init

# Android:
pnpm tauri android init
yarn tauri android init

本地运行+调试:

• ✅️ 运行:

# iOS:
yarn tauri ios dev [--open]

# Android
yarn tauri android dev [--open]

• ✅️ 打包 app:

yarn tauri ios build
yarn tauri android build

[hhstore]

1

[hhstore]

1

[hhstore]

1

[hhstore]

1

[hhstore]

1

[hhstore]

1