Tauri 調(diào)用指令

Tauri 為您的前端開發(fā)提供了其他系統(tǒng)原生功能。 我們將其稱作指令，這使得您可以從 JavaScript 前端調(diào)用由 Rust 編寫的函數(shù)。 由此，您可以使用性能飛快的 Rust 代碼處理繁重的任務(wù)或系統(tǒng)調(diào)用。

以下是一個(gè)簡單示例：

src-tauri/src/main.rs

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

一個(gè)指令等于一個(gè)普通的 Rust 函數(shù)，只是還加上了 #[tauri::command] 宏來讓其與您的 JavaScript 環(huán)境交互。

最后，我們需要讓 Tauri 知悉您剛創(chuàng)建的指令才能讓其調(diào)用。 我們需要使用 .invoke_handler() 函數(shù)及 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");
}

現(xiàn)在您的前端可以調(diào)用剛注冊的指令了！

使用 @tauri-apps/api JavaScript 庫來調(diào)用新創(chuàng)建的命令， 通過 JavaScript 訪問諸如窗口、文件系統(tǒng)等核心功能， 您可以使用自己喜歡的 JavaScript 包管理器來安裝。

• npm

npm install @tauri-apps/api

• Yarn

yarn add @tauri-apps/api

• pnpm

pnpm add @tauri-apps/api

需要注意的一件重要事情是，Tauri的所有JS API都需要訪問僅在瀏覽器中可用的API，這意味著它們只能在客戶端組件中使用。如果您不需要服務(wù)器組件，可以在app/page.tsx文件的頂部添加'use client'，但在本指南中，我們將創(chuàng)建一個(gè)單獨(dú)的組件，以便不必轉(zhuǎn)換整個(gè)應(yīng)用程序。

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 <></>
}

現(xiàn)在，我們將在app/page.tsx中的默認(rèn)Home組件中使用此組件。請(qǐng)注意，它必須位于實(shí)際的組件樹中，不能作為一個(gè)簡單的函數(shù)調(diào)用，只要父組件（在這種情況下是Home組件）是一個(gè)服務(wù)器組件。

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>
  )
}

提示
若您想要了解更多有關(guān) Rust 和 JavaScript 之間通信的信息，請(qǐng)參閱 Tauri 進(jìn)程間通信指南。