tauri學習(5)-Splashscreen啓動界面

接上節繼續，本文將研究splashscreen，也就是程序的啓動界面，通常有2二種應用場景：

1、程序太複雜，主界面完成加載需要很長時間，爲了優化用戶體驗，可以先放一個啓動圖片，緩解用戶等待的焦慮。

2、播放啓動廣告，手機應用上很常見，進入主程序前，強制讓用戶看一會兒廣告。

在tauri中也有二種實現方式：

一、前端與Rust配合

1.1 先調整tauri.config.json

要點在於：將主窗口home隱藏，然後將splashscreen窗口顯示，爲了簡單，這裏只顯示1個小圖片，該圖片可放在react的public目錄下

這樣啓動時，就只會顯示splashscreen窗口，然後在main.rs中暴露1個方法：

1.2 前端監聽DOMContentLoaded事件

前文講過，如何在js中獲取tauri window的引用，這裏就用上了，大致思路是主界面的dom加載完成後，調用api把spashscreen關掉，然後顯示出主窗口

運行效果：  

 

二、純Rust代碼實現

use tauri::Manager;

fn main() {
  tauri::Builder::default()
    .setup(|app| {
      let splashscreen_window = app.get_window("splashscreen").unwrap();
      let main_window = app.get_window("home").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...");
        //等待5秒後，再顯示主窗口
        std::thread::sleep(std::time::Duration::from_secs(5));
        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");
}

效果差不多，只是splashscreen窗口停留多久，一般是根據主窗口加載時間預估，稍稍有那麼一點點不精確。

 

參考文章：

https://tauri.app/v1/guides/features/splashscreen