# electron-vue 嘗試做個網易雲音樂

當跑起來electron第一刻 我發現這個瀏覽器頭是不是有點丑
是不是可以隱藏起來呢,答案當然是可以的

src/main/index.js

mainWindow = new BrowserWindow({
    height: 563,
    useContentSize: true,
    width: 1000,
    webPreferences: {webSecurity: false}, // 可實現跨域
    frame: false // 去掉瀏覽器頭
  })

關閉后我發現不能關閉了，然后就解決一下

src/main/index.js

// 退出
ipcMain.on('window-all-closed', () => {
  app.quit()
})
// 小化
ipcMain.on('hide-window', () => {
  mainWindow.minimize()
})
// 最大化
ipcMain.on('show-window', () => {
  mainWindow.maximize()
})
// 還原
ipcMain.on('orignal-window', () => {
  mainWindow.unmaximize()
})

自己定義了一些控制按鈕的樣式

<div class="tools">
  <span class="tool-icon min"><i class="iconfont icon-zuixiaohua"></i></span>
  <span class="tool-icon max"><i class="iconfont icon-zuidahua"></i></span>
  <span class="tool-icon close"><i class="iconfont icon-guanbi"></i></span>
</div>

然后操作這些按鈕，綁定對應事件

  import $ from 'jquery'
  var ipcRenderer = require('electron').ipcRenderer
  var isBig = true // 窗口放大還原標示
// 關閉窗口
  $(document).on('click', '.close', function () {
    console.log(1)
    ipcRenderer.send('window-all-closed')
  })
  // 最大化
  $(document).on('click', '.max', function () {
    if (isBig) {
      ipcRenderer.send('show-window')
    } else {
      ipcRenderer.send('orignal-window')
    }
    isBig = !isBig
  })
  // 最小化
  $(document).on('click', '.min', function () {
    ipcRenderer.send('hide-window')
  })

最后我希望點擊頭部可以拖拽(只需要給頭部加上對應的樣式)

-webkit-user-select: none;
-webkit-app-region: drag;

頭部不想拖拽的部分

-webkit-app-region: no-drag;

關閉后托盤沒有小圖標 等一系列的問題

const url = path.join(__dirname, '../../static/img/on.ico')
  // 系統托盤圖標
  let tray = new Tray(url)
  // 鼠標放到系統托盤圖標上時的tips;
  tray.setToolTip('聖誕音樂')
  // 圖標的上下文菜單
  const contextMenu = Menu.buildFromTemplate(trayMenuTemplate)
  // 設置此圖標的上下文菜單
  tray.setContextMenu(contextMenu)
  // 雙擊圖片顯示窗口
  tray.on('double-click', () => {
    mainWindow.show()
    mainWindow.focus()
  })

demo地址

初步嘗試的效果如下 （馬上聖誕節了...）

有興趣的朋友歡迎star和fork繼續完善 https://github.com/artiely/electron-music

相關資料

electronjs文檔
electron-vue文檔
網易雲api