Rust跨平台桌面应用框架Tauri CLI的使用，Tauri CLI工具助力快速构建轻量级WebView桌面应用

Rust跨平台桌面应用框架Tauri CLI的使用，Tauri CLI工具助力快速构建轻量级WebView桌面应用

关于Tauri

Tauri是一个多语言通用系统，具有高度可组合性，允许工程师开发各种类型的应用程序。它用于使用Rust工具和HTML在Webview中渲染来构建桌面计算机应用程序。使用Tauri构建的应用程序可以附带任意数量的可选JS API/Rust API，以便Webview可以通过消息传递控制系统。实际上，开发者可以用自己的功能扩展默认API，并轻松桥接Webview和基于Rust的后端。

Tauri应用程序可以具有自定义菜单和托盘类型界面。它们可以更新，并按预期由用户操作系统管理。它们非常小，因为它们使用系统的webview。它们不附带运行时，因为最终二进制文件是从rust编译的。这使得反转Tauri应用程序不是一项简单的任务。

Tauri CLI模块

这个Rust可执行文件提供了CLI所需的所有活动的完整接口。它将在macOS、Windows和Linux上运行。

安装Tauri CLI

全局安装

cargo install tauri-cli

运行上述命令将全局安装cargo-tauri二进制文件。

作为库安装

在项目目录中运行以下Cargo命令：

cargo add tauri-cli

或者将以下行添加到您的Cargo.toml中：

tauri-cli = "2.7.1"

完整示例Demo

下面是一个使用Tauri CLI创建简单桌面应用的完整示例：

  1. 首先确保已安装Rust和Node.js环境
  2. 安装Tauri CLI（如果尚未安装）：
cargo install tauri-cli
  1. 创建新项目：
# 创建一个新的Tauri项目
cargo tauri init my-app
cd my-app
  1. 项目结构说明：
  • src-tauri/ - Rust后端代码
  • src/ - 前端代码（默认为React/Vue等框架）
  • public/ - 静态资源文件
  1. 示例前端代码（src/App.js）：
import React from 'react';

function App() {
  const greet = async () => {
    // 调用Rust后端
    const response = await window.__TAURI__.invoke('greet', { name: 'World' });
    console.log(response);
  };

  return (
    <div>
      <h1>Welcome to Tauri!</h1>
      <button onClick={greet}>Greet</button>
    </div>
  );
}

export default App;
  1. 示例Rust后端代码（src-tauri/src/main.rs）：
#[tauri::command]
fn greet(name: &str) -> 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");
}
  1. 运行开发服务器：
cargo tauri dev
  1. 构建生产版本：
cargo tauri build

这个示例展示了Tauri的基本用法，包括前端与Rust后端的通信。Tauri CLI简化了整个开发流程，从项目初始化到构建发布。


1 回复

Rust跨平台桌面应用框架Tauri CLI的使用指南

Tauri CLI简介

Tauri CLI是一个命令行工具，用于快速创建、开发和构建基于Tauri框架的跨平台桌面应用程序。Tauri允许开发者使用Web技术(HTML, CSS, JavaScript)构建轻量级的桌面应用，并通过Rust提供系统级集成。

安装Tauri CLI

首先确保已安装Rust工具链，然后运行：

cargo install tauri-cli

或者使用npm安装：

npm install --save-dev @tauri-apps/cli

基本使用方法

1. 创建新项目

cargo tauri init

这会引导你完成项目设置过程，包括：

  • 应用名称
  • 窗口标题
  • 前端dist目录
  • 开发服务器命令
  • 构建前端命令

2. 开发模式运行

cargo tauri dev

这会启动开发服务器和Tauri应用窗口，支持热重载。

3. 构建生产版本

cargo tauri build

构建完成后，可在src-tauri/target/release目录下找到生成的应用程序。

常用CLI命令

命令 描述
tauri dev 启动开发服务器
tauri build 构建生产版本
tauri info 显示环境信息
tauri init 初始化Tauri项目
tauri icon 生成应用图标

进阶功能示例

自定义窗口配置

在src-tauri/tauri.conf.json中配置窗口属性：

{
  "tauri": {
    "windows": [
      {
        "title": "My App",
        "width": 800,
        "height": 600,
        "resizable": true,
        "fullscreen": false
      }
    ]
  }
}

添加系统托盘

// src-tauri/src/main.rs
use tauri::{Manager, SystemTray, SystemTrayEvent};

fn main() {
  let tray = SystemTray::new();
  
  tauri::Builder::default()
    .system_tray(tray)
    .on_system_tray_event(|app, event| match event {
      SystemTrayEvent::LeftClick { .. } => {
        let window = app.get_window("main").unwrap();
        window.show().unwrap();
      }
      _ => {}
    })
    .run(tauri::generate_context!())
    .expect("error while running tauri application");
}

调用Rust函数

定义Rust命令：

#[tauri::command]
fn greet(name: &str) -> 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");
}

前端调用：

import { invoke } from '@tauri-apps/api/tauri'

async function greet() {
  const response = await invoke('greet', { name: 'World' })
  console.log(response) // 输出: "Hello, World!"
}

打包与分发

Tauri支持多种打包格式：

# 构建特定平台的包
cargo tauri build --target universal-apple-darwin  # macOS通用二进制
cargo tauri build --target x86_64-pc-windows-msvc # Windows
cargo tauri build --target x86_64-unknown-linux-gnu # Linux

# 构建安装程序
cargo tauri build --bundles "deb,appimage"  # Linux deb和AppImage

优势特点

  1. 轻量级 - 生成的二进制文件通常比Electron应用小很多
  2. 性能优越 - 使用系统WebView，无需捆绑Chromium
  3. 安全性强 - 内置安全最佳实践
  4. 跨平台 - 支持Windows、macOS和Linux
  5. Rust集成 - 可以轻松调用Rust代码实现高性能操作

完整示例Demo

下面是一个完整的Tauri应用示例，包含前端和Rust后端交互：

  1. 首先创建项目：
cargo tauri init
  1. 修改src-tauri/src/main.rs文件：
use tauri::{CustomMenuItem, Menu, MenuItem, Submenu};

#[tauri::command]
fn calculate_fibonacci(n: u32) -> u64 {
    match n {
        0 => 0,
        1 => 1,
        _ => calculate_fibonacci(n - 1) + calculate_fibonacci(n - 2),
    }
}

fn main() {
    // 创建自定义菜单
    let quit = CustomMenuItem::new("quit".to_string(), "退出");
    let close = CustomMenuItem::new("close".to_string(), "关闭");
    let submenu = Submenu::new(
        "文件", 
        Menu::new()
            .add_item(quit)
            .add_item(close)
    );
    let menu = Menu::new()
        .add_submenu(submenu);

    tauri::Builder::default()
        .menu(menu)
        .on_menu_event(|event| match event.menu_item_id() {
            "quit" => {
                std::process::exit(0);
            }
            "close" => {
                event.window().close().unwrap();
            }
            _ => {}
        })
        .invoke_handler(tauri::generate_handler![calculate_fibonacci])
        .run(tauri::generate_context!())
        .expect("error while running tauri application");
}
  1. 修改前端代码（通常是src/App.jsx或类似文件）：
import { useState } from 'react';
import { invoke } from '@tauri-apps/api/tauri';

function App() {
  const [number, setNumber] = useState(5);
  const [result, setResult] = useState(null);

  async function calculate() {
    const res = await invoke('calculate_fibonacci', { n: number });
    setResult(res);
  }

  return (
    <div>
      <h1>斐波那契计算器</h1>
      <input 
        type="number" 
        value={number} 
        onChange={(e) => setNumber(parseInt(e.target.value))}
      />
      <button onClick={calculate}>计算</button>
      {result && <p>斐波那契数列第{number}项是: {result}</p>}
    </div>
  );
}

export default App;
  1. 修改src-tauri/tauri.conf.json配置窗口：
{
  "tauri": {
    "windows": [
      {
        "title": "斐波那契计算器",
        "width": 400,
        "height": 300,
        "resizable": true,
        "fullscreen": false,
        "decorations": true
      }
    ]
  }
}
  1. 运行开发服务器：
cargo tauri dev
  1. 构建生产版本：
cargo tauri build

这个完整示例展示了：

  • 创建自定义菜单
  • Rust后端实现斐波那契计算
  • 前端调用Rust命令
  • 基本的窗口配置
  • 完整的开发工作流程

通过Tauri CLI，开发者可以快速搭建、开发和部署现代化的跨平台桌面应用程序，同时享受Rust的性能和安全优势。

回到顶部