【tauri+rust】App会加载白屏，有时显示在左上角显示一小块，如何优化

芳草萋萋鹦鹉洲哦2025-11-28 12:11

使用tauri做App时不可避免的会遇到上图问题，Tauri在启动时会先创建原生窗口，然后才加载WebView引擎并执行前端代码，这就导致存在一个时间差。当前端框架初始化耗时较为明显，Vue/React等现代前端框架需要完成虚拟DOM构建、组件挂载等。

解决方案

在创建时我们先将原生窗口改为不可见，等前端界面加载完成后再加载窗口即可。

主要操作如下：

1、tauri.conf.json设置visible:false

2、main.rs增加命令：show_main_window,

rust 复制代码

// 显示主窗口
#[tauri::command]
pub async fn show_main_window(window: tauri::Window) -> Result<(), String> {
    log::info!("Frontend requested to show main window");
    
    // 短暂延迟确保渲染完成
    tokio::time::sleep(std::time::Duration::from_millis(200)).await;
    
    window.show().map_err(|e| e.to_string())?;
    window.center().map_err(|e| e.to_string())?;
    window.set_focus().map_err(|e| e.to_string())?;
    
    log::info!("Main window is now visible");
    Ok(())
}

3、App.vue增加调用show_main_window

javascript 复制代码

import { invoke } from '@tauri-apps/api/core';

onMounted(async () => {
  // 初始化多语言
  localStorage.setItem('client-lang', 'zh_CN');
  // 初始化本地数据库
  try {
    await localDB.init();
    console.log('本地数据库初始化成功');
  } catch (error) {
    console.error('本地数据库初始化失败:', error);
  }
  try {
    // 等待 Vue 应用完全挂载
    await new Promise(resolve => setTimeout(resolve, 500))
    await invoke('show_main_window')
    
  } catch (error) {
    console.error('Failed to show window:', error)
    // 备用方案：直接使用 API
    try {
      await appWindow.show()
      await appWindow.center()
    } catch (fallbackError) {
      console.error('Fallback also failed:', fallbackError)
    }
  }
});
</script>