? ? ? ?Electron是一種前端開發框架，在開發Electron應用時，我們往往希望用更好看的窗體代替系統原有的窗體，所以我們有很多的技術人員會選擇用自定義窗口，下面南昌APP開發公司百恒科技小編來跟大家聊一下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

? ? ? ?以上是南昌APP開發公司百恒科技小編要跟大家聊到的關于electron開發時如何實現自定義窗口的內容，希望能夠對大家有所幫助，想要了解更多關于這方面的內容，歡迎留言咨詢百恒科技，百恒科技專注于南昌APP開發、南昌網站建設開發等互聯網服務16年。


相關文章推薦? ? ：? ? 常用的正則表達式代碼? ? ?

? ? ? ? ? ? ? ? ? ? ? ? ? ?常見的富文本編輯器有哪些？? ? ?