Tauri 2.0.0-rc 使用webviewWindow 窗口

Tauri 2.0.0-rc 使用webviewWindow 窗口

介绍

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

安装依赖

pnpminstall @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 =newWebviewWindow('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/