【Electron Playground 系列】視窗篇
阿新 • • 發佈：2020-12-15
> 作者：[Kurosaki](https://juejin.im/user/3843548381187853)
本文主要講解`Electron` 視窗的 `API` 和一些在開發之中遇到的問題。
[官方文件](https://www.electronjs.org/docs) 雖然比較全面，但是要想開發一個商用級別的桌面應用必須對整個 `Electron API` 有較深的瞭解，才能應對各種需求。
## 1. 建立視窗
通過`BrowserWindow`，來 **建立** 或者 **管理** 新的瀏覽器視窗，每個瀏覽器視窗都有一個程序來管理。
### 1.1. 簡單建立視窗
```javascript
const { BrowserWindow } = require('electron');
const win = new BrowserWindow();
win.loadURL('https://github.com');
```
效果如下：
#### 1.1.2. 優化
**問題**：`electron `的 `BrowserWindow `模組在建立時，如果沒有配置 `show:false`，在建立之時就會顯示出來，且預設的背景是白色；然後視窗請求 `HTML`，會出現視覺閃爍。
**解決**
```javascript
const { BrowserWindow } = require('electron');
const win = new BrowserWindow({ show:false });
win.loadURL('https://github.com');
win.on('ready-to-show',()=>{
win.show();
})
```
兩者對比有很大的區別
### 1.2. 管理視窗
所謂的管理視窗，相當於主程序可以干預視窗多少。
- 視窗的路由跳轉
- 視窗開啟新的視窗
- 視窗大小、位置等
- 視窗的顯示
- 視窗型別（無邊框視窗、父子視窗）
- 視窗內 `JavaScript` 的 `node` 許可權，預載入指令碼等
- ....
這些個方法都存在於`BrowserWindow`模組中。
#### 1.2.1. 管理應用建立的視窗
`BrowserWindow`模組在建立視窗時，會返回 **視窗例項**，這些 **視窗例項 **上有許多功能方法，我們利用這些方法，管理控制這個視窗。
在這裡使用`Map`物件來儲存這些 **視窗例項**。
```typescript
const BrowserWindowsMap =