electron-vue跨平臺桌面應用開發實戰教程（四）——視窗樣式&開啟新視窗
> 本文我們講解下怎麼修改視窗樣式，系統預設的視窗非常普通，通常與設計不符，所以我們要自定義，接下來我們講解下怎麼去掉原有樣式，怎麼實現實現視窗的最小化，最大化和關閉按鈕。還有怎麼開啟一個新頁面
前三篇文章傳送門
electron-vue跨平臺桌面應用開發實戰教程（一）——Hello World
electron-vue跨平臺桌面應用開發實戰教程（二）——主程序常用配置
electron-vue跨平臺桌面應用開發實戰教程（三）——動態修改視窗大小
我們基於上一篇文章的程式碼（上一篇文章的git地址：
https：//
gitee。com/hedavid/elect
ron-vue-demos
）接著寫。先看下上一篇文章實現的樣式：
接下來我們就要開始今天的講解了
1。去掉外邊框
我們修改background。js，修改createWindow方法，建立BrowserWindow時增加
frame： false
win
=
new
BrowserWindow
（{
width
：
400
，
height
：
550
，
frame
：
false
，
webPreferences
：
{
nodeIntegration
：
true
}
}）
這樣視窗就會變成這樣：
但是現在又有一個新問題，應用沒有關閉按鈕，沒有最小化按鈕，也不能拖拽移動位置了，接下來我們為他建立一個工具條。
2。增加操作欄
（注意：在此處還涉及到其他頁面的樣式調整，在這裡就不列舉了，檢視git上的程式碼即可） 我們修改Login。vue，增加以下程式碼（只展示關鍵程式碼，部分樣式和html請檢視git上的程式碼）：
const
{
ipcRenderer
}
=
require
（
‘electron’
）
// 點選最小化按鈕呼叫的方法
minimize
（）
{
ipcRenderer
。
send
（
‘minimize’
）
}，
// 點選關閉按鈕呼叫的方法
close
（）
{
ipcRenderer
。
send
（
‘close’
）
}，
視窗的拖動需要增加以下樣式：
-webkit-app-region
：
drag
；
//
可拖動
-webkit-app-region
：
no-drag
；
//
不可拖動
3。主執行緒中增加對應的最小化和關閉視窗的方法
ipcMain
。
on
（
‘close’
，
e
=>
win
。
close
（）
）
ipcMain
。
on
（
‘minimize’
，
e
=>
win
。
minimize
（）
）
接下來我們改造一下主頁面，來實現開啟新視窗的功能
4。 開啟新視窗
4。1 新建Calendar。vue
<
template
>
<
div
>
<
el
-
calendar
v
-
model
=
“value”
><
/el-calendar>
<
/div>
<
/template>
<
script
>
export
default
{
name
：
‘Calendar’
，
data
（）
{
return
{
value
：
new
Date
（）
}
}
}
<
/script>
4。2 修改router
{
path
：
‘/Calendar’
，
name
：
‘Calendar’
，
component
：
Calendar
}，
4。3 修改background。js
const
winURL
=
process
。
env
。
NODE_ENV
===
‘development’
？
‘http：//localhost：8080’
：
`file：//
${
__dirname
}
/index。html`
上邊這段程式碼主要是用來解決vue路由訪問頁面的問題，埠號是vue啟動的預設埠號，如果有需要可以自行修改
win
。
loadURL
（
winURL
）
上邊這段程式碼主要是修改主視窗載入的url，修改我我們上邊宣告的那個
// 定義calendar窗體
let
calendarWin
// 建立calendar視窗方法
function
openCalendarWindow
（）
{
calendarWin
=
new
BrowserWindow
（{
width
：
400
，
height
：
550
，
parent
：
win
，
// win是主視窗
webPreferences
：
{
nodeIntegration
：
true
}
}）
calendarWin
。
loadURL
（
winURL
+
‘#/Calendar’
）
calendarWin
。
on
（
‘closed’
，
（）
=>
{
calendarWin
=
null
}）
}
ipcMain
。
on
（
‘openCalendarWindow’
，
e
=>
openCalendarWindow
（）
）
上邊這段程式碼是開啟新視窗的程式碼，calendarWin。loadURL（winURL + ‘#/Calendar’） 是指向我們上邊建立的頁面。
4。4 在Home。vue頁面中呼叫建立新視窗的方法
openCalendarWindow
（）
{
ipcRenderer
。
send
（
‘openCalendarWindow’
）
}
接下來我們看下效果
以上就是今天的全部內容，下一篇我們講一下怎麼發系統通知，最小化到托盤，剪貼簿
下一篇：你們覺得是天涯好還是知乎好？
