【Tauri2】013——前端Window Event与创建Window

前言

【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()})

想不到前端的这些事件，居然是发送请求。

笔者突然有个想法，能否模拟这个请求? 以后再来尝试，有点意思