DevOps的原理及应用详解（三）

要求

在录制之前，有个倒计时的蒙层提示；

效果

electron录制工具-倒计时准备录制效果

实现

1、无边框、透明窗口
2、保持窗口层级为最顶层
3、倒计时效果
4、倒计时结束之后修改系统托盘的状态

代码地址

// 创建 无边框、透明窗口；保持窗口层级为最顶层
new BrowserWindow({
		width: 800,
		height: 600,
		frame: true, // 无边框
		transparent: true, // 透明窗口
		alwaysOnTop: true, // 窗口总是显示在最前面
		webPreferences: {
			preload: path.join(__dirname, 'preload.mjs'),
		},
	})

// 倒计时效果；结束倒计时 通知 【count-down-end】
useEffect(() => {
		if (count <= 0) {
			window?.ipcRenderer.send('count-down-end')
			return
		} 
		const interval = setInterval(() => {
			setCount(count - 1)
		}, 1000)
		return () => {
			interval && clearInterval(interval);
		}
	}, [count])

// 监听倒计时结束，切换【系统托盘】状态
	maskWin.webContents.on('did-finish-load', () => {
		ipcMain.on('count-down-end', () => {
			maskWin?.close()
			maskWin = null
			tray?.destroy()
			tray = null
			createTray(1)
		})
		// maskWin?.webContents.openDevTools()
	})