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

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) })

<!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 21:37:55

helper.js

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

0 回复有任何疑惑可以回复我~

收起回答

提问者 CapRust 2019-07-10 21:36:23

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
    }
})

0 回复有任何疑惑可以回复我~

收起回答

提问者 CapRust 2019-07-10 21:35:40

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

0 回复有任何疑惑可以回复我~

收起回答

提问者 CapRust 2019-07-10 14:29:44

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

0 回复有任何疑惑可以回复我~

收起回答

张轩 #1

同学你好欧 导入音乐的功能不是 add.html 那个窗口的功能嘛？你可以把 add.html 和 add.js 的代码贴过来看看

回复有任何疑惑可以回复我~ 2019-07-10 18:27:12

提问者 CapRust 回复张轩 #2
```
老师，我更新了代码在上面，麻烦看下哈。
```
回复有任何疑惑可以回复我~ 2019-07-10 21:36:54

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

正在回答回答被采纳积分+3

4回答

相似问题

请选择置顶位置

本课精华内容

添加nodemon后出现Cannot read property 'on' of undefined

老师能不能出一个vue全家桶+electron的教程呀？？好蓝瘦啊，自己整不明白呀。。。

老师，逗我玩儿呢

script中的require引用没效果

老师您好。$用不了。。。

热搜

最近搜索清空

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

正在回答 回答被采纳积分+3

4回答

相似问题

请选择置顶位置

本课精华内容

添加nodemon后出现Cannot read property 'on' of undefined

老师能不能出一个vue全家桶+electron的教程呀？？好蓝瘦啊，自己整不明白呀。。。

老师，逗我玩儿呢

script中的require引用没效果

老师您好。$用不了。。。

正在回答回答被采纳积分+3