Tauri (Part - Get the window configuration right first-JS Tutorial-php.cn

Tauri (Part - Get the window configuration right first

Preface

When developing desktop applications, understanding and correctly configuring window parameters is crucial. It helps streamline functionality and optimize the user experience.

The following content is based on the Tauri 2 official documentation and provides a detailed description of WindowConfig configuration parameters, including their functionality, default values, and applicability.

Basic Window Behaviors

Parameter	Type	Description	Default Value
acceptFirstMouse	boolean	Whether the first mouse event is accepted by the window (macOS only).	false
alwaysOnBottom	boolean	Whether the window is always placed below other windows.	false
alwaysOnTop	boolean	Whether the window is always placed above other windows.	false
backgroundColor	string	Background color of the window (in hexadecimal format).	No default value
center	boolean	Whether the window is centered on the screen.	false
closable	boolean	Whether the window can be closed.	true
contentProtected	boolean	Protects window content from being captured or recorded (partial support).	false
decorations	boolean	Whether to display window decorations (such as the title bar and borders).	true
dragDropEnabled	boolean	Whether drag-and-drop functionality is enabled.	true
focus	boolean	Whether the window gets focus when launched.	true
fullscreen	boolean	Whether the window starts in fullscreen mode.	false
hiddenTitle	boolean	Hides the title bar (macOS only).	false
incognito	boolean	Enables incognito mode to prevent data tracking.	false
label	string	Unique identifier for the window (required).	No default value
maximizable	boolean	Whether the window can be maximized.	true
maximized	boolean	Whether the window starts maximized.	false
minimizable	boolean	Whether the window can be minimized.	true
resizable	boolean	Whether the window size can be adjusted.	true
skipTaskbar	boolean	Hides the window from the taskbar (platform-dependent).	false
tabbingIdentifier	string	Identifier for grouping windows (macOS only).	No default value
theme	"light" or "dark"	Default theme of the window, partially supported.	System default
title	string	Title of the window.	"Tauri App"
titleBarStyle	string	Style of the title bar (platform-dependent, such as macOS).	Default style
transparent	boolean	Enables transparency for the window (partial support).	false
userAgent	string	Custom User-Agent for the window.	No default value
visible	boolean	Whether the window is visible.	true
visibleOnAllWorkspaces	boolean	Makes the window visible on all workspaces (macOS only).	false
windowClassname	string	Custom window class name (Windows only).	No default value
zoomHotkeysEnabled	boolean	Enables zoom hotkeys for the window.	true

Dimensions and Positioning

Parameter	Type	Description	Default Value
width	number	Initial width of the window (in pixels).	800
height	number	Initial height of the window (in pixels).	600
minWidth	number	Minimum width of the window (in pixels).	No default value
minHeight	number	Minimum height of the window (in pixels).	No default value
maxWidth	number	Maximum width of the window (in pixels).	No default value
maxHeight	number	Maximum height of the window (in pixels).	No default value
x	number	Initial X-axis position of the window (from screen top-left).	Centered
y	number	Initial Y-axis position of the window (from screen top-left).	Centered

Parameter Type Description Default Value width number Initial width of the window (in pixels). 800 height number Initial height of the window (in pixels). 600 minWidth number Minimum width of the window (in pixels). No default value minHeight number Minimum height of the window (in pixels). No default value maxWidth number Maximum width of the window (in pixels). No default value maxHeight number Maximum height of the window (in pixels). No default value x number Initial X-axis position of the window (from screen top-left). Centered y number Initial Y-axis position of the window (from screen top-left). Centered

Browser Features

Parameter	Type	Description	Default Value
additionalBrowserArgs	string	Additional command-line arguments for the browser.	No default value
browserExtensionsEnabled	boolean	Enables support for browser extensions.	false
proxyUrl	string	Custom proxy URL.	No default value
useHttpsScheme	boolean	Forces the use of HTTPS.	false

Window Effects

Parameter	Type	Description	Default Value
shadow	boolean	Whether the window shows a shadow (platform-dependent).	true
windowEffects	string	Custom window effects (e.g., blur, transparency).	No default value

JSON Configuration Example

src-tauri/tauri.conf.json

{
  "$schema": "https://schema.tauri.app/config/2.0.0",
  "productName": "Coco AI",
  "version": "0.1.0",
  "identifier": "rs.coco.app",
  "build": {
    "beforeDevCommand": "pnpm dev",
    "devUrl": "http://localhost:1420",
    "beforeBuildCommand": "pnpm build",
    "frontendDist": "../dist"
  },
  "app": {
    "macOSPrivateApi": true,
    "windows": [
      {
        "acceptFirstMouse": false, // Whether the first mouse event is accepted
        "additionalBrowserArgs": "", // Additional arguments passed to the browser
        "alwaysOnBottom": false, // Whether the window always stays at the bottom
        "alwaysOnTop": false, // Whether the window always stays on top
        "backgroundColor": "#ffffff", // Background color of the window (default is white)
        "browserExtensionsEnabled": false, // Whether browser extensions are enabled
        "center": true, // Whether the window is centered
        "closable": true, // Whether the window can be closed
        "contentProtected": false, // Whether content protection is enabled (prevents screenshots)
        "create": true, // Whether to display the window when created
        "decorations": true, // Whether to display window decorations
        "devtools": false, // Whether developer tools are enabled (disabled by default in production)
        "dragDropEnabled": true, // Whether drag-and-drop functionality is enabled
        "focus": true, // Whether the window is focused
        "fullscreen": false, // Whether the window is in fullscreen mode
        "height": 600, // Window height (default 600px)
        "hiddenTitle": false, // Whether the window title bar is hidden
        "incognito": false, // Whether incognito mode is enabled
        "label": "main", // Unique label (identifier) of the window
        "maxHeight": null, // Maximum height of the window (default is unlimited)
        "maximizable": true, // Whether the window can be maximized
        "maximized": false, // Whether the window is maximized by default
        "maxWidth": null, // Maximum width of the window (default is unlimited)
        "minHeight": 300, // Minimum height of the window (default 300px)
        "minimizable": true, // Whether the window can be minimized
        "minWidth": 300, // Minimum width of the window (default 300px)
        "parent": null, // Parent window (default is none)
        "proxyUrl": "", // Proxy URL
        "resizable": true, // Whether the window is resizable
        "shadow": true, // Whether the window shadow is displayed
        "skipTaskbar": false, // Whether to skip showing the window in the taskbar
        "tabbingIdentifier": null, // Identifier for grouping windows
        "theme": "light", // Window theme (default is light)
        "title": "Tauri App", // Window title
        "titleBarStyle": "default", // Title bar style
        "transparent": false, // Whether the window is transparent
        "url": "/", // Default URL of the window
        "useHttpsScheme": false, // Whether to enforce HTTPS
        "userAgent": null, // Custom user agent (default is null)
        "visible": true, // Whether the window is visible
        "visibleOnAllWorkspaces": false, // Whether the window is visible on all workspaces
        "width": 800, // Window width (default 800px)
        "windowClassname": "", // Window class name (customizable)
        "windowEffects": null, // Window effects (default is none)
        "x": null, // Initial X-coordinate of the window position
        "y": null, // Initial Y-coordinate of the window position
        "zoomHotkeysEnabled": true // Whether zoom hotkeys are enabled
      }
    ],
    "security": {
      "csp": null
    }
  }
}

Copy after login

Conclusion

Configuring window parameters is a crucial step in Tauri development.

Understanding the purpose and default values of each parameter not only helps in efficient implementation but also prevents potential cross-platform compatibility issues.

Refer to the Tauri Official Documentation for accurate configurations and further details.

Feel free to explore my recent Tauri project github.com/infinilabs/coco-app, which is open-source. Please consider giving it a star ?.

This is my first Tauri project, and I am learning as I go. I hope to connect with like-minded individuals to explore and grow together.

References

https://v2.tauri.app/reference/config/#windowconfig

The above is the detailed content of Tauri (Part - Get the window configuration right first. For more information, please follow other related articles on the PHP Chinese website!