窗口配置 #

一、基础配置 #

1.1 窗口标识 #

json
{
    "label": "main",
    "title": "My Application"
}
属性 类型 说明
label string 窗口唯一标识符
title string 窗口标题

1.2 尺寸配置 #

json
{
    "width": 800,
    "height": 600,
    "minWidth": 400,
    "minHeight": 300,
    "maxWidth": 1200,
    "maxHeight": 900
}
属性 类型 默认值 说明
width number 800 窗口宽度
height number 600 窗口高度
minWidth number - 最小宽度
minHeight number - 最小高度
maxWidth number - 最大宽度
maxHeight number - 最大高度

1.3 位置配置 #

json
{
    "x": 100,
    "y": 100,
    "center": true
}
属性 类型 默认值 说明
x number - 窗口 X 坐标
y number - 窗口 Y 坐标
center boolean false 是否居中显示

二、外观配置 #

2.1 边框和装饰 #

json
{
    "decorations": true,
    "transparent": false,
    "alwaysOnTop": false
}
属性 类型 默认值 说明
decorations boolean true 是否显示边框和标题栏
transparent boolean false 是否透明
alwaysOnTop boolean false 是否始终置顶

2.2 macOS 特有配置 #

json
{
    "titleBarStyle": "visible",
    "hiddenTitle": false,
    "trafficLightPosition": {
        "x": 15,
        "y": 15
    },
    "fullsizeContentView": true
}
属性 类型 说明
titleBarStyle string 标题栏样式:visible/hidden/overlay
hiddenTitle boolean 是否隐藏标题
trafficLightPosition object 红绿灯按钮位置
fullsizeContentView boolean 内容视图是否延伸到标题栏

2.3 Windows 特有配置 #

json
{
    "theme": "system",
    "skipTaskbar": false
}
属性 类型 说明
theme string 主题:light/dark/system
skipTaskbar boolean 是否跳过任务栏

三、行为配置 #

3.1 窗口控制 #

json
{
    "resizable": true,
    "movable": true,
    "minimizable": true,
    "maximizable": true,
    "closable": true
}
属性 类型 默认值 说明
resizable boolean true 是否可调整大小
movable boolean true 是否可移动
minimizable boolean true 是否可最小化
maximizable boolean true 是否可最大化
closable boolean true 是否可关闭

3.2 全屏配置 #

json
{
    "fullscreen": false,
    "fullscreenable": true
}
属性 类型 默认值 说明
fullscreen boolean false 是否全屏
fullscreenable boolean true 是否允许全屏

3.3 可见性配置 #

json
{
    "visible": true,
    "focus": true
}
属性 类型 默认值 说明
visible boolean true 是否可见
focus boolean true 是否获得焦点

四、安全配置 #

4.1 WebView 配置 #

json
{
    "webPreferences": {
        "autoplay": true,
        "incognito": false,
        "clipboard": true,
        "acceptFirstMouse": false
    }
}

4.2 安全策略 #

json
{
    "security": {
        "csp": "default-src 'self'; script-src 'self' 'unsafe-inline'",
        "assetProtocol": {
            "enable": true,
            "scope": ["$RESOURCE/**"]
        }
    }
}

4.3 CSP 配置详解 #

json
{
    "csp": "default-src 'self'; " +
           "script-src 'self' 'unsafe-inline' 'unsafe-eval'; " +
           "style-src 'self' 'unsafe-inline' https://fonts.googleapis.com; " +
           "font-src 'self' https://fonts.gstatic.com; " +
           "img-src 'self' data: https:; " +
           "connect-src 'self' https://api.example.com"
}
指令 说明
default-src 默认资源策略
script-src JavaScript 脚本策略
style-src CSS 样式策略
font-src 字体资源策略
img-src 图片资源策略
connect-src 网络请求策略

五、URL 配置 #

5.1 加载本地文件 #

json
{
    "url": "index.html"
}

5.2 加载远程 URL #

json
{
    "url": "https://example.com"
}

5.3 开发模式 URL #

json
{
    "build": {
        "devUrl": "http://localhost:1420",
        "frontendDist": "../dist"
    }
}

六、预加载脚本 #

6.1 配置预加载脚本 #

json
{
    "webPreferences": {
        "preload": "preload.js"
    }
}

6.2 预加载脚本示例 #

javascript
// preload.js
const { contextBridge, ipcRenderer } = require('electron');

contextBridge.exposeInMainWorld('myAPI', {
    doSomething: () => ipcRenderer.invoke('do-something'),
    onUpdate: (callback) => ipcRenderer.on('update', callback)
});

七、初始化脚本 #

7.1 配置初始化脚本 #

rust
use tauri::WebviewWindowBuilder;

let window = WebviewWindowBuilder::new(
    app,
    "main",
    tauri::WebviewUrl::App("index.html".into())
)
.initialization_script(r#"
    // 在页面加载前执行
    window.customConfig = {
        version: '1.0.0',
        initialized: true
    };
    console.log('Initialization script executed');
"#)
.build()?;

八、平台特定配置 #

8.1 Windows 配置 #

json
{
    "windows": {
        "certificateThumbprint": null,
        "digestAlgorithm": "sha256",
        "timestampUrl": "",
        "wix": {
            "language": "zh-CN"
        },
        "nsis": {
            "installerIcon": "icons/icon.ico",
            "installMode": "currentUser"
        }
    }
}

8.2 macOS 配置 #

json
{
    "macOS": {
        "minimumSystemVersion": "10.13",
        "entitlements": null,
        "exceptionDomain": "",
        "frameworks": [],
        "providerShortName": null,
        "signingIdentity": null
    }
}

8.3 Linux 配置 #

json
{
    "linux": {
        "deb": {
            "depends": ["libwebkit2gtk-4.1-0"]
        },
        "appimage": {
            "bundleMediaFramework": false
        }
    }
}

九、动态配置 #

9.1 运行时修改配置 #

typescript
import { getCurrentWindow } from '@tauri-apps/api/window';

const window = getCurrentWindow();

// 修改标题
await window.setTitle('New Title');

// 修改大小
import { LogicalSize } from '@tauri-apps/api/dpi';
await window.setSize(new LogicalSize(1024, 768));

// 修改是否可调整大小
await window.setResizable(false);

// 修改是否置顶
await window.setAlwaysOnTop(true);

9.2 条件配置 #

rust
#[cfg(target_os = "macos")]
fn get_window_config() -> tauri::WebviewUrl {
    tauri::WebviewUrl::App("index-mac.html".into())
}

#[cfg(target_os = "windows")]
fn get_window_config() -> tauri::WebviewUrl {
    tauri::WebviewUrl::App("index-win.html".into())
}

#[cfg(target_os = "linux")]
fn get_window_config() -> tauri::WebviewUrl {
    tauri::WebviewUrl::App("index-linux.html".into())
}

十、配置示例 #

10.1 主窗口配置 #

json
{
    "label": "main",
    "title": "My Application",
    "width": 1200,
    "height": 800,
    "minWidth": 800,
    "minHeight": 600,
    "center": true,
    "resizable": true,
    "fullscreen": false,
    "decorations": true,
    "visible": true,
    "theme": "system"
}

10.2 设置窗口配置 #

json
{
    "label": "settings",
    "title": "Settings",
    "width": 500,
    "height": 600,
    "minWidth": 400,
    "minHeight": 400,
    "center": true,
    "resizable": true,
    "decorations": true,
    "visible": false,
    "parent": "main",
    "modal": false
}

10.3 无边框窗口配置 #

json
{
    "label": "splash",
    "title": "Splash",
    "width": 400,
    "height": 300,
    "center": true,
    "decorations": false,
    "transparent": true,
    "alwaysOnTop": true,
    "resizable": false,
    "skipTaskbar": true
}

10.4 全屏窗口配置 #

json
{
    "label": "presentation",
    "title": "Presentation",
    "fullscreen": true,
    "decorations": false,
    "resizable": false
}

十一、配置验证 #

11.1 验证配置 #

rust
fn validate_window_config(config: &WindowConfig) -> Result<(), String> {
    if config.width < config.min_width {
        return Err("Width cannot be less than min width".to_string());
    }
    
    if config.height < config.min_height {
        return Err("Height cannot be less than min height".to_string());
    }
    
    if config.transparent && config.decorations {
        return Err("Transparent windows should not have decorations".to_string());
    }
    
    Ok(())
}

十二、总结 #

12.1 核心要点 #

要点 说明
基础配置 标识、标题、尺寸、位置
外观配置 边框、透明、主题
行为配置 可调整、可移动、全屏
安全配置 CSP、权限控制
平台配置 各平台特有选项

12.2 下一步 #

现在你已经了解了窗口配置,接下来让我们学习 多窗口管理,掌握多窗口应用的开发技巧!

最后更新:2026-03-28