Tauri框架:轻松构建跨平台桌面应用

1,155 阅读2分钟

什么是Tauri框架?

Tauri是一个开源框架,允许开发者使用Web技术(如HTML、CSS和JavaScript)来构建高性能的本地桌面应用程序。它支持跨平台开发,包括Windows、macOS和Linux,并提供了访问底层操作系统功能的能力。

Tauri的主要优点

  • 跨平台支持:支持多个操作系统。
  • 轻量级:比Electron更小巧,因为它使用系统的WebView。
  • 高性能:与系统WebView集成,提供更好的性能。
  • 灵活性:支持多种前端框架,并允许使用Rust扩展功能。

Hello World示例

以下是一个简单的示例,展示如何使用Tauri构建一个桌面应用程序。

步骤1:安装Rust和Tauri CLI

首先,确保你的计算机上安装了Rust环境。然后,安装Tauri CLI:

bash
cargo install tauri-cli

步骤2:创建Tauri项目

使用Tauri CLI创建一个新项目:

bash
cargo create-tauri-app myapp

步骤3:编写Rust后端代码

src-tauri/src/main.rs中添加以下Rust代码:

rust
use tauri::{Builder, Window};

#[tauri::command]
fn greet(name: &str) -> String {
    format!("Hello, {}!", name)
}

fn main() {
    Builder::default()
        .invoke_handler(tauri::generate_handler![greet])
        .run(tauri::generate_context!())
        .expect("error while running tauri application");
}

步骤4:编写前端代码

src/index.html中添加以下HTML和JavaScript代码:

xml
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Hello World</title>
</head>
<body>
    <h1 id="header">Welcome from Tauri!</h1>
    <script>
        const { invoke } = window.__TAURI__.tauri;
        invoke('greet', { name: 'World' })
            .then((response) => {
                document.getElementById('header').innerHTML = response;
            });
    </script>
</body>
</html>

步骤5:运行应用程序

在项目根目录下运行以下命令:

bash
cargo tauri dev

这将启动你的Tauri应用程序,你将看到一个窗口显示“Hello, World!”。

扩展案例:使用Tauri访问文件系统

除了基本的Hello World示例,Tauri还允许你访问文件系统。以下是一个简单的示例,展示如何使用Tauri读取文件内容:

Rust后端代码

rust
use tauri::{Builder, Window};
use std::fs;

#[tauri::command]
fn read_file(path: &str) -> String {
    match fs::read_to_string(path) {
        Ok(content) => content,
        Err(err) => format!("Error reading file: {}", err),
    }
}

fn main() {
    Builder::default()
        .invoke_handler(tauri::generate_handler![read_file])
        .run(tauri::generate_context!())
        .expect("error while running tauri application");
}

前端代码

javascript
const { invoke } = window.__TAURI__.tauri;
invoke('read_file', { path: 'example.txt' })
    .then((content) => {
        console.log(content);
    });