慕課網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)})