? ? ? ?Electron是一種前端開發(fā)框架，在開發(fā)Electron應(yīng)用時(shí)，我們往往希望用更好看的窗體代替系統(tǒng)原有的窗體，所以我們有很多的技術(shù)人員會(huì)選擇用自定義窗口，下面南昌APP開發(fā)公司百恒科技小編來跟大家聊一下electron開發(fā)時(shí)如何實(shí)現(xiàn)自定義窗口。

? ? ? ?實(shí)現(xiàn)思路

? ? ? ?在electron的窗口中配置frame為false制作無邊窗口
? ? ? ?自己繪制toolbar
? ? ? ?利用electron中的remote獲取當(dāng)前窗口的方法獲取到當(dāng)前窗口
? ? ? ?將自己繪制的toolbar和窗口的方法進(jìn)行對(duì)接

? ? ? ?實(shí)現(xiàn)細(xì)節(jié)

? ? ? ?倉庫地址：https://github.com/wbjqiqi/electron-demos.git

? ? ? ?在electron的窗口中配置frame為false

? ? ? ?new BrowserWindow({ ... frame: false, ... });?

? ? ? ?自己繪制toolbar
? ? ? ?蕞好放進(jìn)公有組件里面，方便實(shí)現(xiàn)不同頁面不同的toolbar
? ? ? ?利用electron中的remote獲取當(dāng)前窗口的方法獲取到當(dāng)前窗口
? ? ? ?獲取當(dāng)前窗口

? ? ? ?import {remote} from 'electron'; remote.getCurrentWindow();?

? ? ? ?將自己繪制的toolbar和窗口的方法對(duì)接
? ? ? ?放大/縮小/關(guān)閉/復(fù)原

? ? ? ?const currentWindow = remote.getCurrentWindow(); currentWindow.maximize(); currentWindow.minimize(); currentWindow.close(); currentWindow.restore();?

? ? ? ?窗口的拖動(dòng)與拉伸
? ? ? ?通過樣式解決

? ? ? ?-webkit-app-region: drag;?

? ? ? ?注意：拖動(dòng)的區(qū)域要預(yù)留一條邊隙，否則無法拉伸與縮小，大約4px

? ? ? ?以上是南昌APP開發(fā)公司百恒科技小編要跟大家聊到的關(guān)于electron開發(fā)時(shí)如何實(shí)現(xiàn)自定義窗口的內(nèi)容，希望能夠?qū)Υ蠹矣兴鶐椭胍私飧嚓P(guān)于這方面的內(nèi)容，歡迎留言咨詢百恒科技，百恒科技專注于南昌APP開發(fā)、南昌網(wǎng)站建設(shè)開發(fā)等互聯(lián)網(wǎng)服務(wù)16年。


相關(guān)文章推薦? ? ：? ? 常用的正則表達(dá)式代碼? ? ?

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