【Electron Playground】Electron 視窗問題彙總

本節旨在彙總在開發Electron 視窗可能遇到的問題，做一個彙總，後續遇到問題會持續更新。

使用new BrowserWindow() 建立出視窗，如果不作任何配置的話，視窗就會出現，預設是白色的；這個時候使用win.loadURL('https://github.com')，加載遠端資源，視窗重新渲染，進而導緻視窗出現閃爍。

解決方法：

公司業務開發的Electron應用，是給老師用的，有些老師是那種老版本Window7，并且關閉了自動更新。

解決辦法： 安裝最新版的.NET Framework 官方下載下傳位址：https://dotnet.microsoft.com/download/dotnet-framework 相關issue： https://github.com/electron/electron/issues/25186

macOS 關機會把所有的視窗關閉，如果存在

這種代碼，會導緻阻止系統關機。

導緻這種場景可以是因為調用 hide() 之後不調用 show()  方法，而隻是調用 restore() 方法，會導緻頁面挂住不能用。是以得在 restore() 方法之後添加 show() 方法

切換成新版的Electron，new BrowserWindow(options)配置更新，webPreferences中配置enableRemoteModule:true

在建立視窗時，配置一下preload.js，代碼如下：

Window系統下，菜單長的很醜，有2種方案可以隐藏菜單

使用無邊框視窗，去除菜單和邊框，自己手寫一個控制的邊框，目前github都有這些庫；

使用autoHideMenuBar:true 但是按下ALT鍵會出現菜單

主程序建立視窗

配置preload.js，将通信方法挂載到window

建立視窗傳入id

父子視窗

沒有上述那麼麻煩，配置preload就可以，具體實作

渲染程序建立視窗

渲染程序通信很簡單，通過window.open，window.open會傳回一個windowObjectReference 通過postMessage就可以通信了。并且window.open 支援傳preload等配置。

使用按鈕全屏和退出全屏是可以的，但是先點選左上角?全屏，再使用按鈕退出全屏，是不行的。因為無法知道目前的狀态是全屏，還是不是全屏。

配置preload，使用Electron自帶的全屏API

在macOS下，我們啟動Electron應用，是在Application檔案夾的外面，運作在一個隻讀的disk image。基于安全的原因，需要存在使用者自己授權，electron-util做了一個很好的封裝。可以使用 electron-util 中的 enforceMacOSAppLocation 方法。該文檔electron-util。

enforceMacOSAppLocation 方法封裝

如果你遇到Electron相關的問題，可以評論一下，我們共同解決，一起成長。

對 Electron 感興趣？請關注我們的開源項目 Electron Playground，帶你極速上手 Electron。 我們每周五會精選一些有意思的文章和消息和大家分享，來掘金關注我們的 曉前端周刊。

我們是好未來 · 曉黑闆前端技術團隊。 我們會經常與大家分享最新最酷的行業技術知識。 歡迎來 知乎、掘金、Segmentfault、CSDN、簡書、開源中國、部落格園 關注我們。