W3Cschool
恭喜您成為首批注冊用戶
獲得88經驗值獎勵
Tauri 為您的前端開發(fā)提供了其他系統(tǒng)原生功能。 我們將其稱作指令,這使得您可以從 JavaScript 前端調用由 Rust 編寫的函數。 由此,您可以使用性能飛快的 Rust 代碼處理繁重的任務或系統(tǒng)調用。
以下是一個簡單示例:
src-tauri/src/main.rs
#[tauri::command]
fn greet(name: &str) -> String {
format!("Hello, {}!", name)
}
一個指令等于一個普通的 Rust 函數,只是還加上了 #[tauri::command] 宏來讓其與您的 JavaScript 環(huán)境交互。
最后,我們需要讓 Tauri 知悉您剛創(chuàng)建的指令才能讓其調用。 我們需要使用 .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 庫來調用新創(chuàng)建的命令, 通過 JavaScript 訪問諸如窗口、文件系統(tǒng)等核心功能, 您可以使用自己喜歡的 JavaScript 包管理器來安裝。
pnpm add @tauri-apps/api
安裝依賴庫后,我們現在可以創(chuàng)建一個新的 Svelte 組件。 我們將在 src/lib/Greet.svelte 中創(chuàng)建它:
src/lib/Greet.svelte
<script>
import { invoke } from '@tauri-apps/api/tauri'
let name = ''
let greetMsg = ''
async function greet() {
greetMsg = await invoke('greet', { name })
}
</script>
<div>
<input id="greet-input" placeholder="Enter a name..." bind:value="{name}" />
<button on:click="{greet}">Greet</button>
<p>{greetMsg}</p>
</div>
您現在可以將此組件添加到 ?src/routes/+page.svelte
?:
src/routes/+page.svelte
<script>
import Greet from '../lib/Greet.svelte'
</script>
<h1>Welcome to SvelteKit</h1>
<Greet />
您現在可以使用 ?npm run tauri dev
? 運行它并查看結果:
提示
若您想要了解更多有關 Rust 和 JavaScript 之間通信的信息,請參閱 Tauri 進程間通信 指南。
Copyright©2021 w3cschool編程獅|閩ICP備15016281號-3|閩公網安備35020302033924號
違法和不良信息舉報電話:173-0602-2364|舉報郵箱:jubao@eeedong.com
掃描二維碼
下載編程獅App
編程獅公眾號
聯(lián)系方式:
更多建議: