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
  

這樣就可以不拘於傳統，發揮自己的想象，實現更現代化的桌面窗口了。