当前位置：首页 > news >正文

Tauri(2.5.1)+Leptos(0.7.8)开发桌面应用--程序启动界面

news 来源：原创 2025/7/18 8:43:12

前期使用Tauri(2.5.1)+Leptos(0.7.8)写了一个自用桌面小程序，详见：使用Tauri 2.3.1+Leptos 0.7.8开发桌面小程序汇总_tauri 小程序-CSDN博客。

在此基础上，尝试给程序添加启动界面，效果如下图所示。

1. 添加启动画面设置

在src-tauri/tauri.conf.json文件中，添加splashscreen窗口。具体内容如下：

"app": {"withGlobalTauri": true,"windows": [{"fullscreen": false,"resizable": false,"width": 800,"height": 600,"label":"splashscreen","alwaysOnTop": true,"visible": false,"url":"../public/splashscreen.html","center": true,"decorations": false},{"title": "酸度系数","fullscreen": false,"resizable": true,"width": 1100,"height": 720,"label":"main","alwaysOnTop": false,"visible": false,"center": true,"decorations": true}],"security": {"csp": null}},

其中，splashscreen窗口的参数"visible"本应为true，但是如此设置后，在启动界面出现前，会首先出现一个空白窗口，一闪而过，影响美观，网上说是因为WebView2的bug，所以采取了另外一个思路，将plashscreen窗口的参数"visible"设为false，即启动时不可见，程序启动后再显示splashscreen窗口，然后等待3秒，关闭启动界面，打开主窗口。

参数"url":"../public/splashscreen.html"定义了启动界面的html文件，前面所述的“打开splashscreen”窗口，等待3秒后“关闭splashscreen窗口”，“打开main主窗口”都是通过该文件中的js脚本调用后台tauri命令实现的。

另外，splashscreen.html中的js脚本调用后台tuari命令使用的是window.__TAURI__.core.invoke，它需要在tauri.conf.json中设置"withGlobalTauri"参数为true。

2. 启动界面定义

新建/pubic/splashscreen.html文件，内容如下：

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>启动中...</title><link rel="stylesheet" href="splashscreen.css">
</head>
<body><div class="splash-container"><div class="splash-content"><img src="doughnutS.svg" alt="Logo" class="splash-logo"><div class="splash-loader"></div><p class="splash-text">正在加载应用...</p></div></div><script type="module" src="js/splashscreen.js"></script>
</body>
</html>

/public/splashscreen.css文件定义了窗口格式及特性，包括图标缩放闪烁，旋转等待动画。具体文件内容如下：

.splash-container {position: fixed;top: 0;left: 0;width: 100%;height: 100%;display: flex;justify-content: center;align-items: center;background-color: rgba(255, 255, 255, 0.9);
}.splash-content {display: flex;flex-direction: column;align-items: center;gap: 20px;
}.splash-logo {width: 300px;height: 300px;animation: pulse 2s infinite;
}.splash-text {font-family: Arial, sans-serif;font-size: 18px;color: #333;
}.splash-loader {width: 60px;height: 60px;border: 5px solid #f3f3f3;border-top: 5px solid #3498db;border-radius: 50%;animation: spin 1s linear infinite;
}@keyframes spin {0% { transform: rotate(0deg); }100% { transform: rotate(360deg); }
}@keyframes pulse {0% { transform: scale(1); }50% { transform: scale(1.1); }100% { transform: scale(1); }
}

/public/js/splashscreen.js文件定义了启动界面的后续操作，主要通过window.__TAURI__.core.invoke调用后台Tauri命令实现，具体内容如下：

  // When using the Tauri API npm package://import { invoke } from '@tauri-apps/api/core';// When using the Tauri global script (if not using the npm package)// Be sure to set `app.withGlobalTauri` in `tauri.conf.json` to trueconst invoke = window.__TAURI__.core.invoke;await invoke('show_splashscreen_window');console.log('成功显示主窗口');setTimeout(async () => {try {// 使用Tauri 2.5官方推荐API调用方式console.log('正在检查Tauri API...');try {await invoke('close_splashscreen');console.log('成功关闭启动窗口');} catch (err) {console.error('命令调用失败:', err);//window.location.href = '/';}} catch (error) {console.error('启动页切换失败:', error);// 失败时直接跳转到主页面//window.location.href = '/';}}, 3000);
});

其中：

show_splashscreen_window后台命令负责显示启动界面，前面在 tauri.conf.json中设置了plashscreen窗口的参数"visible"设为false，此处首先将其显示出来；

setTimeout(async () => {}, 3000)表示3秒后执行{}内的操作；

close_splashscreen后台命令负责关闭启动界面，然后显示主窗口。

3. Tauri后台命令

在/src-tauri/src/lib.rs中，定义show_splashscreen_window和close_splashscreen命令，具体代码如下：

mod tray;       //导入tray.rs模块
mod mymenu;     //导入mynemu.rs模块
use mymenu::{create_menu, handle_menu_event};#[tauri::command]
async fn show_splashscreen_window(app: tauri::AppHandle) {if let Some(splashscreen) = app.get_webview_window("splashscreen") {splashscreen.show().unwrap();}
}
#[tauri::command]
async fn close_splashscreen(app: tauri::AppHandle) {if let Some(splashscreen) = app.get_webview_window("splashscreen") {splashscreen.close().unwrap();}// 获取主窗口let main_window = app.get_webview_window("main").unwrap();// 延迟创建菜单并附加到窗口let menu = create_menu(&app).unwrap();main_window.set_menu(menu).unwrap();main_window.on_menu_event(move |window, event| handle_menu_event(window, event));// 显示主窗口main_window.show().unwrap();
}#[cfg_attr(mobile, tauri::mobile_entry_point)]
pub fn run() {tauri::Builder::default().plugin(tauri_plugin_opener::init()).invoke_handler(tauri::generate_handler![show_splashscreen_window,close_splashscreen]).setup(|app| {// 确保主窗口保持隐藏直到启动画面关闭if let Some(main_window) = app.get_webview_window("main") {let _ = main_window.hide();}#[cfg(all(desktop))]{let handle = app.handle();tray::create_tray(handle)?;         //设置app系统托盘}tauri::async_runtime::block_on(async move {let db = setup_db(&app).await;         //setup_db(&app:&mut App)返回读写的数据库对象app.manage(DbState { db });                   //通过app.manage(DbState{db})把数据库对象传递给state:tauri::State<'_, DbState>});Ok(())}).run(tauri::generate_context!()).expect("运行Tauri程序的时候出错！");
}

在启动主窗口时，将之前定义的菜单及菜单事件响应附加到窗口，窗口自定义菜单详见：Tauri2+Leptos开发桌面应用--新建窗口、自定义菜单和多页面切换_tauri leptos-CSDN博客。

之前自定义的菜单及事件响应是在run()函数中完成的：

#[cfg_attr(mobile, tauri::mobile_entry_point)]
pub fn run() {tauri::Builder::default().plugin(tauri_plugin_opener::init()).invoke_handler(tauri::generate_handler![greet]).menu(|app|{create_menu(app)}).setup(|app| {let main_window = app.get_webview_window("main").unwrap();main_window.on_menu_event(move |window, event| handle_menu_event(window, event));#[cfg(all(desktop))]{let handle = app.handle();tray::create_tray(handle)?;         //设置app系统托盘}tauri::async_runtime::block_on(async move {let db = setup_db(&app).await;         //setup_db(&app:&mut App)返回读写的数据库对象app.manage(DbState { db });                   //通过app.manage(DbState{db})把数据库对象传递给state:tauri::State<'_, DbState>});Ok(())}).run(tauri::generate_context!()).expect("运行Tauri程序的时候出错！");
}

4. 效果展示

至此，为Tauri2桌面小程序添加启动界面基本完成，具体程序效果如下。

Tauri2+Leptos开发桌面应用--添加程序启动画面

1. 添加启动画面设置

2. 启动界面定义

3. Tauri后台命令

4. 效果展示

相关文章：