在开发Electron应用时，我们往往希望用更好看的窗体代替系统原有的窗体。
- 结果演示
- 实现思路
- 实现细节
结果演示
实现思路
在electron的窗口中配置frame为false制作无边窗口
自己绘制toolbar
利用electron中的remote获取当前窗口的方法获取到当前窗口
将自己绘制的toolbar和窗口的方法进行对接
实现细节
仓库地址：https://github.com/wbjqiqi/electron-demos.git
- 在electron的窗口中配置frame为false
new BrowserWindow({
...
frame: false,
...
});
- 自己绘制toolbar
最好放进公有组件里面，方便实现不同页面不同的toolbar - 利用electron中的remote获取当前窗口的方法获取到当前窗口
- 获取当前窗口
import {remote} from 'electron'; remote.getCurrentWindow(); - 将自己绘制的toolbar和窗口的方法对接
- 放大/缩小/关闭/复原
const currentWindow = remote.getCurrentWindow(); currentWindow.maximize(); currentWindow.minimize(); currentWindow.close(); currentWindow.restore();- 窗口的拖动与拉伸
通过样式解决
注意：拖动的区域要预留一条边隙，否则无法拉伸与缩小，大约4px-webkit-app-region: drag;
样式中的padding边隙
这样就可以不拘于传统，发挥自己的想象，实现更现代化的桌面窗口了。
