随着 Web 技术的不断发展,构建跨平台桌面应用程序已成为越来越多开发者的选择。目前,Electron 是最广为人知的解决方案,但它体积较大,运行时占用资源多,往往不适合注重轻量化和高性能的场景。而 Tauri 作为一款新兴框架,凭借其小巧的打包体积和原生交互能力,逐渐获得了开发者的关注。
本文将带您了解 Tauri 的基本概念、如何快速上手,并通过一个简单的实例展示 Tauri 的使用方法。
什么是 Tauri?
Tauri 是一个为构建跨平台桌面应用程序而设计的框架。它允许开发者使用现有的前端技术(如 React、Vue、Svelte 等)构建应用程序的 UI,然后通过 Rust 编写后端逻辑,从而实现高效的桌面应用。
核心特点
- 
轻量化
- 
打包后的应用程序体积通常仅为几兆。
 - 
相比 Electron,Tauri 的内存占用显著降低。
 
 - 
 - 
安全性
- 
默认配置具有强大的安全策略,例如内容安全策略(CSP)。
 - 
使用 Rust 的安全特性,减少常见的内存漏洞问题。
 
 - 
 - 
跨平台支持
- 支持 Windows、macOS 和 Linux。
 
 - 
前后端分离
- UI 使用 Web 技术,逻辑层使用 Rust,从而提升应用性能。
 
 
快速开始
接下来,我们将通过一个简单的 Tauri 项目来体验其强大之处。
环境准备
在开始之前,请确保已安装以下工具:
- 
Node.js:用于前端开发。
 - 
Rust 工具链 :通过 Rust 官网 安装。
 - 
Tauri CLI:Tauri 提供的命令行工具。
 
安装 Tauri CLI:
cargo install tauri-cli
        创建 Tauri 项目
- 
初始化前端项目: 您可以选择使用任何前端框架,这里以 Vite + Vue 为例:
npm create vite@latest tauri-demo --template vue cd tauri-demo npm install - 
添加 Tauri 模块: 在项目目录下运行以下命令:
npm install --save-dev @tauri-apps/cli @tauri-apps/api - 
初始化 Tauri 项目:
npx tauri init此命令会自动在项目中生成
src-tauri目录,其中包含 Tauri 的配置文件和后端代码。 
配置 Tauri
src-tauri/tauri.conf.json 是 Tauri 的主要配置文件,您可以在其中调整应用程序名称、窗口大小等参数。例如:
{
  "package": {
    "productName": "Tauri Demo",
    "version": "0.1.0"
  },
  "tauri": {
    "windows": [
      {
        "title": "Tauri 应用",
        "width": 800,
        "height": 600
      }
    ]
  }
}
        构建简单的 Tauri 应用
修改前端代码
在 src/App.vue 中添加一个按钮和事件绑定:
<template>
  <div>
    <h1>欢迎使用 Tauri</h1>
    <button @click="greet">向后端发送请求</button>
  </div>
</template>
<script>
import { invoke } from '@tauri-apps/api';
export default {
  methods: {
    async greet() {
      const response = await invoke('greet', { name: 'Tauri 用户' });
      alert(response);
    }
  }
};
</script>
        添加 Rust 后端代码
在 src-tauri/src/main.rs 中,定义一个简单的后端接口:
#![cfg_attr(not(debug_assertions), windows_subsystem = "windows")]
use tauri::command;
#[command]
fn greet(name: &str) -> String {
    format!("你好, {}! 这是来自 Rust 后端的消息。", name)
}
fn main() {
    tauri::Builder::default()
        .invoke_handler(tauri::generate_handler![greet])
        .run(tauri::generate_context!())
        .expect("failed to run app");
}
        运行应用程序
开发模式下启动应用:
npm run tauri dev
        此时,您会看到一个桌面应用程序窗口,并且点击按钮时能够弹出由 Rust 后端返回的消息。
打包应用程序
准备将应用程序发布到生产环境时,可以运行以下命令:
npm run tauri build
        打包后生成的安装文件位于 src-tauri/target/release/bundle 中。
更高级的功能
Tauri 还支持许多高级功能,包括但不限于:
- 
文件系统访问:读写本地文件。
 - 
多窗口管理:在应用中创建多个窗口。
 - 
自定义菜单和托盘图标。
 - 
与操作系统交互,如剪贴板操作和通知。
 
以下是一个访问文件系统的示例:
#[command]
fn read_file(path: &str) -> Result<String, String> {
    std::fs::read_to_string(path).map_err(|err| err.to_string())
}
        您可以通过前端的 invoke 方法调用此接口,并将结果显示在应用中。
对比 Electron
| 特性 | Tauri | Electron | 
|---|---|---|
| 应用体积 | 几 MB | 数十到几百 MB | 
| 内存占用 | 较低 | 较高 | 
| 安全性 | Rust 提供内存安全保障 | 无内置保障,依赖开发者 | 
| 开发语言 | 前端(任意) + Rust | 前端(任意) + Node.js | 
结论
Tauri 是构建轻量级桌面应用程序的出色工具,尤其适合需要性能和体积兼顾的场景。它结合了现代 Web 技术与 Rust 的强大能力,为开发者提供了一种高效、可靠的开发体验。如果您正在寻找 Electron 的替代方案,不妨试试 Tauri。
欢迎分享您的开发心得或遇到的问题!