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