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