【Tauri2】015——前端的事件、方法和invoke函数

目录

前言

正文

准备

关键url

获取所有命令

切换主题set_theme

设置大小

获得版本version

名字name

监听窗口移动

---

前言

【Tauri2】005——tauri::command属性与invoke函数-CSDN博客https://blog.csdn.net/qq_63401240/article/details/146581991?spm=1001.2014.3001.5502

【Tauri2】013——前端Window Event与创建Window-CSDN博客https://blog.csdn.net/qq_63401240/article/details/146981362?spm=1001.2014.3001.5502

笔者在013这篇文章中，发现window中事件，本质是在发送一个请求，还是post。笔者想尝试能否自己发送一个请求。

正文

准备

首先，笔者以window.hide()作为研究对象。需要隐藏的权限

主要代码

import {getCurrentWindow} from "@tauri-apps/api/window";export default function useWindowEvent() {let window = getCurrentWindow();window.onMoved((event) => {window.hide()})
}

  "permissions": [..."core:window:allow-hide"]

上面代码的意思是，移动事件中，触发隐藏窗口。

关键url

首先，可以在开发者工具发现这样的url

http://ipc.localhost/plugin%3Awindow%7Chide

设置断点

断的位置如下

首先，这个断下的文件的名字，笔者叫vm45，

vm是Virtual Machine的缩写，表示这段代码是在浏览器的虚拟机环境中运行的，这就很麻烦了

 可以发现Tauri-Callback，Tauri-Error，Tauri-Invoke-Key

这三个参数是非常关键的

笔者发现Tauri-Callback，Tauri-Error，都是数字，后面再说

Tauri-Invoke-Key的定义如下

const __TAURI_INVOKE_KEY__ = JSON.parse('"Oeln}Dgql8BzP843PEb!"')

但是每次运行，都不一样。笔者也不知道如何生成的。

不改变，继续使用，会报错，比如

__TAURI_INVOKE_KEY__ expected jW%TgoDn{gagRJ==SGXq but received !sN1d=nrX)Eqc&J(GS*f

 __TAURI_INVOKE_KEY__ 不对

但是，笔者在控制台报了这个错，然后再修改了__TAURI_INVOKE_KEY__ ，窗口就消失了，就成功了。哈哈哈哈

笔者在测试中发现了这个，没有用

INVOKE_KEY in tauri::test - RustThe invoke key used for tests.https://docs.rs/tauri/latest/tauri/test/constant.INVOKE_KEY.html

上面还有一段注释

  /**
   * A runtime generated key to ensure an IPC call comes from an initialized frame.
   *
   * This is declared outside the `window.__TAURI_INVOKE__` definition to prevent
   * the key from being leaked by `window.__TAURI_INVOKE__.toString()`.
   */

居然是运行时生成的。还防止泄露，可以。

看来想自己发送请求，自己创造这个__TAURI_INVOKE_KEY__ ，不可行，反正笔者没有成功。

后面来实现这段代码。

看看messsage

{"cmd": "plugin:window|hide","callback": 1804441640,"error": 3457847102,"payload": {"label": "main"}
}

看到cmd，发现可以传递给invoke，因此，如下代码也可以实现隐藏

import {getCurrentWindow} from "@tauri-apps/api/window";
import {invoke} from "@tauri-apps/api/core";export default function useWindowEvent() {let window = getCurrentWindow();window.onMoved((event) => {invoke("plugin:window|hide", {"label": "main"})})
}

需要设置权限。

运行成功。哈哈哈哈

如果笔者把plugin:window|hide改成hide，url变成了

http://ipc.localhost/hide

 当然，结果报错。

看来url就是http://ipc.localhost/+cmd，原来如此。

而且观察cmd的格式plugin:window|hide

应该是  plugin:<plugin_name>|<plugin_function>

获取所有的cmd

笔者在tauri::command这个属性中，其中的wrapper中，进行了打印，如下。

  println!("函数名: {}", function.sig.ident);

打印结果如下，笔者把它全部输出了

函数名: version                                                                                                                                                                    
函数名: name
函数名: tauri_version
函数名: identifier
函数名: app_show
函数名: app_hide
函数名: fetch_data_store_identifiers
函数名: remove_data_store
函数名: default_window_icon
函数名: set_app_theme
函数名: listen                                                                                                                                                                     
函数名: unlisten
函数名: emit
函数名: emit_to
函数名: fetch
函数名: close                                                                                                                                                                      
函数名: get_all_webviews
函数名: create_webview_window
函数名: create_webview
函数名: webview_position
函数名: webview_size
函数名: print
函数名: webview_close
函数名: set_webview_size
函数名: set_webview_position                                                                                                                                                       
函数名: set_webview_focus
函数名: webview_hide
函数名: webview_show
函数名: set_webview_zoom
函数名: set_webview_background_color
函数名: clear_all_browsing_data
函数名: reparent
函数名: internal_toggle_devtools
函数名: get_all_windows
函数名: create
函数名: scale_factor
函数名: inner_position
函数名: outer_position
函数名: inner_size
函数名: outer_size
函数名: is_fullscreen
函数名: is_minimized
函数名: is_maximized
函数名: is_focused
函数名: is_decorated                                                                                                                                                               
函数名: is_resizable
函数名: is_maximizable
函数名: is_minimizable
函数名: is_closable
函数名: is_visible
函数名: is_enabled
函数名: title
函数名: current_monitor
函数名: primary_monitor
函数名: available_monitors
函数名: cursor_position
函数名: theme
函数名: is_always_on_top
函数名: center
函数名: request_user_attention
函数名: set_resizable
函数名: set_maximizable
函数名: set_minimizable
函数名: set_closable
函数名: set_title
函数名: maximize
函数名: unmaximize
函数名: minimize
函数名: unminimize
函数名: show
函数名: hide
函数名: close
函数名: destroy
函数名: set_decorations                                                                                                                                                            
函数名: set_shadow
函数名: set_effects
函数名: set_always_on_top
函数名: set_always_on_bottom
函数名: set_content_protected
函数名: set_size
函数名: set_min_size
函数名: set_max_size
函数名: set_position
函数名: set_fullscreen
函数名: set_focus
函数名: set_skip_taskbar
函数名: set_cursor_grab
函数名: set_cursor_visible
函数名: set_background_color
函数名: set_cursor_icon
函数名: set_cursor_position
函数名: set_ignore_cursor_events
函数名: start_dragging
函数名: start_resize_dragging
函数名: set_progress_bar
函数名: set_badge_count
函数名: set_visible_on_all_workspaces
函数名: set_title_bar_style
函数名: set_size_constraints
函数名: set_theme
函数名: set_enabled
函数名: set_overlay_icon
函数名: set_icon
函数名: toggle_maximize
函数名: internal_toggle_maximize
函数名: monitor_from_point
函数名: new                                                                                                                                                                        
函数名: from_bytes
函数名: from_path
函数名: rgba
函数名: size
函数名: new                                                                                                                                                                        
函数名: append
函数名: prepend
函数名: insert
函数名: remove
函数名: remove_at
函数名: items
函数名: get
函数名: popup
函数名: create_default
函数名: set_as_app_menu                                                                                                                                                            
函数名: set_as_window_menu
函数名: text
函数名: set_text
函数名: is_enabled
函数名: set_enabled
函数名: set_accelerator
函数名: set_as_windows_menu_for_nsapp
函数名: set_as_help_menu_for_nsapp
函数名: is_checked
函数名: set_checked
函数名: set_icon
函数名: resolve_directory                                                                                                                                                          
函数名: resolve
函数名: normalize
函数名: join
函数名: dirname
函数名: extname
函数名: basename
函数名: is_absolute

这些都是方法，笔者不敢确定是否都可以用

笔者尝试了一些方法

切换主题set_theme

需要权限  ——"core:window:allow-set-theme"

import './App.css'
import {getCurrentWindow} from "@tauri-apps/api/window";function App() {let window = getCurrentWindow();async function handleClick() {let get_theme = await window.theme();if(get_theme === "dark") {await window.setTheme("light");}else {await window.setTheme("dark");}}return (<><header><h1>My Tauri App</h1></header><main><div style={{ display: 'flex', gap: '10px' }}><button onClick={handleClick}>点击</button></div></main></>);
}export default App;

第二个url及负载

http://ipc.localhost/plugin%3Awindow%7Ctheme

label: "main"

第三个url及负载

http://ipc.localhost/plugin%3Awindow%7Cset_theme

label: "main"

value: "light"

 根据上面的信息，使用invoke实现的代码如下

    async function handleClick() {let get_theme = await invoke('plugin:window|theme',{'label':'main'});console.log(get_theme);if(get_theme === "dark") {await invoke('plugin:window|set_theme',{'label':'main','value':'light'});}else {await invoke('plugin:window|set_theme',{'label':'main','value':'dark'});}}

结果是成功的，哈哈哈哈哈哈

当然，感觉没什么用，相对来说，搞麻烦了。

但是，想不到这个invoke函数居然是这么关键，居然可以这样操作。

设置大小

再来试试，

权限core:window:allow-set-size

    async function handleClick() {let get_size=await window.innerSize();console.log(get_size);window.setSize(new PhysicalSize(1000, 500));}

观察请求

http://ipc.localhost/plugin%3Awindow%7Cinner_size

{label: "main"}

http://ipc.localhost/plugin%3Awindow%7Cset_size

{
  "label": "main",
  "value": {
    "Physical": {
      "width": 1000,
      "height": 500
    }
  }
} 

因此，代码如下

    async function handleClick() {await invoke("plugin:window|set_size", {"label": "main","value": {"Physical": {"width": 1000,"height": 500}}});}

结果是可以的。哈哈哈哈

获得版本version

直接给出代码

    async function handleClick() {let version=await invoke("plugin:app|version")console.log("版本:",version)}

名字name

    async function handleClick() {let name=await invoke("plugin:app|name")console.log("名字:",name)}

 

监听窗口移动

简单地代码如下

import { getCurrentWindow } from "@tauri-apps/api/window";export async function useWindowEvent() {const window = getCurrentWindow();window.onMoved(()=>{console.log("窗口移动了");})}

onMoved(handler: EventCallback<PhysicalPosition>): Promise<UnlistenFn>;

 或者用listen，差不多。

使用invoke，应该怎么办？

先看看请求

http://ipc.localhost/plugin%3Aevent%7Clisten

{
  "event": "tauri://move",
  "target": {
    "kind": "Window",
    "label": "main"
  },
  "handler": 3468365674
}

这里面有个handler，很明显，是用来处理移动后的事件

如何自定义handler？

这就需要一个函数了——transformcallback

core | Taurihttps://v2.tauri.app/reference/javascript/api/namespacecore/#transformcallback

declare function transformCallback<T = unknown>(callback?: (response: T)=> void, once?: boolean): number;

第一个参数callback 是一个函数

第二个可选参数once 是boolean，判断是否使用一次。

返回一个数字

在前面，笔者提到，“Tauri-Callback，Tauri-Error，都是数字”，很有可能就是这个函数的返回值。

综合上面的信息

最后，代码如下

import {transformCallback,invoke} from "@tauri-apps/api/core";
import {Event} from '@tauri-apps/api/event'export async function useWindowEvent() {const handlerId = transformCallback((event:Event<unknown>) => {console.log("窗口移动事件通过invoke实现:", event.payload);});await invoke("plugin:event|listen", {event: "tauri://move",target: { kind: "Window", label: "main" },handler: handlerId});
}

窗口隐藏

前面说了这么多，都是使用invoke，最后使用一下fetch

直接给出代码

import {transformCallback} from "@tauri-apps/api/core";
import {Event} from "@tauri-apps/api/event";export async function useWindowEvent() {const error=transformCallback((event:Event) => {console.log("失败")})const success=transformCallback((event:Event) => {console.log("成功")})const __TAURI_INVOKE_KEY__ = JSON.parse('"lZzIiQJ%t9b@}Q&aef^A"')fetch("http://ipc.localhost/plugin%3Awindow%7Chide", {method: 'POST',body: JSON.stringify({'label': 'main',}),headers: {'Content-Type': "application/json",'Tauri-Callback': success,'Tauri-Error': error,'Tauri-Invoke-Key': __TAURI_INVOKE_KEY__,}})}

笔者在代码中替换了，最后，成功了

怎么处理回调函数，笔者也不知道。

笔者还发现，只要不关闭程序，这个__TAURI_INVOKE_KEY__就可以使用

最后，虽然没有什么用。

哈哈哈哈