启动画面

在本实验中，我们将在 Tauri 应用中实现基本的启动画面功能。这相当简单，启动画面实际上就是创建一个新窗口，在你的应用执行一些繁重的设置相关任务期间显示一些内容，然后在设置完成后关闭它。

先决条件

如果你不是高级用户，强烈建议你使用这里提供的选项和框架。这只是一个实验，你可以在完成后删除项目。

sh <(curl https://create.tauri.app/sh)

irm https://create.tauri.app/ps | iex

sh (curl -sSL https://create.tauri.app/sh | psub)

npm create tauri-app@latest

yarn create tauri-app

pnpm create tauri-app

deno run -A npm:create-tauri-app

bun create tauri-app

cargo install create-tauri-app --locked
cargo create-tauri-app

项目名称：splashscreen-lab
选择你的前端语言：Typescript / Javascript
选择您的包管理器：pnpm
选择您的 UI 模板：Vanilla
选择你的 UI 风格：Typescript
你是否也想为移动端设置项目？是

步骤

标题为“安装依赖并运行项目”的部分

在开始开发任何项目之前，重要的是构建并运行初始模板，以验证您的设置是否按预期工作。
# Make sure you're in the right directory cd splashscreen-lab # Install dependencies pnpm install # Build and run the app pnpm tauri dev
标题为“在 tauri.conf.json 中注册新窗口”的部分

添加新窗口最简单的方法是直接将它们添加到 tauri.conf.json 中。你也可以在启动时动态创建它们，但为了简单起见，我们还是选择注册它们。确保你有一个标签为 main 的窗口被创建为隐藏窗口，以及一个标签为 splashscreen 的窗口被创建为直接显示。你可以将所有其他选项保留为默认值，或者根据偏好进行调整。
src-tauri/tauri.conf.json
{ "windows": [ { "label": "main", "visible": false }, { "label": "splashscreen", "url": "/splashscreen" } ] }
标题为“创建一个新页面来托管你的启动画面”的部分

在开始之前，你需要有一些要显示的内容。如何开发新页面取决于你选择的框架，大多数都具有“路由器”的概念，它处理页面导航，这在 Tauri 中应该像正常一样工作，在这种情况下，你只需创建一个新的启动画面页面。或者，像我们在这里将要做的，创建一个新的 splashscreen.html 文件来托管内容。

重要的是，你可以导航到 /splashscreen URL 并显示你想要作为启动画面的内容。完成此步骤后，尝试再次运行应用程序！
/splashscreen.html
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8" /> <link rel="stylesheet" href="/src/styles.css" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Tauri App</title> </head> <body> <div class="container"> <h1>Tauri used Splash!</h1> <div class="row"> <h5>It was super effective!</h5> </div> </div> </body> </html>

由于启动画面通常用于隐藏繁重的设置相关任务，因此我们假装给应用程序一些繁重的任务，一部分在前端，一部分在后端。

为了假装前端的繁重设置，我们将使用一个简单的 setTimeout 函数。

在后端模拟繁重操作最简单的方法是使用 Tokio crate，这是 Tauri 在后端用于提供异步运行时的 Rust crate。虽然 Tauri 提供了运行时，但 Tauri 不会重新导出其中的各种实用程序，因此我们需要将 crate 添加到我们的项目中才能访问它们。这在 Rust 生态系统中是完全正常的做法。

不要在异步函数中使用 std::thread::sleep，它们在并发环境中协同运行，而不是并行运行，这意味着如果你休眠线程而不是 Tokio 任务，你将阻止在该线程上计划运行的所有任务被执行，导致你的应用程序冻结。

# Run this command where the `Cargo.toml` file is
cd src-tauri
# Add the Tokio crate
cargo add tokio
# Optionally go back to the top folder to keep developing
# `tauri dev` can figure out where to run automatically
cd ..

// These contents can be copy-pasted below the existing code, don't replace the entire file!!

// Utility function to implement a sleep function in TypeScript
function sleep(seconds: number): Promise<void> {
    return new Promise(resolve => setTimeout(resolve, seconds * 1000));
}

// Setup function
async function setup() {
    // Fake perform some really heavy setup task
    console.log('Performing really heavy frontend setup task...')
    await sleep(3);
    console.log('Frontend setup task complete!')
    // Set the frontend task as being completed
    invoke('set_complete', {task: 'frontend'})
}

// Effectively a JavaScript main function
window.addEventListener("DOMContentLoaded", () => {
    setup()
});

// Import functionalities we'll be using
use std::sync::Mutex;
use tauri::async_runtime::spawn;
use tauri::{AppHandle, Manager, State};
use tokio::time::{sleep, Duration};

// Create a struct we'll use to track the completion of
// setup related tasks
struct SetupState {
    frontend_task: bool,
    backend_task: bool,
}

// Our main entrypoint in a version 2 mobile compatible app
#[cfg_attr(mobile, tauri::mobile_entry_point)]
pub fn run() {
    // Don't write code before Tauri starts, write it in the
    // setup hook instead!
    tauri::Builder::default()
        // Register a `State` to be managed by Tauri
        // We need write access to it so we wrap it in a `Mutex`
        .manage(Mutex::new(SetupState {
            frontend_task: false,
            backend_task: false,
        }))
        // Add a command we can use to check
        .invoke_handler(tauri::generate_handler![greet, set_complete])
        // Use the setup hook to execute setup related tasks
        // Runs before the main loop, so no windows are yet created
        .setup(|app| {
            // Spawn setup as a non-blocking task so the windows can be
            // created and ran while it executes
            spawn(setup(app.handle().clone()));
            // The hook expects an Ok result
            Ok(())
        })
        // Run the app
        .run(tauri::generate_context!())
        .expect("error while running tauri application");
}

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

// A custom task for setting the state of a setup task
#[tauri::command]
async fn set_complete(
    app: AppHandle,
    state: State<'_, Mutex<SetupState>>,
    task: String,
) -> Result<(), ()> {
    // Lock the state without write access
    let mut state_lock = state.lock().unwrap();
    match task.as_str() {
        "frontend" => state_lock.frontend_task = true,
        "backend" => state_lock.backend_task = true,
        _ => panic!("invalid task completed!"),
    }
    // Check if both tasks are completed
    if state_lock.backend_task && state_lock.frontend_task {
        // Setup is complete, we can close the splashscreen
        // and unhide the main window!
        let splash_window = app.get_webview_window("splashscreen").unwrap();
        let main_window = app.get_webview_window("main").unwrap();
        splash_window.close().unwrap();
        main_window.show().unwrap();
    }
    Ok(())
}

// An async function that does some heavy setup task
async fn setup(app: AppHandle) -> Result<(), ()> {
    // Fake performing some heavy action for 3 seconds
    println!("Performing really heavy backend setup task...");
    sleep(Duration::from_secs(3)).await;
    println!("Backend setup task completed!");
    // Set the backend task as being completed
    // Commands can be ran as regular functions as long as you take
    // care of the input arguments yourself
    set_complete(
        app.clone(),
        app.state::<Mutex<SetupState>>(),
        "backend".to_string(),
    )
    .await?;
    Ok(())
}

运行应用程序
标题为“运行应用程序”的部分

现在你应该会看到一个启动画面窗口弹出，前端和后端都将执行各自繁重的 3 秒设置任务，之后启动画面消失，主窗口显示！

讨论

你是否应该有一个启动画面？

一般来说，拥有一个启动画面就意味着承认你的应用加载速度不够快，以至于不需要它。事实上，最好是直接进入主窗口，然后在角落显示一个小小的旋转图标，告知用户后台仍在进行设置任务。

然而，话虽如此，拥有启动画面可能是一种风格选择，或者你可能有某些非常特殊的要求，使得在执行某些任务之前无法启动应用程序。拥有启动画面绝不是错误的，它只是通常不是必需的，并且可能会让用户觉得应用程序没有很好地优化。

在 Open Collective 上支持在 GitHub 上赞助