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

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

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