Tauri 使用 WebviewWindow 新建窗口

我使用的是 create-tauri-app 里面自带的 Vite + React 配置。

按照官网说明，你可能这样写了：

import { WebviewWindow } from "@tauri-apps/api/window";
function App() {
    let open = () => {
        const webview = new WebviewWindow("my-label", {
            url: "https://www.tibrella.space/",
        });
        webview.once("tauri://created", function () {
            console.log("Failed");
        });
        webview.once("tauri://error", function (e) {
            console.log("Failed");
        });
    };
    return <button onClick={open}></button>;
}

但是你又发现，咋运行都跑不起来，然后控制台里面只有你自己设置好的 console.log("Failed");，其他报错一概没有。

然后搜了好久，我找到了一篇 Tauri 教程，里面提到了需要更改 /src-tauri/tauri.conf.json，但是官网文档完全没有提到这件事情......

最终解决方案：/src-tauri/tauri.conf.json 中 "allowlist" 字段添加 "window": { "create": true } 即可。

{
    "build": {
        "beforeDevCommand": "pnpm dev",
        "beforeBuildCommand": "pnpm build",
        "devPath": "http://localhost:1420",
        "distDir": "../dist",
        "withGlobalTauri": false
    },
    "package": {
        "productName": "name",
        "version": "0.0.0"
    },
    "tauri": {
        "allowlist": {
            "all": false,
            "shell": {
                "all": false,
                "open": true
-            }
+            },
+            "window": {
+                "create": true
+            }
        },
        "bundle": {
            "active": true,
            "targets": "all",
            "identifier": "com.tauri.dev",
            "icon": [
                "icons/32x32.png",
                "icons/128x128.png",
                "icons/128x128@2x.png",
                "icons/icon.icns",
                "icons/icon.ico"
            ]
        },
        "security": {
            "csp": null
        },
        "windows": [
            {
                "fullscreen": false,
                "resizable": true,
                "title": "name",
                "width": 800,
                "height": 600
            }
        ]
    }
}

修改之后就可以按照最开始提到的方法动态创建新窗口了。

本文采用 GNU 自由文档许可证许可协议，转载请注明出处。