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

主页面列表的渲染

首先是main.js页面发送列表信息给index.js

在createWindow函数中添加：

mainWindow.webContents.on('did-finish-load', () => {//页面初次载入是也渲染列表
    mainWindow.send('getTracks', myStore.getTrack())
 })

而后是每次添加音乐也要从新渲染

ipcMain.on('add-track',(event, tracks) => {
   const updataedTrack = myStore.addTracks(tracks).getTrack()//链式调用
   mainWindow.send('getTracks', updataedTrack)//渲染列表
  })

　　

index.html页面的构建,这里使用了一个图标库

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">

　同时里面已经有一个div盒子

<div id="tracksList" class="mt-4"></div>

　　编辑index.js

const renderListHTML = (tracks) => {//渲染列表的函数
  const tracksList = $('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 class="col-10">
        <i class="fas fa-music mr-2 text-secondary"></i>
        <b>${track.fileName}</b>
      </div>
      <div class="col-2">
        <i class="fas fa-play mr-3" data-id="${track.id}"></i>
        <i class="fas fa-trash-alt" data-id="${track.id}"></i>
      </div>
    </li>`
    return html
  }, '')
  const emptyTrackHTML = '<div class="alert alert-primary">尚未添加任何音乐</div>'
  tracksList.innerHTML = tracks.length ? `<ul class="list-group">${tracksListHTML}</ul>` : emptyTrackHTML
}
ipcRenderer.on('getTracks', (event, tracks) => {rendererListHTML(tracks)})