慕课网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>`
}