Tauri 调用指令

2023-09-21 14:38 更新

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 包管理器来安装。

安装了该库后,我们现在可以创建一个新的Qwik组件。我们将在src/components/greet/greet.tsx中创建它:

src/components/greet/greet.tsx

import { $, component$, useSignal } from '@builder.io/qwik'
import { invoke } from '@tauri-apps/api/tauri'

export default component$(() => {
const greetMsg = useSignal('')

const greet = $(async (name: string) => {
greetMsg.value = await invoke('greet', { name })
})

return (
<div>
<button onClick$={() => greet('Qwik')}>Greet</button>
<p>{greetMsg.value}</p>
</div>
)
})

您现在可以将此组件添加到src/routes/index.tsx文件中:

src/routes/index.tsx

// ...
import Greet from '~/components/greet/greet'

export default component$(() => {
return (
<>
<Greet />
...
</>
)
})
提示
如果您想了解更多关于Rust和JavaScript之间的通信,请阅读Tauri进程间通信指南。


以上内容是否对您有帮助:
在线笔记
App下载
App下载

扫描二维码

下载编程狮App

公众号
微信公众号

编程狮公众号