前言

【Tauri2】012——on_window_event函數-CSDN博客https://blog.csdn.net/qq_63401240/article/details/146909801?spm=1001.2014.3001.5501

前面介紹了on_window_event，這個在Builder中的方法，里面有許多事件·，比如Moved，Resized等之類的。

這篇就來簡單地看看前端Window中的事件。

當然，事件可以自定義，以后慢慢說

參考

事件 | Tauri - Tauri 框架https://v2.tauri.org.cn/reference/javascript/api/namespaceevent/

正文

從官網中，可以發現有下面這些事件。

declare enum TauriEvent {WINDOW_RESIZED = "tauri://resize",WINDOW_MOVED = "tauri://move",WINDOW_CLOSE_REQUESTED = "tauri://close-requested",WINDOW_DESTROYED = "tauri://destroyed",WINDOW_FOCUS = "tauri://focus",WINDOW_BLUR = "tauri://blur",WINDOW_SCALE_FACTOR_CHANGED = "tauri://scale-change",WINDOW_THEME_CHANGED = "tauri://theme-changed",WINDOW_CREATED = "tauri://window-created",WEBVIEW_CREATED = "tauri://webview-created",DRAG_ENTER = "tauri://drag-enter",DRAG_OVER = "tauri://drag-over",DRAG_DROP = "tauri://drag-drop",DRAG_LEAVE = "tauri://drag-leave"
}

窗口事件

1、WINDOW_MOVED: "tauri://move" - 窗口移動時觸發

2、WINDOW_RESIZED: "tauri://resize" - 窗口調整大小時觸發

3、WINDOW_CLOSE_REQUESTED: "tauri://close-requested" - 窗口關閉請求時觸發

4、WINDOW_DESTROYED: "tauri://destroyed" - 窗口銷毀時觸發

5、WINDOW_FOCUS: "tauri://focus" - 窗口獲得焦點時觸發

6、WINDOW_BLUR: "tauri://blur" - 窗口失去焦點時觸發

7、WINDOW_SCALE_FACTOR_CHANGED: "tauri://scale-change" - 窗口縮放比例改變時觸發

8、WINDOW_THEME_CHANGED: "tauri://theme-changed" - 窗口主題改變時觸發

窗口生命周期事件

1、WINDOW_CREATED: "tauri://window-created" - 新窗口創建時觸發

2、WEBVIEW_CREATED: "tauri://webview-created" - WebView 創建時觸發

拖放事件

1、DRAG_ENTER: "tauri://drag-enter" - 拖拽進入窗口時觸發

2、DRAG_OVER: "tauri://drag-over" - 拖拽在窗口上方時觸發

3、DRAG_DROP: "tauri://drag-drop" - 拖拽釋放時觸發

4、DRAG_LEAVE: "tauri://drag-leave" - 拖拽離開窗口時觸發

簡單地使用一下

很明顯，前端Window事件比on_window_event中的事件多。

在src目錄下，新建一個Events目錄，其中新建一個useEvent.ts文件，

文件中寫一個useWindowEvent函數

比如說，使用移動，代碼如下

import {getCurrentWindow} from "@tauri-apps/api/window";export default function useWindowEvent() {let window = getCurrentWindow();window.onMoved((event)=>{console.log("窗口移動", event.payload);})}

結果，在開發者工具中

還有使用listen，監聽事件

import {getCurrentWindow} from "@tauri-apps/api/window";export default function useWindowEvent() {let window = getCurrentWindow();window.listen("tauri://move", (event) => {console.log("Window moved", event.payload);})
}

結果如下?

大同小異，感覺差不多。

listen方法，以后還會用，這個是前端用來監聽事件的，可以監聽自定義事件，以后再說，還有once方法。

對于on，后面的事件，就只要下面幾種，不能全部監聽

?監聽Window-created事件

在監聽之前

可以現在后端打開開發者工具

WebviewWindow in tauri::webview - Rusthttps://docs.rs/tauri/latest/tauri/webview/struct.WebviewWindow.html#method.open_devtools即在setup中

   .setup(|app|{// 打開控制臺#[cfg(debug_assertions)]{let window = app.get_webview_window("main").unwrap();window.open_devtools();}Ok(())})

需要在Cargo.toml中的feature設置devtools，即

tauri = { version = "2", features = ["devtools"] }

實際窗口創建后，可以自己打開。無所謂

要想監聽Window-created，顯而易見，需要創建Window

Tauri后端創建Window

前面創建menu，可以直接使用Menu，或者使用MenuBuilder，對于Window，差不多

參考

Window in tauri::window - Rusthttps://docs.rs/tauri/latest/tauri/window/struct.Window.html#method.builder雖然沒有new，但是又builder方法

這和WindowBuilder，感覺沒有什么區別

pub fn new<L: Into<String>>(manager: &'a M, label: L) -> Self

WindowBuilder in tauri::window - Rusthttps://docs.rs/tauri/latest/tauri/window/struct.WindowBuilder.html還有from_config方法，也可以，以后在說。

因此，筆者使用WindowBuilder創建，其中WindowBuilder的new方法

pub fn new<L: Into<String>>(manager: &'a M, label: L) -> Self

第一個manager，是引用M，還有生命周期'a

第二個label，是L，L的約束是Into<String>，傳入一個&str，會自動轉化成String。

總之，第一個參數傳&app，第二個參數傳&str。

在此之前，拆分一下后端的結構

創建command目錄和mod.rs文件，通信函數寫在里面，還可以再創建文件

名字任取。代碼如下

use tauri::{AppHandle, WindowBuilder, command, Theme,Window};
#[command]
pub fn create_window(app: AppHandle, label: &str) {WindowBuilder::new(&app,label).title(label).build().unwrap();
}

注冊通信函數，關鍵代碼

mod command;
.invoke_handler(tauri::generate_handler![command::create_window,command::change_theme])

試試是否成功

在前端添加一個按鈕，綁定事件。

    async function handleCreateWindow(){await invoke("create_window",{label:"world"});}

監聽創建和銷毀

    // 全局監聽listen("tauri://window-created",(event) => {console.log("Window created", event);})// 全局監聽listen("tauri://destroyed", (event) => {console.log("Window destroyed", event);})

?結果如下

前端創建窗口

很簡單，

  constructor(label: WindowLabel, options?: WindowOptions);

第一個參數是label

第一個是其他選項，什么高度之類的。

import {Window} from "@tauri-apps/api/window";
export function createWindow() {let window=new Window('hello', {width: 400,height: 300,visible: true,})console.log("Window created", window);
}

調用函數，結果如下

?雖然創建了，但是，沒有顯示，需要調用show方法

    window.show()

但是，報錯了

Uncaught (in promise) window.show not allowed.
Permissions associated with this command: window:allow-show

簡單的說，權限不夠。

權限修改

筆者本來想，單獨寫的，但感覺沒必要。需要什么權限，就加什么權限，沒什么好說的

在capability中的default.json中添加

  "windows": ["main","hello"],

permissions:[    ....."core:window:allow-show",
]

再次運行

export function createWindow() {let window=new Window('hello', {width: 400,height: 300,visible: true,})window.show()console.log("Window created", window);
}

但是結果還是報錯了

?說什么 window not found，前面都說創建了，筆者看了看官網，發現沒有什么用。

窗口 | Tauri - Tauri 框架https://v2.tauri.org.cn/reference/javascript/api/namespacewindow/#window

發現

但是，筆者查看了開發者工具中的網絡，發現了這個東西

看看有些什么請求。

還是POST請求

看看負載

{event: "tauri://destroyed",target: {kind: "Any"},handler: 2498220777
}

?這里居然有個tauri://destroyed。

其他請求，依然如此。

清除日志，再次點擊。

發現了一個請求，還是POST

負載如下

?options: {width: 400, height: 300, visible: true, label: "hello"}

這給options不就是window的參數，

看看響應

"window.create not allowed. 
Permissions associated with this command: window:allow-create"

看到這個，筆者就明白了，權限問題。

因此，修改權限

  "permissions": [....."core:window:allow-show","core:window:allow-create"]

最后一次運行

代碼如下

export function createWindow() {let window=new Window('hello', {width: 400,height: 300,visible: true,})window.listen("tauri://window-created", (event) => {console.log("窗口創建成功", event);window.show()})
}

結果如下，完美

?看來在前端創建窗口，還需要權限。有點麻煩。

最后

官網的事件筆者也嘗試了

這個created，也是可以的

window.listen("tauri://created", (event) => {console.log("窗口創建成功", event);window.show()})

想不到前端的這些事件，居然是發送請求。

筆者突然有個想法，能否模擬這個請求? 以后再來嘗試，有點意思