阅读(663) 书签赞(0) 我要纠错

Tauri 调用指令

2023-09-19 19:56 更新

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

以下是一个简单示例：

src-tauri/src/main.rs

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

一个指令等于一个普通的 Rust 函数，只是还加上了 #[tauri::command] 宏来让其与您的 JavaScript 环境交互。

最后，我们需要让 Tauri 知悉您刚创建的指令才能让其调用。我们需要使用 .invoke_handler() 函数及 Generate_handler![] 宏来注册指令：

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 选项。

tauri.conf.json

{
  "build": {
    "beforeBuildCommand": "",
    "beforeDevCommand": "",
    "devPath": "../ui",
    "distDir": "../ui",
    "withGlobalTauri": true
  },

此选项会将已打包版本的 API 函数注入到您的前端中。

您现在可以修改您的 index.html 文件来调用您的指令：

index.html

<!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>

提示
若您想要了解更多有关 Rust 和 JavaScript 之间通信的信息，请参阅 Tauri 进程间通信指南。

以上内容是否对您有帮助：

← Tauri 创建 Rust 项目

Tauri Next.js →

写笔记

我要补充