5-2 点击【导入音乐】按钮没有反应

来源：5-2 获取数据渲染主窗口列表之编码

CapRust

2019-07-10

index .js 代码：

const { ipcRenderer } = require('electron')
const { $ } = require('./helper')

$('#add-music-button').addEventListener('click', () => {
    ipcRenderer.send('add-music-window')
})

const renderListHTML = (tracks) => {
    const reackList = $('#tracksList')
    const tracksListHTML = tracks.reduce((html, track) => {
        html += `<li class=" row music-track list-group-item d-flex justify-content-between align-items-center>
            <div cl;ass="col-10">
                <i class="fas fa-music mr-2"></i>
                <b>${track.fileName}</b>
            </div>
            <div class="col-2">
                <i class="fas fa-play mr-2"></i>
                <i class="fas fa-trash-alt"></i>
            </div>
        </li>`
        return html
    }, '')
    const emptyTrackHTML = '<div class="alert alert-primary">还没有添加任何音乐</div>'
    tracksListHTML.innerHTML = tracks.length ? `<ul class="list-group">${tracksListHTML}</ul>` : emptyTrackHTML
}
ipcRenderer.on('getTracks', (event, tracks) => {
    console.log('receive tracks', tracks)
    renderListHTML(tracks)
})

index.html代码：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>本地播放器</title>
    <link rel="stylesheet" href="../node_modules/bootstrap/dist/css/bootstrap.min.css">
    <link href="https://cdn.bootcss.com/font-awesome/5.8.1/css/all.css" rel="stylesheet">
  </head>
  <body>
    <div class="container mt-4">
        <h1>我的网易云音乐</h1>
        <button type="button" id="add-music-button" class="btn btn-primary btn-lg btn-block mt-4">
          添加歌曲到曲库
        </button>
        <div id="tracksList" class="mt-4">

        </div>
    </div>
    <script>
      require('./index.js')
    </script>
  </body>
</html>

写回答

4回答

CapRust

提问者

2019-07-10

helper.js

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

CapRust

提问者

2019-07-10

add.js

const { ipcRenderer } = require('electron')
const { $ } = require('./helper')
const path = require('path')

let musicFilesPath = []

$('#select-music').addEventListener('click', () => {
    ipcRenderer.send('open-music-file')
})

$('#add-music').addEventListener('click', () => {
    ipcRenderer.send('add-tracks', musicFilesPath)
})

const renderListHTML = (pathes) => {
    const musicList = $('#musicList')
    const musicItemHTML = pathes.reduce((html, music) => {
        html += `<li class="list-group-item">${path.basename(music)}</li>`
        return html
    }, '')
    musicList.innerHTML =  `<ul class="list-group">${musicItemHTML}</ul>`
}

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

CapRust

提问者

2019-07-10

add.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>添加音乐</title>
    <link rel="stylesheet" href="../node_modules/bootstrap/dist/css/bootstrap.min.css">
  </head>
  <body>
    <div class="container mt-4">
        <h1>添加音乐到曲库</h1>
        <div id="musicList" class="mb-2">您还未选择任何音乐文件</div>
        <button type="button" id="select-music" class="btn btn btn-outline-primary btn-lg btn-block mt-4">
          选择音乐
        </button>
        <button type="button" id="add-music" class="btn btn btn-primary btn-lg btn-block mt-4">
          导入音乐
        </button>
    </div>
    <script>
        require('./add.js')
    </script>
  </body>
</html>

add.html

CapRust

提问者

2019-07-10

我改正了代码里面的字母的错误（比如 const reackList -> const tracksList 这样的错误）还是不行，我发现，在主界面打开调试，会显示 receive tracks Array(8) ，显示8首歌的信息，因为我就放了8首测试的歌曲在文件夹里面，请问是为什么呢？如果老师需要提交别的代码文也请告诉我，我追加代码贴出来。

CapRust

张轩

老师，我更新了代码在上面，麻烦看下哈。

2019-07-10

共2条回复

Electron开发仿网易云音乐播放器

站内首门Electron课程，让你更专注应用的核心开发

3428 学习 · 159 问题

查看课程

相似问题

老师啥时候出进阶，electron 看了好久没入门了，现在终于可以玩起来了

回答 1