【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/

正文

从官网中,可以发现有下面这些事件。

TypeScript 复制代码
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函数

比如说,使用移动,代码如下

TypeScript 复制代码
import {getCurrentWindow} from "@tauri-apps/api/window";

export default function useWindowEvent() {
    let window = getCurrentWindow();
    window.onMoved((event)=>{
        console.log("窗口移动", event.payload);
    })

}

结果,在开发者工具中

还有使用listen,监听事件

TypeScript 复制代码
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中

TypeScript 复制代码
   .setup(|app|{
            // 打开控制台
            #[cfg(debug_assertions)]
            {
                let window = app.get_webview_window("main").unwrap();
                window.open_devtools();

            }
            Ok(())
        })

需要在Cargo.toml中的feature设置devtools,即

TypeScript 复制代码
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,感觉没有什么区别

TypeScript 复制代码
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方法

rust 复制代码
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文件,通信函数写在里面,还可以再创建文件

名字任取。代码如下

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

注册通信函数,关键代码

rust 复制代码
mod command;
.invoke_handler(tauri::generate_handler![
            command::create_window,
            command::change_theme
        ])

试试是否成功

在前端添加一个按钮,绑定事件。

rust 复制代码
    async function handleCreateWindow(){
        await invoke("create_window",{
            label:"world"
        });
    }

监听创建和销毁

rust 复制代码
    // 全局监听
    listen("tauri://window-created",(event) => {
            console.log("Window created", event);
    })
    // 全局监听
    listen("tauri://destroyed", (event) => {
        console.log("Window destroyed", event);
    })

结果如下

前端创建窗口

很简单,

rust 复制代码
  constructor(label: WindowLabel, options?: WindowOptions);

第一个参数是label

第一个是其他选项,什么高度之类的。

rust 复制代码
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方法

rust 复制代码
    window.show()

但是,报错了

rust 复制代码
Uncaught (in promise) window.show not allowed.
Permissions associated with this command: window:allow-show

简单的说,权限不够。

权限修改

笔者本来想,单独写的,但感觉没必要。需要什么权限,就加什么权限,没什么好说的

在capability中的default.json中添加

rust 复制代码
  "windows": ["main","hello"],
rust 复制代码
permissions:[    
         .....
        "core:window:allow-show",
]

再次运行

rust 复制代码
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请求

看看负载

rust 复制代码
{
    event: "tauri://destroyed",
    target: {kind: "Any"},
    handler: 2498220777
}

这里居然有个tauri://destroyed

其他请求,依然如此。

清除日志,再次点击。

发现了一个请求,还是POST

负载如下

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

这给options不就是window的参数,

看看响应

rust 复制代码
"window.create not allowed. 
Permissions associated with this command: window:allow-create"

看到这个,笔者就明白了,权限问题。

因此,修改权限

rust 复制代码
  "permissions": [
     .....
    "core:window:allow-show",
    "core:window:allow-create"
  ]

最后一次运行

代码如下

rust 复制代码
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,也是可以的

rust 复制代码
window.listen("tauri://created", (event) => {
        console.log("窗口创建成功", event);
        window.show()
    })

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

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

相关推荐
zru_960227 分钟前
Vue 常用组件介绍博客
前端·javascript·vue.js
ConardLi1 小时前
MCP + 数据库,一种比 RAG 检索效果更好的新方式!
javascript·数据库·人工智能
m0_616188491 小时前
PDF预览-搜索并高亮文本
开发语言·javascript·ecmascript
勘察加熊人2 小时前
vue猜词游戏
前端·vue.js·游戏
且心2 小时前
【问题处理】webpack4升webpack5,报错Uncaught ReferrnceError: process is not defined
前端·webpack5·process·uncaught·referrnceerror
美美打不死2 小时前
webpack js 逆向 --- 个人记录
开发语言·javascript·webpack
我是哈哈hh2 小时前
【Vue】 核心特性实战解析:computed、watch、条件渲染与列表渲染
前端·javascript·vue.js·前端框架·vue·语法基础
龙在天3 小时前
“手速太快,分页翻车?”,前端分页竞态问题,看这一篇就够了
前端
前端Hardy3 小时前
HTML&CSS:超好看的收缩展开菜单
javascript·css·html
Riesenzahn3 小时前
你使用过css3的:root吗?说说你对它的理解
前端·javascript