electron学习一BrowserWindow

*BrowserWindow 创建和控制浏览器窗口

进程：主进程

一、创建程序窗口

	//主进程中用下面代码
	const { BrowserWindow,app} = require('electron')
	//或者在渲染进程中用“remote”
	// const { BrowserWindow} = require("electron").remote
	
	app.on('ready',()=>{
	    let win = new BrowserWindow({ width:600,height:800})//规定程序的窗口大小
	    win.on('closed',()=>{  //关闭窗口
	        win = null
	    })
	    
	//加载远程url
	    win.loadURL("http://www.baidu.com")
	//或者加载本地的html文件
	// win.loadURL(`file://${__dirname}/app/index.html`)
	})

效果图如下：

二、创建一个无边框窗口

无边框窗口是不带外壳（包括窗口边框、工具栏等），只含有网页内容的窗口。

1. 要创建无边框窗口，只需在 BrowserWindow 的 options 中将 frame 设置为 false：
   
   效果图如下：
   
   注：将frame设为false会把标题和窗口控制按钮（红绿灯）全部隐藏

2.titleBarStyle:“hidden”
返回一个隐藏标题栏的全尺寸内容窗口，在左上角仍然有标准的窗口控制按钮（俗称“红绿灯”）。

let win = new BrowserWindow({ width:600,height:800,titleBarStyle:"hidden"})

3.titleBarStyle:“hiddenInset”
返回一个另一种隐藏了标题栏的窗口，其中控制按钮到窗口边框的距离更大。

let win = new BrowserWindow({ width:600,height:800,titleBarStyle:"hiddenInset"})

4.titleBarStyle: ‘customButtonsOnHover’
使用自定义的关闭、缩小和全屏按钮，这些按钮会在划过窗口的左上角时显示。

let win = new BrowserWindow({ width:600,height:800, titleBarStyle: 'customButtonsOnHover'})

5.透明窗口
通过将 transparent 选项设置为 true, 还可以使无框窗口透明

let win = new BrowserWindow({ width:600,height:800, transparent:true})

6.点击穿透窗口
要创建一个点击穿透窗口，也就是使窗口忽略所有鼠标事件

win.setIgnoreMouseEvents(true)

三、显示窗口

1.使用ready-to-show事件
在加载页面时，渲染进程第一次完成绘制时，会发出 ready-to-show 事件 。 在此事件后显示窗口将没有视觉闪烁：

 win.once('ready-to-show',()=>{
      win.show()
   })

2.设置 backgroundColor
对于一个复杂的应用，ready-to-show 可能发出的太晚，会让应用感觉缓慢。 在这种情况下，建议立刻显示窗口，并使用接近应用程序背景的 backgroundColor（值只能用十六进制值）

let win = new BrowserWindow({ backgroundColor: '#2e2c29' })

四、父子窗口

const { BrowserWindow,app} = require('electron')
app.on('ready',()=>{
    let top = new BrowserWindow({backgroundColor:"#000"})
    let child = new BrowserWindow({ parent: top,backgroundColor:"#ccc"})
    child.show()
    top.show()
})

运行可见，灰色的窗口在黑色窗口之上

总结

总结：titleBarStyle:“hidden”、.titleBarStyle:"hiddenInset"和titleBarStyle: 'customButtonsOnHover’窗口效果大概是一样的。重点是怎样创建一个窗口界面、隐藏标题栏（titleBarStyle:“hidden”） 和 父子窗口。

我是前端小白，有编辑错误欢迎指正，谢谢