Tauri 可以开发跨平台桌面应用。起先了解 Tauri 的时候，就被它「性能+包体积」的优势所吸引。正好之前有 Electron 开发经验，那不妨来尝试一下！

一、Tauri 是什么

Tauri 是一个框架，可以用于构建轻量级、安全的桌面应用程序。它与现代前端框架（如 Vue.js、React.js 或者 Svelte）一起使用，使开发者可以用自己熟悉的 Web 技术创建桌面应用。

Tauri 的主要特点包括：

  • 轻量级：Tauri 应用程序比使用 Electron 构建的应用程序更小，更快。这是因为 Tauri 使用 Rust 构建，Rust 是一种性能优越且内存安全的编程语言。
  • 安全性：Tauri 的设计考虑了安全性。它有一个内置的安全层，可以防止一些常见的攻击。
  • 跨平台：Tauri 支持在 Windows、Mac 和 Linux 上构建应用程序。

总的来说，Tauri 提供了一种高效、安全的方式来使用 Web 技术构建桌面应用程序。

前置安装

说明文档

Rust + Tauri + Yew

1
2
3
cargo install create-tauri-app
# 初始化项目
cargo create-tauri-app

如果你还没有安装Tauri CLI

1
cargo install tauri-cli

运行项目

1
cargo tauri dev

日志信息如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
Running BeforeDevCommand (`trunk serve`)
2023-03-19T12:51:19.075591Z  INFO 📦 starting build
2023-03-19T12:51:19.075822Z  INFO spawning asset pipelines
2023-03-19T12:51:19.486709Z  INFO building rust-tauri-app-ui
2023-03-19T12:51:19.486759Z  INFO copying directory path="public"
2023-03-19T12:51:19.486782Z  INFO copying & hashing css path="styles.css"
2023-03-19T12:51:19.487151Z  INFO finished copying & hashing css path="styles.css"
2023-03-19T12:51:19.487281Z  INFO finished copying directory path="public"
    Finished dev [unoptimized + debuginfo] target(s) in 0.17s
2023-03-19T12:51:19.701213Z  INFO fetching cargo artifacts
2023-03-19T12:51:19.940618Z  INFO processing WASM for rust-tauri-app-ui
2023-03-19T12:51:19.961661Z  INFO calling wasm-bindgen for rust-tauri-app-ui
2023-03-19T12:51:20.120952Z  INFO copying generated wasm-bindgen artifacts
2023-03-19T12:51:20.122868Z  INFO applying new distribution
2023-03-19T12:51:20.123718Z  INFO ✅ success
2023-03-19T12:51:20.124694Z  INFO 📡 serving static assets at -> /
2023-03-19T12:51:20.124755Z  INFO 📡 server listening at http://127.0.0.1:1420
        Info Watching /Users/jartto/Documents/Project/rust-tauri-app/src-tauri for changes...
   Compiling rust-tauri-app v0.0.0 (/Users/jartto/Documents/Project/rust-tauri-app/src-tauri)
    Finished dev [unoptimized + debuginfo] target(s) in 2.29s

效果预览

如果看到如下窗口，意味着应用已经正常启动了。
效果预览

代码说明

Tauri 为您的前端开发提供了其他系统原生功能。 我们将其称作指令，这使得您可以从 JavaScript 前端调用由 Rust 编写的函数。 由此，您可以使用性能飞快的 Rust 代码处理繁重的任务或系统调用。

以下是一个简单示例：

1
2
3
4
5
// src-tauri/src/main.rs
#[tauri::command]
fn greet(name: &str) -> String {
   format!("Hello, {}!", name)
}

一个指令等于一个普通的 Rust 函数，只是还加上了 #[tauri::command] 宏来让其与您的 JavaScript 环境交互。
最后，我们需要让 Tauri 知悉您刚创建的指令才能让其调用。 我们需要使用 .invoke_handler() 函数及 Generate_handler![] 宏来注册指令：

1
2
3
4
5
6
7
// src-tauri/src/main.rs
fn main() {
  tauri::Builder::default()
    .invoke_handler(tauri::generate_handler![greet])
    .run(tauri::generate_context!())
    .expect("error while running tauri application");
}

现在前端可以调用刚注册的指令了！
我们通常会推荐使用 @tauri-apps/api 包，但由于本指南至此还没有使用打包工具，所以需要在 tauri.conf.json 文件中启用 withGlobalTauri 选项。

1
2
3
4
5
6
7
8
{
    "build": {
    "beforeBuildCommand": "",
    "beforeDevCommand": "",
    "devPath": "../ui",
    "distDir": "../ui",
    "withGlobalTauri": true
},

此选项会将已打包版本的 API 函数注入到前端中。接下来，可以修改 index.html 文件来调用指令：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <h1 id="header">Welcome from Tauri!</h1>
    <script>
      // access the pre-bundled global API functions
      const { invoke } = window.__TAURI__.tauri

      // now we can call our Command!
      // You will see "Welcome from Tauri" replaced
      // by "Hello, World!"!
      invoke('greet', { name: 'World' })
        // `invoke` returns a Promise
        .then((response) => {
          window.header.innerHTML = response
        })
    </script>
  </body>
</html>

应用调试

应用程序调试

打包应用

执行命令

1
cargo tauri build

会报如下错误：

1
2
You must change the bundle identifier in `tauri.conf.json > tauri > bundle > identifier`. The default value `com.tauri.dev` is not allowed as it must be unique across applications.
您必须在 `tauri.conf.json > tauri > bundle > identifier` 中更改包标识符。 默认值 com.tauri.dev 是不允许的，因为它在应用程序中必须是唯一的。

按照提示修改标识符：com.tauri.dev ——> com.tauri.jartto，重新运行打包命令：

1
cargo tauri build

此时，程序已经开始编译：

1
2
3
4
5
6
7
8
9
Compiling serialize-to-javascript v0.1.1
   Compiling rust-tauri-app v0.0.0 (/Users/jartto/Documents/Project/rust-tauri-app/src-tauri)
   Compiling ignore v0.4.18
   Compiling tauri-macros v1.2.1
   Compiling serde_repr v0.1.12
   Compiling encoding_rs v0.8.32
   Compiling state v0.5.3
   Compiling embed_plist v1.2.2
    Building [=======================> ] 376/377: rust-tauri-app(bin)

我们重点关注最后两行：

1
2
3
Finished 2 bundles at:
/Users/jartto/Documents/Project/rust-tauri-app/target/release/bundle/macos/rust-tauri-app.app
/Users/jartto/Documents/Project/rust-tauri-app/target/release/bundle/dmg/rust-tauri-app_0.0.0_aarch64.dmg

顺着目录可以找到最终打包生成的文件地址，如下：
构建包地址

查看 APP 文件大小：
文件大小

选择 rust-tauri-app_0.0.0_aarch64.dmg 并双击安装，如下：
安装 APP

运行效果就不用说了，和上文效果预览一致。至此，起手项目大功告成！