首页
友链
关于

Tauri hello_world

08 / 10 / 2021 (最后编辑于 11 / 17 / 2022)
预计阅读时间 8 分钟

前言

自打发现 Tauri 这个东西以后,就想拿它练练手,结果发现搜遍全网连个正经的hello_world都没有,不是官网上那个前端拿svetle.js写的 api 示例,就是几个真的就是在div里写了个 hello world 就完事了的,好不容易找找个正经的吧,结果又是老版本的,新版本语法变动编译都过不了,再加上官网的介绍比较凌乱其实纯粹就是我没好好看,经过了几个小时的摸爬滚打(雾),我终于写出一个我认为还算说得过去的hello_world

最起码,它用到了invoke这个东西,也没invoke也没event鬼知道你到底咋调用 rust 函数的 -_-#

阅读本文时请先注意 Tauri 的版本,根据官网介绍由于 Tauri 目前处于开发阶段,所以不同版本 API 可能有变动,如果有时间,我会尽量保证这篇文章中的示例程序可以在最新版 Tauri 中使用。(按理说这些基本操作应该不会有太大变化)

注:现版本 Tauri 基础 API 趋于完善,已无过大变化,此代码在很大可能上可以在最新版的 Tauri 上正常运行,若无法通过编译请在评论区提出或邮箱联系我,谢谢!

环境设置可以直接参考官网介绍,以下直接上代码。

代码

tauri.conf.json

1
2
3
4
5
6
7
8
{
...
"build": {
...
"withGlobalTauri": true
}
...
}

index.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<!--main window-->
<!DOCTYPE html>

<html>

<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>

<body>
<div id="greetText">What's your name?</div>
<input id="nameInput" type="text" />
<button id="greetbutton" onclick="greetbutton_clicked();">Say "Hello"</button>

<div>push the button, and it should give some respond</div>
</body>

<script>
async function greetbutton_clicked() {
// you shuold add "withGlobalTauri": true to the build section of
// tauri.conf.json to use window.__TAURI__.*
// but use tauri like this will have less security with your program,
// see https://tauri.studio/en/docs/api/config#build.withGlobalTauri for detail.
document.getElementById("greetText").innerText = await window.__TAURI__.invoke("greet", { name: document.getElementById("nameInput").value });
// the args invoked to rust funcs should be packed in json object.
}
</script>

</html>

main.rs

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
#![cfg_attr(
all(not(debug_assertions), target_os = "windows"),
windows_subsystem = "windows"
)]

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

fn main() {
tauri::Builder::default()
.invoke_handler(tauri::generate_handler![greet])
.run(tauri::generate_context!())
.expect("error while running tauri application");
}

如上。