Electron常见问题（一）自定义窗口

在开发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();
  

  • 窗口的拖动与拉伸
    通过样式解决

  -webkit-app-region: drag;
  

  注意：拖动的区域要预留一条边隙，否则无法拉伸与缩小，大约4px
  样式中的padding边隙

这样就可以不拘于传统，发挥自己的想象，实现更现代化的桌面窗口了。