窗口配置 #
一、基础配置 #
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