Tauri 2.0.0-rc 使用webviewWindow 窗口

Tauri 2.0.0-rc 使用webviewWindow 窗口

介绍

本文将介绍如何使用 tauri 实现 webviewWindow 窗口。

安装依赖

pnpm install @tauri-apps/api

创建窗口

可以配合键盘事件一起使用

import { WebviewWindow } from '@tauri-apps/api/webviewWindow'

// 键盘事件
import { listen } from '@tauri-apps/api/event'

// 监听 'shortcut-event' 事件
listen('shortcut-event', async (event) => {
  const existedWindow = await WebviewWindow.getByLabel('search')
  if (existedWindow) {
    const isVisible = await existedWindow.isVisible()
    if (isVisible) {
      await existedWindow.hide()
    } else {
      await existedWindow.show()
    }
    return
  }
  const webview = new WebviewWindow('search', {
    center: true,
    width: 800,
    height: 100,
    alwaysOnTop: true,
    skipTaskbar: false,
    decorations: false,
    closable: false,
    url: 'http://localhost:1420/Search'
  })
  webview.once('tauri://created', function () {
    console.log('webview created')
  })
  webview.once('tauri://error', function (e) {
    console.log('error creating webview', e)
  })
})

注意事项

默认情况下，所有插件命令都被阻止，无法访问。你必须在 permissions 配置中定义一个权限列表。

 "permissions": [
    "core:webview:allow-create-webview",
    "core:window:allow-show",
    "core:webview:allow-create-webview-window",
    "core:webview:allow-webview-close",
    "core:window:allow-close",
    "core:window:allow-hide",
    "core:webview:allow-set-webview-size",
    "core:window:allow-set-size"
   ]

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