【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');
```
效果如下:
![open-windows.gif](https://img2020.cnblogs.com/other/2240081/202012/2240081-20201215104314036-2000936001.gif)
#### 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();
})
```
兩者對比有很大的區別
![window-shows.gif](https://img2020.cnblogs.com/other/2240081/202012/2240081-20201215104328967-1134994605.gif)
### 1.2. 管理視窗
所謂的管理視窗,相當於主程序可以干預視窗多少。
- 視窗的路由跳轉
- 視窗開啟新的視窗
- 視窗大小、位置等
- 視窗的顯示
- 視窗型別(無邊框視窗、父子視窗)
- 視窗內 `JavaScript` 的 `node` 許可權,預載入指令碼等
- ....
這些個方法都存在於`BrowserWindow`模組中。
#### 1.2.1. 管理應用建立的視窗
`BrowserWindow`模組在建立視窗時,會返回 **視窗例項**,這些 **視窗例項 **上有許多功能方法,我們利用這些方法,管理控制這個視窗。
在這裡使用`Map`物件來儲存這些 **視窗例項**。
```typescript
const BrowserWindowsMap =