這裡講一些關於electron中視窗的設定，主要是對原API的解讀

建立一個新的視窗

const BrowserWindow = require('electron').remote.BrowserWindow
const path = require('path')

const newWindowBtn = document.getElementById('new-window')

newWindowBtn.addEventListener('click', function (event) {
  const modalPath = path.join('file://', __dirname, '../../sections/windows/modal.html'
 
)

  let win = new BrowserWindow({ width: 400, height: 320 })
  //建立一個新視窗寬：400px，高：320px
  //ES6新增了let命令，用來宣告變數。它的用法類似於var，但是所宣告的變數，只在let命令所在的程式碼塊內有效
<!--
  建立一個隱藏的視窗 
  var win = new BrowserWindow({
  width: 400, height: 225, show: false
}) -->
  win.on('closed', function () { win = null })
  win.loadURL(modalPath)//指定渲染的頁面
 

  win.show()//開啟一個視窗
})

視窗事件

視窗事件有
- 更改視窗大小
win.on(‘resize’, updateReply)
- 視窗移動
win.on(‘move’, updateReply)
- 關閉視窗
win.on(‘closed’, function () { win = null })
- 載入視窗的URL
win.loadURL(modalPath)
- 顯示視窗
win.show()

const BrowserWindow = require('electron').remote.BrowserWindow
const
 
 path = require('path')

const manageWindowBtn = document.getElementById('manage-window')

manageWindowBtn.addEventListener('click', function (event) {
  const modalPath = path.join('file://', __dirname, '../../sections/windows/manage-modal.html')
  let win = new BrowserWindow({ width: 400, height: 275 })

  win.on('resize', updateReply)
  win.on('move', updateReply)
  win.on('closed', function () { win = null })
  win.loadURL(modalPath)
  win.show()

  function updateReply () {
    const mangageWindowReply = document.getElementById('manage-window-reply')
    const message = `Size: ${win.getSize()} Position: ${win.getPosition()}`

    mangageWindowReply.innerText = message
  }
})

建立一個沒有邊框的window

建立win的時候指定frame：false

var win = new BrowserWindow({
  transparent: true,
  frame: false
})