What are your feelings

  • Happy
  • Normal
  • Sad

Tauri 框架

Tauri 框架简介:

Tauri 是一个框架,用于构建跨平台的桌面应用。它结合了 Rust 后端和 Web 前端,可以利用 Web 技术如 HTML、CSS 和 JavaScript 来构建 UI,同时使用 Rust 来提供本地系统功能支持。Tauri 应用的特点是轻量、安全,并且可以创建和 Electron 相似的应用,但占用的资源更少。

主要特点:

  1. 跨平台支持:支持 Windows、macOS 和 Linux。

  2. 轻量:相比 Electron,Tauri 生成的应用通常占用更少的内存和磁盘空间。

  3. 系统集成:通过 Rust 提供对系统 API 的访问,可以实现文件系统操作、窗口管理等。

  4. 安全性:Tauri 通过严格的 CSP(内容安全策略)和权限管理来增强应用的安全性。

  5. 前端灵活性:支持各种 JavaScript 框架,如 React、Vue、Svelte 等,用于构建前端界面。

工作流程:

  1. 前端部分:使用任意 JavaScript 框架构建的静态网页,通常使用 yarnnpm 来管理依赖并进行构建。

  2. 后端部分:Tauri 使用 Rust 来编写后端代码,处理系统级别的操作,生成最终的应用程序。

Tauri 的开发流程:

  1. 创建项目

    • 使用 Tauri 提供的 CLI 工具可以快速创建一个新项目,例如:

      yarn create tauri-app
  2. 配置 Tauri

    • 通过 tauri.conf.json 文件对应用进行配置,包括窗口属性、权限等。

  3. 前端构建

    • 使用 Web 技术(如 React、Vue 等)构建 UI,编译后会嵌入到 Tauri 应用中。

  4. 与系统交互

    • 使用 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 构建的。

  • 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 用户:建议安装 Build Tools for Visual Studio,以确保可以编译 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

6. 创建 Tauri 项目

  1. 创建一个新项目

    • 使用 create-tauri-app 脚手架工具创建一个新项目:

      yarn create tauri-app
    • 或者,你可以在已有的前端项目中添加 Tauri:

      yarn add tauri
  2. 进入项目目录

    cd your-tauri-app
  3. 运行开发服务器

    • 启动项目并运行开发模式:

      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 项目。

如果你还没有配置这些环境,可以参考之前提供的 Tauri 环境配置流程 来完成安装。

2. 创建 Tauri 项目

一旦环境配置完成,使用以下步骤来创建和初始化 Tauri 项目:

创建一个新的前端项目

  1. 使用 Create React App (或其他前端框架) 创建前端项目。这里以 React 为例:

    npx create-react-app my-tauri-app
    cd my-tauri-app
  2. 安装 Tauri 依赖: 在前端项目中添加 Tauri 依赖:

    yarn add tauri

初始化 Tauri 项目

  1. 初始化 Tauri 配置: 在你的前端项目根目录下运行以下命令来初始化 Tauri 配置:

    yarn tauri init

    这会创建一个 src-tauri 目录,并生成 Tauri 所需的配置文件,例如 tauri.conf.json

3. 编写前端代码

Tauri 使用标准的 Web 技术(HTML、CSS、JavaScript)来构建前端。你可以在 src 目录下编写 React、Vue 或其他前端框架的代码。

示例:创建一个简单的按钮来调用后端

在 React 中,可以这样写一个简单的按钮来调用 Tauri 后端的 API:

  1. 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;
  2. Tauri 后端(Rust)配置: 在 src-tauri/src/main.rs 中,定义一个简单的 Rust 函数,接收来自前端的调用:

    rust复制代码use tauri::command;

    #[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. 环境配置

在开始之前,请确保已经按照 Tauri 环境配置流程 完成了以下步骤:

  • 安装 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;

#[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

9. 自定义配置

可以在 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"
}

索引