cargo install create-tauri-app --locked
cargo create-tauri-app
创建前端
mkdir ui
新建一个 index.html 文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>文档</title>
</head>
<body>
<h1>这是来自 Tauri 的欢迎！</h1>
</body>
</html>
创建 Rust 项目
cargo install tauri-cli
#如果失败请用cargo install tauri-cli --locked
#默认情况下，包自带的 Cargo.lock 文件会被忽略，这意味着 Cargo 会重新计算使用依赖的版本，很有可能使用到比发布该包时更新的依赖版本。
#可以使用 --locked 标志来强制要求 Cargo 使用包自带的 Cargo.lock (如果可行的话)。
cargo tauri init
tauri init命令将生成src-tauri文件夹。传统上，Tauri应用会将其核心相关的文件放置于此文件夹中。
src-tauri/src/main.rs
#![cfg_attr(not(debug_assertions), windows_subsystem = "windows")]
fn main() {
tauri::Builder::default()
.run(tauri::generate_context!())
.expect("error while running tauri application");
}
运行dev构建
cargo tauri dev --debug
运行release构建
cargo tauri dev --release
运行release构建+生成exe安装包
cargo tauri build
32位：
cargo tauri dev --target i686-pc-windows-msvc
cargo tauri dev --release --target i686-pc-windows-msvc
调用指令
Tauri 为您的前端开发提供了其他系统原生功能。
我们将其称作指令，这使得您可以从 JavaScript 前端调用由 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 包，但由于本指南至此还没有使用打包工具，
所以您需要在 tauri.conf.json 文件中启用 withGlobalTauri 选项。
tauri.conf.json
{
"build": {
"beforeBuildCommand": "",
"beforeDevCommand": "",
"devPath": "../ui",
"distDir": "../ui",
"withGlobalTauri": true
},
此选项会将已打包版本的 API 函数注入到您的前端中。
您现在可以修改您的 index.html 文件来调用您的指令：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<h1 id="header">Welcome from Tauri!</h1>
<script>
const { invoke } = window.__TAURI__.tauri
invoke('greet', { name: 'World' })
.then((response) => {
window.header.innerHTML = response
})
</script>
</body>
</html>
.vscode/launch.json:
{
// 使用 IntellliSense 来了解可能的属性。
// 悬停以查看现有属性的描述。
// 更多详情访问：https://go.microsoft.com/fwlink/?linkid=830387
"version": "0.2.0",
"configurations": [
{
"type": "lldb",
"request": "launch",
"name": "Tauri Development Debug",
"cargo": {
"args": [
"build",
"--manifest-path=./src-tauri/Cargo.toml",
"--no-default-features"
]
},
// task for the `beforeDevCommand` if used, must be configured in `.vscode/tasks.json`
//"preLaunchTask": "ui:build"
},
{
"type": "lldb",
"request": "launch",
"name": "Tauri Production Debug",
"cargo": {
"args": ["build", "--release", "--manifest-path=./src-tauri/Cargo.toml"]
},
// task for the `beforeBuildCommand` if used, must be configured in `.vscode/tasks.json`
//"preLaunchTask": "ui:build"
}
]
}
支持前端资源Hot Reload热重载：
{
"build": {
"devPath": "http://localhost:8080",
}
}