Tauri 2.0.0-rc 使用webviewWindow 窗口

Tauri 2.0.0-rc 使用webviewWindow 窗口

先容

本文将先容怎样使用 tauri 实现 webviewWindow 窗口。
安装依赖

1. pnpm install @tauri-apps/api

复制代码

创建窗口

可以共同键盘事故一起使用

1. import { WebviewWindow } from '@tauri-apps/api/webviewWindow'
3. // 键盘事件
4. import { listen } from '@tauri-apps/api/event'
6. // 监听 'shortcut-event' 事件
7. listen('shortcut-event', async (event) => {
8.   const existedWindow = await WebviewWindow.getByLabel('search')
9.   if (existedWindow) {
10.     const isVisible = await existedWindow.isVisible()
11.     if (isVisible) {
12.       await existedWindow.hide()
13.     } else {
14.       await existedWindow.show()
15.     }
16.     return
17.   }
18.   const webview = new WebviewWindow('search', {
19.     center: true,
20.     width: 800,
21.     height: 100,
22.     alwaysOnTop: true,
23.     skipTaskbar: false,
24.     decorations: false,
25.     closable: false,
26.     url: 'http://localhost:1420/Search'
27.   })
28.   webview.once('tauri://created', function () {
29.     console.log('webview created')
30.   })
31.   webview.once('tauri://error', function (e) {
32.     console.log('error creating webview', e)
33.   })
34. })

复制代码

留意事项

默认情况下，全部插件下令都被制止，无法访问。你必须在 permissions 设置中界说一个权限列表。

1. "permissions": [
2.     "core:webview:allow-create-webview",
3.     "core:window:allow-show",
4.     "core:webview:allow-create-webview-window",
5.     "core:webview:allow-webview-close",
6.     "core:window:allow-close",
7.     "core:window:allow-hide",
8.     "core:webview:allow-set-webview-size",
9.     "core:window:allow-set-size"
10.    ]

复制代码

• 参考文献:https://v2.tauri.app/zh-cn/reference/javascript/api/namespacewebviewwindow/