字玩FontPlayer开发笔记10 Tauri2多窗口通信
字玩FontPlayer是笔者开源的一款字体设计工具，使用Vue3 + ElementUI开发，源代码：github | gitee
笔记
最近在使用Tauri进行打包应用，这两天在测试可编程脚本模块时，发现原有代码使用了window.open方法，在Tauri应用中一直触发不了新窗口弹出，查了一下说Tauri并不推荐使用window.open操作，比较好的做法是使用Tauri自带的Webview窗口功能，于是笔者就用Tauri自带的api将脚本模块重置。
设置权限
窗口功能默认是禁用的，需要开启权限才能支持。每个细分功能都用对应的权限字段，在permissions里进行设置。笔者为方便测试暂时把所有关于窗口的权限都启用了：
src-tauri/capabilities/defualt.json
{
"$schema": "../gen/schemas/desktop-schema.json",
"identifier": "default",
"description": "enables the default permissions",
"windows": [
"main",
"glyph-script"
],
"remote": {
"urls": ["https://*.tauri.app"]
},
"permissions": [
{
"identifier": "fs:scope",
"allow": [
{
"path": "$APPDATA"
},
{
"path": "$APPDATA/**"
}
]
},
"core:default",
"fs:read-files",
"fs:write-files",
"fs:allow-appdata-read-recursive",
"fs:allow-appdata-write-recursive",
"fs:default",
"dialog:default",
"core:event:allow-emit",
"core:event:allow-listen",
"core:webview:allow-clear-all-browsing-data",
"core:webview:allow-create-webview",
"core:webview:allow-create-webview-window",
"core:webview:allow-get-all-webviews",
"core:webview:allow-internal-toggle-devtools",
"core:webview:allow-print",
"core:webview:allow-reparent",
"core:webview:allow-set-webview-focus",
"core:webview:allow-set-webview-position",
"core:webview:allow-set-webview-size",
"core:webview:allow-set-webview-zoom",
"core:webview:allow-webview-close",
"core:webview:allow-webview-hide",
"core:webview:allow-webview-position",
"core:webview:allow-webview-show",
"core:webview:allow-webview-size",
"core:window:allow-available-monitors",
"core:window:allow-center",
"core:window:allow-close",
"core:window:allow-create",
"core:window:allow-current-monitor",
"core:window:allow-cursor-position",
"core:window:allow-destroy",
"core:window:allow-get-all-windows",
"core:window:allow-hide",
"core:window:allow-inner-position",
"core:window:allow-inner-size",
"core:window:allow-internal-toggle-maximize",
"core:window:allow-is-closable",
"core:window:allow-is-decorated",
"core:window:allow-is-enabled",
"core:window:allow-is-focused",
"core:window:allow-is-fullscreen",
"core:window:allow-is-maximizable",
"core:window:allow-is-maximized",
"core:window:allow-is-minimizable",
"core:window:allow-is-minimized",
"core:window:allow-is-resizable",
"core:window:allow-is-visible",
"core:window:allow-maximize",
"core:window:allow-minimize",
"core:window:allow-monitor-from-point",
"core:window:allow-outer-position",
"core:window:allow-outer-size",
"core:window:allow-primary-monitor",
"core:window:allow-request-user-attention",
"core:window:allow-scale-factor",
"core:window:allow-set-always-on-bottom",
"core:window:allow-set-always-on-top",
"core:window:allow-set-closable",
"core:window:allow-set-content-protected",
"core:window:allow-set-cursor-grab",
"core:window:allow-set-cursor-icon",
"core:window:allow-set-cursor-position",
"core:window:allow-set-decorations",
"core:window:allow-set-effects",
"core:window:allow-set-enabled",
"core:window:allow-set-focus",
"core:window:allow-set-fullscreen",
"core:window:allow-set-icon",
"core:window:allow-set-ignore-cursor-events",
"core:window:allow-set-max-size",
"core:window:allow-set-maximizable",
"core:window:allow-set-min-size",
"core:window:allow-set-minimizable",
"core:window:allow-set-position",
"core:window:allow-set-progress-bar",
"core:window:allow-set-resizable",
"core:window:allow-set-shadow",
"core:window:allow-set-size",
"core:window:allow-set-size-constraints",
"core:window:allow-set-skip-taskbar",
"core:window:allow-set-theme",
"core:window:allow-set-title",
"core:window:allow-set-title-bar-style",
"core:window:allow-set-visible-on-all-workspaces",
"core:window:allow-show",
"core:window:allow-start-dragging",
"core:window:allow-start-resize-dragging",
"core:window:allow-theme",
"core:window:allow-title",
"core:window:allow-toggle-maximize",
"core:window:allow-unmaximize",
"core:window:allow-unminimize"
]
}
打开窗口
import { WebviewWindow } from "@tauri-apps/api/webviewWindow"
const windowOptions = {
url: `${location.origin}${location.pathname}#/glyph-programming-editor`,
width: 1280,
height: 800,
x: (screen.width - 1280) / 2,
y: (screen.height - 800) / 2,
devtools: true,
}
const webview = new WebviewWindow('glyph-script', windowOptions)
注意windowOptions里devtools是指开发者工具，如果希望启用调试的话，可以设置成true方便在窗口中调用webview调试窗口。
监听窗口状态
webview.once('tauri://created', async () => {
console.log('webview created')
})
webview.once('tauri://error', function (e) {
console.log('error creating webview', e)
})
窗口间通信
窗口间通信统一用全局Event即可。
- 发送事件
import { emit, listen } from '@tauri-apps/api/event'
await emit('init-data', {
__constants: constants.value,
__script: editGlyph.value.script,
__isWeb: ENV.value === 'web'
})
- 监听事件
import { emit, listen } from '@tauri-apps/api/event'
unlistenInitData = await listen('init-data', (event) => {
const { __constants, __parameters, __script, __isWeb } = event.payload as any
window.__constants = __constants
window.__parameters = __parameters
window.__script = __script
window.__is_web = __isWeb
constants.value = __constants
parameters.value = __parameters
script.value = __script
isWeb = __isWeb
constants.value?.map((constant) => {
editMap.value[constant.uuid] = false
})
parameters.value?.map((parameter) => {
editMap.value[parameter.uuid] = false
})
codeEditor = new EditorView({
doc: script.value,
extensions: [basicSetup, javascript(), oneDark,
EditorView.updateListener.of((v) => {
script.value = v.state.doc.toString()
console.log(v.state.doc.toString()) //监测得到的最新代码
}
)],
parent: document.getElementById('codes-container'),
})
})
- 注销事件
如果希望注销事件，直接调用事件监听赋值（unlistenInitData = await listen('init-data', (event) => {...）时的返回值（此处是unlistenInitData）即可：
unlistenInitData()