tauri學習(4)-多窗口

接上節繼續，今天研究tauri中的多窗口，要實現多窗口有幾種方式：

一、改配置tauri.conf.json

仍然以react項目模式爲例，假設我們有2個頁面效果：

在瀏覽器中運行起來長這樣：

tauri中，如果想開2個窗口，分別對應於這2個頁面，可以參考下圖配置：

(關於windows節點下，具體有哪些屬性可配置，可參考官網文檔)

運行起來效果如下：

  

二、Rust中使用app創建窗口

use tauri::{WindowBuilder, WindowUrl};

fn main() {
  tauri::Builder::default()
    .setup(|app| {
      WindowBuilder::new(
        app,
        "external",
        WindowUrl::External("http://yjmyzz.cnblogs.com/".parse().unwrap()),
      )
      .title("菩提村下的楊過")
      .inner_size(640.0, 480.0)
      .position(50.0, 100.0)
      .build()?;
      Ok(())
    })
    .run(tauri::generate_context!())
    .expect("error while running tauri application");
}

運行起來後，加上方式1中的2個窗口，總共會有3個窗口：

 

三、前端創建窗口

3.1 使用tauri::command

上節學習過前端可以調用Rust中的方法，同樣這種方式，也可以創建窗口。先把tauri.conf.json中的配置恢復成單窗口，方式二中創建的窗口也去掉，然後加1個可供前端調用的新方法：

然後在Home組件中，調用該方法：

運行效果：

 

 3.2 js API調用

運行效果：

  

四、運行時獲取窗口引用

比如想用代碼把前面創建的2個about窗口給關閉，就必須先獲取窗口的引用，參考下面的代碼：

運行效果：

 

參考文章：

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