Tauri 是一个框架,用于构建跨平台的桌面应用。它结合了 Rust 后端和 Web 前端,可以利用 Web 技术如 HTML、CSS 和 JavaScript 来构建 UI,同时使用 Rust 来提供本地系统功能支持。Tauri 应用的特点是轻量、安全,并且可以创建和 Electron 相似的应用,但占用的资源更少。
主要特点:
-
跨平台支持:支持 Windows、macOS 和 Linux。
-
轻量:相比 Electron,Tauri 生成的应用通常占用更少的内存和磁盘空间。
-
系统集成:通过 Rust 提供对系统 API 的访问,可以实现文件系统操作、窗口管理等。
-
安全性:Tauri 通过严格的 CSP(内容安全策略)和权限管理来增强应用的安全性。
-
前端灵活性:支持各种 JavaScript 框架,如 React、Vue、Svelte 等,用于构建前端界面。
工作流程:
-
前端部分:使用任意 JavaScript 框架构建的静态网页,通常使用
yarn
或npm
来管理依赖并进行构建。 -
后端部分:Tauri 使用 Rust 来编写后端代码,处理系统级别的操作,生成最终的应用程序。
Tauri 的开发流程:
-
创建项目:
-
使用 Tauri 提供的 CLI 工具可以快速创建一个新项目,例如:
yarn create tauri-app
-
-
配置 Tauri:
-
通过
tauri.conf.json
文件对应用进行配置,包括窗口属性、权限等。
-
-
前端构建:
-
使用 Web 技术(如 React、Vue 等)构建 UI,编译后会嵌入到 Tauri 应用中。
-
-
与系统交互:
-
使用 Tauri 提供的 API,可以从前端调用后端 Rust 代码,进行如文件访问等系统操作。
-
与 Electron 的比较:
-
体积:Tauri 的应用体积相较于 Electron 通常小很多,因为它不包含完整的 Chromium 浏览器,而是使用系统已有的 Webview。
-
性能:由于 Rust 的高效性和 Webview 的精简,Tauri 应用通常运行更快,占用的内存也更少。
-
安全:Tauri 注重应用安全性,有更严格的安全策略,而 Electron 在权限管理方面相对宽松。
Tauri 特别适合对应用体积和性能要求较高,且开发者希望利用现有 Web 技术栈来构建跨平台桌面应用的场景。
Tauri 框架环境配置流程:
Tauri 框架的环境配置流程涉及到安装前端开发环境、Rust 工具链,以及 Tauri 自身的一些依赖。以下是详细的环境配置流程:
1. 系统要求
-
操作系统:
-
Windows、macOS 或 Linux
-
-
前端开发工具:
-
Node.js (包括 npm 或 Yarn)
-
2. 安装 Node.js 和 Yarn
-
Node.js:需要安装 Node.js,因为 Tauri 应用的前端是使用 JavaScript 构建的。
-
可以从 下载并安装最新的 LTS 版本。
-
-
Yarn:推荐使用 Yarn 作为包管理工具,安装 Yarn 可以使用 npm:
npm install -g yarn
3. 安装 Rust 工具链
Tauri 使用 Rust 来构建后端逻辑,所以需要安装 Rust 工具链:
-
安装 Rust:
-
在终端中运行以下命令来安装 Rust:
curl --proto '=https' --tlsv1.2 -sSf https://sh.rustup.rs | sh
-
之后会提示安装,按提示进行即可。
-
安装完成后,运行以下命令来确保 Rust 正确安装:
rustc --version
-
Windows 用户:建议安装 ,以确保可以编译 Rust 项目。
-
4. 安装 Tauri CLI
-
Tauri CLI:Tauri 提供了 CLI 工具来管理项目的创建和构建。可以使用以下命令通过 Cargo 安装 Tauri CLI:
cargo install tauri-cli
-
检查 Tauri CLI 安装:
tauri --version
5. 安装其他依赖
Tauri 依赖系统的一些编译工具和包管理工具,取决于操作系统:
macOS
-
Homebrew:建议使用 Homebrew 来安装一些依赖:
brew install pkg-config
brew install libwebkit2gtk -
也可以使用 Xcode Command Line Tools:
xcode-select --install
Linux
-
Debian/Ubuntu 系列:
sudo apt update
sudo apt install libwebkit2gtk-4.0-dev build-essential curl -
Fedora 系列:
sudo dnf install webkit2gtk3-devel @development-tools
Windows
-
安装 。
-
确保安装路径中包含
CMake
。
6. 创建 Tauri 项目
-
创建一个新项目:
-
使用
create-tauri-app
脚手架工具创建一个新项目:yarn create tauri-app
-
或者,你可以在已有的前端项目中添加 Tauri:
yarn add tauri
-
-
进入项目目录:
cd your-tauri-app
-
运行开发服务器:
-
启动项目并运行开发模式:
yarn tauri dev
-
这将同时启动前端开发服务器和 Tauri 后端,使你可以在桌面应用窗口中看到开发版本的 UI。
-
7. 配置 Tauri 项目
Tauri 项目配置通过 src-tauri/tauri.conf.json
文件进行,可以在该文件中配置应用窗口的属性、应用程序的名称、系统权限等。
8. 构建发布版本
-
构建一个可分发的发布版本:
yarn tauri build
-
这个命令将生成应用的可执行文件,并将其打包为跨平台可用的格式,例如
.app
(macOS)、.exe
(Windows)或.AppImage
(Linux)。
常见问题和建议
-
Rust 更新:Rust 工具链需要保持更新,可以使用以下命令来升级:
rustup update
-
Tauri 更新:如果 Tauri CLI 版本落后,可以使用以下命令来升级:
cargo install tauri-cli --force
-
权限配置:确保正确设置
tauri.conf.json
中的权限,否则在调用系统功能时可能会遇到问题。
通过以上步骤,你就可以成功配置 Tauri 的开发环境,并开始创建跨平台的桌面应用了。
Tauri 框架开发入门:
Tauri 框架的开发入门主要包括创建一个基本的桌面应用、配置前端与后端、以及构建和运行应用。以下是 Tauri 开发入门的详细步骤:
1. 环境配置
在开始之前,确保按照以下步骤安装了必要的开发工具:
-
安装 Node.js 和 Yarn:用于管理前端依赖。
-
安装 Rust 工具链:用于编写后端逻辑。
-
安装 Tauri CLI:用于管理 Tauri 项目。
如果你还没有配置这些环境,可以参考之前提供的 来完成安装。
2. 创建 Tauri 项目
一旦环境配置完成,使用以下步骤来创建和初始化 Tauri 项目:
创建一个新的前端项目
-
使用 Create React App (或其他前端框架) 创建前端项目。这里以 React 为例:
npx create-react-app my-tauri-app
cd my-tauri-app -
安装 Tauri 依赖: 在前端项目中添加 Tauri 依赖:
yarn add tauri
初始化 Tauri 项目
-
初始化 Tauri 配置: 在你的前端项目根目录下运行以下命令来初始化 Tauri 配置:
yarn tauri init
这会创建一个
src-tauri
目录,并生成 Tauri 所需的配置文件,例如tauri.conf.json
。
3. 编写前端代码
Tauri 使用标准的 Web 技术(HTML、CSS、JavaScript)来构建前端。你可以在 src
目录下编写 React、Vue 或其他前端框架的代码。
示例:创建一个简单的按钮来调用后端
在 React 中,可以这样写一个简单的按钮来调用 Tauri 后端的 API:
-
在
src/App.js
文件中,添加一个按钮来调用 Tauri API:import React from 'react';
import './App.css';
import { invoke } from '@tauri-apps/api';
function App() {
const handleClick = async () => {
const message = await invoke('greet', { name: 'Tauri' });
alert(message);
};
return (
<div className="App">
<button onClick={handleClick}>Click me to call Rust API</button>
</div>
);
}
export default App; -
Tauri 后端(Rust)配置: 在
src-tauri/src/main.rs
中,定义一个简单的 Rust 函数,接收来自前端的调用:rust复制代码use tauri::command;
fn greet(name: String) -> String {
format!("Hello, {}!", name)
}
fn main() {
tauri::Builder::default()
.invoke_handler(tauri::generate_handler![greet])
.run(tauri::generate_context!())
.expect("error while running tauri application");
}这段代码定义了一个名为
greet
的命令,当前端调用时,会返回一个格式化的字符串。
4. 运行开发模式
完成前端和后端代码编写后,启动开发模式以查看应用:
yarn tauri dev
此命令将启动一个开发服务器,打开 Tauri 应用窗口,你可以在其中看到你的前端界面,并且通过按钮与 Rust 后端进行交互。
5. 构建生产版本
当你准备好将应用发布时,可以使用以下命令来构建生产版本:
yarn tauri build
这个命令将生成可执行文件,根据不同的操作系统,生成 .app
(macOS)、.exe
(Windows)或 .AppImage
(Linux)格式的文件。
6. 配置和自定义 Tauri 项目
在 src-tauri/tauri.conf.json
中,你可以配置应用的各种选项,例如窗口大小、权限、图标等。以下是一些常见的配置项:
-
窗口配置:可以在
tauri.conf.json
中配置窗口的大小、标题等:"windows": [
{
"title": "My Tauri App",
"width": 800,
"height": 600
}
] -
图标配置:为应用设置图标:
"icon": "path/to/icon.png"
-
权限管理:你可以配置应用的权限,例如访问文件系统、调用外部命令等。
7. 调用 Rust 后端 API
除了调用简单的 greet
函数,你还可以定义更多的 API 和命令,以便前端和后端进行复杂的交互。Tauri 提供了强大的命令调用功能,支持异步操作、文件系统访问等。你可以通过 @tauri-apps/api
包中的不同 API 来实现这些功能。
例如,调用文件系统:
import { readTextFile } from '@tauri-apps/api/fs';
const fileContent = await readTextFile('path/to/file.txt');
console.log(fileContent);
在后端使用 Rust 进行更复杂的操作时,只需在 main.rs
中定义更多的命令并调用。
8. 常见问题和调试
-
权限问题:Tauri 提供了详细的权限配置,确保正确设置后端和前端权限,避免权限问题导致的错误。
-
调试:使用
yarn tauri dev
启动时,Tauri 会自动打开一个调试窗口,可以在其中查看应用的日志和调试信息。
9. 部署和发布
完成开发后,你可以将 Tauri 应用打包并发布到各大平台(Windows、macOS、Linux)。在构建生产版本时,可以将生成的安装包分发给用户,或者上传到应用商店(如 macOS 的 App Store 或 Windows Store)。
通过以上步骤,可以顺利入门 Tauri 框架,开发一个简单的桌面应用,进一步学习如何集成更多的功能和细节。Tauri 提供了强大的扩展性,你可以根据需求添加更多的前端和后端交互。
Tauri 框架开发简单示例:
下面是一个简单的 Tauri 框架开发示例,展示如何创建一个基本的 Tauri 应用,它结合了前端 React 和后端 Rust,前端通过按钮调用后端的 Rust 函数。
1. 环境配置
在开始之前,请确保已经按照 完成了以下步骤:
-
安装 Node.js 和 Yarn。
-
安装 Rust 工具链。
-
安装 Tauri CLI。
2. 创建前端项目(React)
首先,使用 Create React App 创建一个新的 React 项目:
npx create-react-app my-tauri-app
cd my-tauri-app
3. 安装 Tauri 依赖
在 React 项目中安装 Tauri 依赖:
yarn add tauri
4. 初始化 Tauri 项目
初始化 Tauri 配置:
yarn tauri init
此命令会创建一个 src-tauri
文件夹,包含 Tauri 的配置文件和 Rust 后端代码。
5. 编写前端代码
打开 src/App.js
,修改为以下内容,添加一个按钮来调用 Tauri 后端的 greet
函数:
import React from 'react';
import './App.css';
import { invoke } from '@tauri-apps/api';
function App() {
const handleClick = async () => {
const message = await invoke('greet', { name: 'Tauri' });
alert(message);
};
return (
<div className="App">
<button onClick={handleClick}>Click me to call Rust API</button>
</div>
);
}
export default App;
6. 编写 Rust 后端代码
打开 src-tauri/src/main.rs
,在 main.rs
中添加一个简单的 Rust 函数,接收前端的调用:
rust复制代码use tauri::command;
fn greet(name: String) -> String {
format!("Hello, {}!", name)
}
fn main() {
tauri::Builder::default()
.invoke_handler(tauri::generate_handler![greet])
.run(tauri::generate_context!())
.expect("error while running tauri application");
}
在这里,我们定义了一个名为 greet
的 Rust 函数,它接受一个字符串并返回一个格式化的问候信息。
7. 运行开发模式
启动开发模式来查看应用效果:
yarn tauri dev
此命令将启动前端开发服务器和 Tauri 后端,并在桌面上打开一个窗口。在此窗口中,你将看到一个按钮,点击按钮时,前端会调用 Rust 后端的 greet
函数,并显示返回的问候信息。
8. 构建生产版本
当应用开发完成后,可以通过以下命令构建生产版本:
yarn tauri build
这将创建一个独立的可执行文件,具体格式取决于你的操作系统(.exe
for Windows, .app
for macOS, .AppImage
for Linux)。
完整示例项目结构:
css复制代码my-tauri-app/
├── node_modules/
├── public/
├── src/
│ ├── App.css
│ ├── App.js
│ └── index.js
├── src-tauri/
│ ├── Cargo.toml
│ ├── src/
│ │ └── main.rs
│ ├── tauri.conf.json
├── package.json
└── yarn.lock
. 自定义配置
可以在 src-tauri/tauri.conf.json
文件中进行自定义配置,例如修改窗口大小、图标等:
{
"package": {
"productName": "My Tauri App",
"version": "1.0.0"
},
"windows": [
{
"title": "My Tauri App",
"width": 800,
"height": 600,
"resizable": false
}
],
"icon": "src-tauri/icons/icon.png"
}