如何在electron中，自定义自己的窗口

在 electron 中，我们启动一个窗口的时候，默认系统是有个窗口的，但这个窗口在很多时候并不符合我们的期望，那么怎么去定义自己的窗口呢？

如何隐藏菜单栏？

使用以下的api

win.setMenu(null);

new BrowserWindow({
  titleBarStyle: 'hidden',
});

1
2
3

自定义自己的head

我们在顶部条设置-webkit-app-region: drag;这样自己的head就可以拖拽了，但这里面还是有个问题，就是hover效果会失效，我还在尝试解决

css

.head{
  width: 100%;
  height: 30px;
  line-height: 30px;
  background-color: rgb(198, 47, 47);
  /* 值为no-drag时不可拖拽 */
  -webkit-app-region: drag;
}

1
2
3
4
5
6
7
8

这个我自己也在网上搜寻了众多答案，但如果你在比如的你的body元素上，设置box-shader实际上没有效果，我们需要做的是，先将窗口的背景设置为透明的

new BrowserWindow({
   transparent: true
});

1
2
3

然后在body标签上加上内边距，设置一种盒中盒的效果，在里面的盒子，就是随意使用css设置阴影和圆角效果了