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 JavaScript 库来调用新创建的命令， 通过 JavaScript 访问诸如窗口、文件系统等核心功能， 您可以使用自己喜欢的 JavaScript 包管理器来安装。

• npm

npm install @tauri-apps/api

• Yarn

yarn add @tauri-apps/api

• pnpm

pnpm add @tauri-apps/api

需要注意的一件重要事情是，Tauri的所有JS API都需要访问仅在浏览器中可用的API，这意味着它们只能在客户端组件中使用。如果您不需要服务器组件，可以在app/page.tsx文件的顶部添加'use client'，但在本指南中，我们将创建一个单独的组件，以便不必转换整个应用程序。

app/greet.tsx

'use client'

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

export default function Greet() {
  useEffect(() => {
    invoke<string>('greet', { name: 'Next.js' })
      .then(console.log)
      .catch(console.error)
  }, [])

  // Necessary because we will have to use Greet as a component later.
  return <></>
}

现在，我们将在app/page.tsx中的默认Home组件中使用此组件。请注意，它必须位于实际的组件树中，不能作为一个简单的函数调用，只要父组件（在这种情况下是Home组件）是一个服务器组件。

app/page.tsx

// ...
import Greet from './greet'

export default function Home() {
  return (
    <main className="flex min-h-screen flex-col items-center justify-between p-24">
      <Greet />
      ...
    </main>
  )
}

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