跳至主要内容

启动画面

如果你的网页需要一些时间加载,或者你需要在显示主窗口之前在 Rust 中运行初始化过程,启动画面可以改善用户的加载体验。

设置

首先,在你的 distDir 中创建一个 splashscreen.html,其中包含启动画面的 HTML 代码。请注意,如果你将 Tauri 与基于 Vite 的项目一起使用,建议在项目的 public 文件夹中创建 splashscreen.html,该文件夹紧邻 package.json

然后,像这样更新你的 tauri.conf.json

"windows": [
{
"title": "Tauri App",
"width": 800,
"height": 600,
"resizable": true,
"fullscreen": false,
+ "visible": false // Hide the main window by default
},
// Add the splashscreen window
+ {
+ "width": 400,
+ "height": 200,
+ "decorations": false,
+ "url": "splashscreen.html",
+ "label": "splashscreen"
+ }
]

现在,你的主窗口将被隐藏,并且在你的应用启动时,启动画面窗口将显示。接下来,你需要一种方法来关闭启动画面并在你的应用准备就绪时显示主窗口。你如何做到这一点取决于在关闭启动画面之前你等待的是什么。

等待网页

如果你正在等待你的 Web 代码,你将需要创建一个 close_splashscreen 命令

use tauri::{Manager, Window};
// Create the command:
// This command must be async so that it doesn't run on the main thread.
#[tauri::command]
async fn close_splashscreen(window: Window) {
// Close splashscreen
window.get_window("splashscreen").expect("no window labeled 'splashscreen' found").close().unwrap();
// Show main window
window.get_window("main").expect("no window labeled 'main' found").show().unwrap();
}

// Register the command:
fn main() {
tauri::Builder::default()
// Add this line
.invoke_handler(tauri::generate_handler![close_splashscreen])
.run(tauri::generate_context!())
.expect("failed to run app");
}

然后,你可以通过以下两种方式之一将其导入到你的项目中

// With the Tauri API npm package:
import { invoke } from '@tauri-apps/api/tauri'

// With the Tauri global script:
const invoke = window.__TAURI__.invoke

最后,添加一个事件侦听器(或在任何时候调用 invoke()

document.addEventListener('DOMContentLoaded', () => {
// This will wait for the window to load, but you could
// run this function on whatever trigger you want
invoke('close_splashscreen')
})

等待 Rust

如果你正在等待 Rust 代码运行,请将其放入 setup 函数处理程序中,以便你可以访问 App 实例

use tauri::Manager;

fn main() {
tauri::Builder::default()
.setup(|app| {
let splashscreen_window = app.get_window("splashscreen").unwrap();
let main_window = app.get_window("main").unwrap();
// we perform the initialization code on a new task so the app doesn't freeze
tauri::async_runtime::spawn(async move {
// initialize your app here instead of sleeping :)
println!("Initializing...");
std::thread::sleep(std::time::Duration::from_secs(2));
println!("Done initializing.");

// After it's done, close the splashscreen and display the main window
splashscreen_window.close().unwrap();
main_window.show().unwrap();
});
Ok(())
})
.run(tauri::generate_context!())
.expect("failed to run app");
}