慕课网electron写音乐播放器教程，代码跟随教程变更（三）

时间 2019-12-10

标签 electron 音乐播放教程代码跟随变更繁體版

原文原文链接

经过dialog实现文件的选中

在本系列一中add.html的文件已经构建完毕了，首先优化一下获取dom节点的代码javascript

新建helper.js文件html

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

　　修改index.jsjava

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

　　编辑ad.jsdom

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

　　以后往main.js中添加electron

ipcMain.on('open-music-file',(event,arg)=>{
    dialog.showOpenDialog({
      properties:['openFile', 'multiSelections'],//打开文件，容许多选
      filters:[{name:'Music', extensions:['mp3']}]//文件类型为音乐，只能打开mp3
    }, (files) => {
      console.log(files)
    })
  })