前言
【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) -> SelfWindowBuilder 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()
})想不到前端的这些事件，居然是发送请求。
笔者突然有个想法，能否模拟这个请求? 以后再来尝试，有点意思
