慕課網electron寫音樂播放器教程，代碼跟隨教程變更（三）

經過dialog實現文件的選中

在本系列一中add.html的文件已經構建完畢了，首先優化一下獲取dom節點的代碼

新建helper.js文件

exports.$ = (id) => {
    return document.getElementById(id)
}

　　修改index.js

const { ipcRenderer } = require('electron')
const { $ } = require('./helper')
$('add-music-button').addEventListener('click',()=>{
    ipcRenderer.send('add-music-window')
})

　　編輯ad.js

const { $ } = require('./helper')
const { ipcRenderer } = require('electron')
$('select-music').addEventListener('click',()=>{
    ipcRenderer.send('open-music-file')
})

　　以後往main.js中添加

ipcMain.on('open-music-file',(event,arg)=>{
    dialog.showOpenDialog({
      properties:['openFile', 'multiSelections'],//打開文件，容許多選
      filters:[{name:'Music', extensions:['mp3']}]//文件類型爲音樂，只能打開mp3
    }, (files) => {
      console.log(files)
    })
  })