在node端使用winit和wry创建webview窗口
https://github.com/feitingjun/node-winit-wry
import { Window, getWindow } from 'node-winit-wry'
const win = new Window('main')
win.onCreated((windowId) => {
console.log('窗口创建成功')
})
new Window(props: WindowAttributes)
getWindow(label: string): Window
所有方法均为异步
注册窗口事件监听
响应的是操作系统发出的事件,使用API变更窗口状态不会触发
WindowEvent内的所有方法都有别名,如winodw.on('close')可以使用window.onClose
on<T extends keyof WindowEvent>(event:T, callback:(data: WindowEvent[T]) => void): void
注册只触发一次的窗口事件监听
once<T extends keyof WindowEvent>(event:T, callback:(data: WindowEvent[T]) => void): void
关闭窗口
close(): void
设置webview的URL
setUrl(url: string): Promise<void>
获取webview的URL
url(): string
在webview内执行js代码
evaluateScript(script: string): Promise<void>
在webview内执行js代码,并且以json字符串形式返回执行结果
evaluateScriptReturnResult(script: string): Promise<string>
设置webview的缩放
zoom(scale: number): Promise<void>
获取当前窗口的缩放因子(屏幕的缩放因子可以通过monitors方法获取)
scaleFactor(): Promise<number>
清除webview浏览数据
clearAllBrowsingData(): Promise<void>
设置webview背景色(macOS不支持)
setBackgroundColor(color: [number, number, number, number]): Promise<void>
返回窗口客户区域(不包含边框和标题栏)左上角相对于桌面左上角的位置
innerPosition(): Promise<Position>
返回窗口左上角相对于桌面左上角的位置
outerPosition(): Promise<Position>
设置窗口左上角相对于桌面左上角的位置
setOuterPosition(pos:Position): Promise<void>
返回窗口客户端区域的物理大小(不包括标题栏和边框)
innerSize(): Promise<Size>
设置窗口尺寸
返回新的窗口尺寸,如果窗口不允许调整大小,则返回原尺寸
返回整个窗口的物理大小
outerSize(): Promise<Size>
设置窗口的最小尺寸
setMinInnerSize(size:Size): Promise<void>
设置窗口的最大尺寸
setMaxInnerSize(size:Size): Promise<void>
设置窗口标题
setTitle(title: string): Promise<void>
返回窗口标题
title(): Promise<string>
设置窗口是否透明(如果要实现透明窗口效果需要将webview的背景也设置为透明)
setTransparent(transparent: boolean = true): Promise<void>
更改窗口模糊状态(透明窗口毛玻璃效果)
setBlur(blur: boolean = true): Promise<void>
修改窗口的可见性
setVisible(visible: boolean): Promise<void>
获取窗口的可见性
isVisible(): Promise<boolean>
设置窗口是否可调整大小
setResizable(resizable: boolean): Promise<void>
获取窗口是否可调整大小
isResizable(): Promise<boolean>
设置启用的窗口按钮
setEnabledButtons(buttons: WindowButton[] = ['close', 'maximize', 'minimize']): Promise<void>
获取启用的窗口按钮
enabledButtons(): Promise<WindowButton[]>
最小化窗口
minimized(): Promise<void>
窗口取消最小化
unminimized(): Promise<void>
获取窗口是否最小化
isMinimized(): Promise<boolean>
窗口最大化
maximized(): Promise<void>
窗口取消最小化
unmaximized(): Promise<void>
获取窗口是否最大化
isMaximized(): Promise<boolean>
获取显示器列表
monitors(): Promise<Monitor[]>
获取当前显示器
currentMonitor(): Promise<Monitor>
获取主显示器
primaryMonitor(): Promise<Monitor>
设置窗口全屏
monitorId 为 null | undefined 时在当前窗口全屏
传入monitorId则在指定显示器全屏
monitorId可通过monitors方法获取
fullscreen(monitorId?: null | <Monitor['monitorId']): Promise<void>
取消全屏
unfullscreen(): Promise<void>
获取窗口是否全屏
返回 true 表示在当前窗口全屏
返回 monitorId 表示在指定显示器全屏
返回 false 表示未全屏
isFullscreen(): Promise<Monitor['monitorId'] | boolean>
设置窗口是否无边框,默认 true 为无边框 borderless(borderless: boolean = true): Promise<void>
获取是否是无边框窗口
isBorderless(): Promise<boolean>
设置是否置顶窗口
setAlwaysOnTop(top: boolean = true): Promise<void>
设置是否置底窗口
setAlwaysOnBottom(bottom: boolean = true): Promise<void>
设置窗口图标(仅支持Windows和X11)
setIcon(icon: string): Promise<void>
聚焦窗口
focus(): Promise<void>
获取窗口是否聚焦
isFocus(): Promise<boolean>
请求用户注意窗口(如果应用程序当前已经是焦点位置,则无效)
requestUserAttention(type: UserAttentionType = 'critical'): Promise<void>
取消请求用户关注(macOS不支持)
cancelUserAttentionRequest(): Promise<void>
设置窗口主题
setTheme(theme: Theme | 'default'): Promise<void>
获取窗口主题
null 表示当前系统无法确定主题
theme(): Promise<Theme|null>
使用鼠标左键移动窗口,直到该按钮被释放(调用前鼠标左键需处于按下状态)
dragWindow(): Promise<void>
使用鼠标左键调整窗口大小,直到该按钮被释放(调用前鼠标左键需处于按下状态)
MacOS 不支持
dragResizeWindow(direction: ResizeDirection): Promise<void>
在指定位置显示窗口菜单(仅支持Windows)
showMenu(pos: Position): Promise<void>
type WindowId = number
Size = {
width: number
height: number
}
type Position = {
x: number
y: number
}
type Monitor = {
monitorId: number
width: number
height: number
scaleFactor: number
}
type WindowButton = 'close' | 'minimize' | 'maximize'
type Theme = 'light' | 'dark'
WindowLevel = 'normal' | 'alwaysOnTop' | 'alwaysOnBottom'
/**
* 请求用户注意窗口
*
* critical
** Windows 同时闪烁窗口和任务栏按钮,直到应用程序处于焦点位置
** MacOS 弹出dock图标,直到应用程序处于焦点位置
*
* informational
** Windows 闪烁任务栏按钮,直到应用程序处于焦点位置
** MacOS 弹出dock图标,弹出一次dock图标
*/
type UserAttentionType = 'critical' | 'informational'
type ResizeDirection = 'east' | 'north' | 'northEast' | 'northWest' | 'south' | 'southEast' | 'southWest' | 'west'
/**创建窗口的参数 */
interface WindowAttributes {
/**webview URL */
url?: string
/**webview HTML */
html?: string
/**webview的背景色(MacOS不支持) */
backgroundColor?: [number, number, number, number]
/**是否打开webbiew开发工具 */
devtools?: boolean
/**是否运行媒体自动播放 */
autoplay?: boolean
/**窗口尺寸(不包含标题栏和边框) */
innerSize?: Size
/**窗口最小尺寸 */
minInnerSize?: Size
/**窗口最大尺寸 */
maxInnerSize?: Size
/**窗口位置 */
position?: Position
/**窗口是否可调整大小 */
resizable?: boolean
/**窗口控制按钮列表 */
enabledButtons?: WindowButton[]
/**窗口标题 */
title?: String
/**窗口是否最大化 */
maximized?: boolean
/**窗口是否显示 */
visible?: boolean
/**窗口是否透明 */
transparent?: boolean
/**透明窗口是否模糊 */
blur?: boolean
/**是否是无边框窗口 */
borderless?: boolean
/**窗口图标 */
windowIcon?: string
/**窗口主题 */
theme?: Theme
/**调整窗口大小时的增量(大小按特定步长变化,比如width=10则宽度以10个像素的增量变化) */
resizeIncrements?: {
width?: number
height?: number
}
/**内容保护 */
contentProtected?: boolean
/**窗口层级 */
windowLevel?: WindowLevel
/**是否处于活动状态 */
active?: boolean
/**是否全屏
** 传入true在当前显示器全屏
** 传入显示器id则在指定显示器上全屏(显示器id不存在则在当前显示器全屏)
*/
fullscreen?: boolean | Monitor['monitorId']
}
interface WindowEvent {
created: WindowId
/**窗口被移动 */
move: Position
/**窗口被关闭 */
close: void
/**窗口被销毁 */
destroy: void
/**窗口失去焦点 */
blur: void
/**窗口获得焦点 */
focus: void
/**鼠标在窗口上移动 */
cursorMove: Position
/**鼠标进入窗口 */
cursorEnter: void
/**鼠标离开窗口 */
cursorOut: void
/**主题变更 */
theme: Theme
/**窗口被遮住(关闭、最小化、设置为不可见或被其他窗口遮挡) */
occluded: boolean
/**窗口大小变更 */
resize: Size
}