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`) })

效果图如下： 二、创建一个无边框窗口

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

要创建无边框窗口，只需在 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”） 和 父子窗口。

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