tauri入门

September 16, 2022

安装

首先安装 rust 和 nodejs，使用 vscode 开发时，安装 rust-analyzer 和 tauri 插件

这里使用官方脚手架来创建项目

npm create tauri-app

如果 UI 选择 vanilla 那么前端是没有配置构建和开发环境的
为了方便这里选择 vue，会自动配置 vite 并且将前端项目的开发服务器与 tauri 项目的开发环境结合起来。（否则需要手动配置）

✔ Project name · tauri-app
✔ Choose your package manager · npm
✔ Choose your UI template · vue

Done, Now run:
  cd tauri-app
  npm install
  npm run tauri dev

如果不使用脚手架，顺序是先用 npm 创建前端项目（如： vite，create-react-app）
安装 tauri 命令行工具 npm install --save-dev @tauri-apps/cli
然后通过命令行工具来初始化 npm tauri init
具体操作，参见文档

下面还是基于脚手架，脚手架配置的 script 字段如下：

json

{
    "type": "module",
    "scripts": {
        "dev": "vite",
        "build": "vite build",
        "preview": "vite preview",
        "tauri": "tauri"
    }
}

vite 相关的命令仅用于开发前端，整个 tauri 项目的开发通过 tauri 命令。

USAGE:
    npm run tauri [OPTIONS] <SUBCOMMAND>

OPTIONS:
    -h, --help       Print help information
    -v, --verbose    Enables verbose logging
    -V, --version    Print version information

SUBCOMMANDS:
    build     Tauri build
    dev       Tauri dev
    help      Print this message or the help of the given subcommand(s)
    icon      Generates various icons for all major platforms
    info      Shows information about Tauri dependencies and project configuration
    init      Initializes a Tauri project
    plugin    Manage Tauri plugins
    signer    Tauri updater signer

项目目录

+---package.json
+---vite.config.js   -|
+---index.html        |
+---public/            ╲
+---dist/              ╱
+---src/              |
|   +---App.vue      -|
|---src-tauri/
    +---cargo.toml         Cargo
    +---tauri.conf.json    项目总体配置 https://tauri.app/zh/v1/api/config/
    +---build.rs           构建配置
    +---icons/             图标资源
    +---src/
        +---main.rs        项目初始化配置（读取`tauri.conf.json`）

API

前端 API （@tauri-apps/api）

https://tauri.app/zh/v1/api/js/
可以看到有以下模块

app
cli
clipboard
dialog
event
fs
globalShortcut
http
mocks
notification
os
path
process
shell
tauri
updater
window

像这样导入

import tauri from "@tauri-apps/api";
import { invoke } from "@tauri-apps/api/tauri";

某些 tauri 模块也可以通过全局对象拿到（需要 tauri.conf.json 配置文件中 build.withGlobalTauri 设为 true）
全局对象应该仅在 vanilla 模板下使用，vite 模板是默认设置为 false 的

const tauri = window.__TAURI__.tauri;

后端 API （rust）

https://docs.rs/tauri/latest/tauri/index.html

主要是通过此文件 src-tauri/src/main.rs
通过 tauri::Builder 配置整个项目（默认配置文件tauri.conf.json也是由此引入）
https://docs.rs/tauri/latest/tauri/struct.Builder.html

前端调用后端

https://tauri.app/v1/guides/features/command/

被调用的 rust 函数定义于 src-tauri/src/main.rs，并且需要在主函数中注册

#[tauri::command] // 在这里声明函数
fn my_custom_command(invoke_message: String) -> String {
    format!(
        "I was invoked from JS, with this message: {}",
        invoke_message
    )
}
fn main() {
    tauri::Builder::default()
        .invoke_handler(tauri::generate_handler![my_custom_command]) // 在这里注册函数
        // 注册多个函数： invoke_handler(tauri::generate_handler![cmd_a, cmd_b])
        .run(tauri::generate_context!())
        .expect("error while running tauri application");
}

在前端调用时，通过一个对象来指定参数（注意下划线命名与小驼峰命名的转换），并且函数返回的是一个 Promise
如果我们在 rust 中注册一个 async 函数，由于前端本身就返回 Promise，所以调用方法完全一致。

invoke("my_custom_command", { invokeMessage: "Hello!" }).then((message) => console.log(message));

错误处理很简单，在 rust 中返回 Result 即可，Result<T,U> 的 T 和 U 对应 Promise 的 then 和 catch

rust

#[tauri::command]
fn my_custom_command() -> Result<String, String> {
  Err("This failed!".into())
  Ok("This worked!".into())
}

前后端事件通信

https://tauri.app/v1/guides/features/events

图标配置

https://tauri.app/v1/guides/features/icons

tauri 提供了命令来创建图标，无需手动适配

npm run tauri icon

窗口菜单

https://tauri.app/v1/guides/features/menu

多窗口

https://tauri.app/v1/guides/features/multiwindow

←Back to home