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

在add界面顯示已選擇的歌曲列表（原生js操做dom）

接上一條博客，繼續修改main.js中

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

　　在ad.js中添加監聽

let musicFilesPath = []
ipcRenderer.on('selected-file', (event, path) => {
    if(Array.isArray(path)){
        musicFilesPath = path
        rendererListHTML(musicFilesPath)
    }
})

　　編輯操做dom的函數

//先引入node提供的path用於從路徑中獲取文件名
const path = require('path')
const rendererListHTML = (pathes) => {
    const musicList = $('musicList')
    const musicItemsHTML = pathes.reduce((html, music) => {
        html += `<li class = "list-group-item">${path.basename(music)}</li>`
        return html
    }, '')
    musicList.innerHTML = `<ul class = "list-group">${musicItemsHTML}</ul>`
}