慕課網electron寫音樂播放器教程，代碼跟隨教程變更（一）

時間 2019-12-01

標籤 electron 音樂播放教程代碼跟隨變更简体版

原文原文鏈接

已完成index和add頁面的構建，javascript

// index.html
<html>
  <head>
    <meta charset="UTF-8">
    <title>Electron 音樂播放器</title>
    <link rel="stylesheet" href="../node_modules/bootstrap/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
    <link rel="stylesheet" href="./index.css">
  </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>

//ad.html

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<h1>添加音樂到曲庫</h1>

<div id="musicList" class="mb-2">您還未選擇任何音樂文件</div>

選擇音樂

</button>

導入音樂

</button>

</div>

require('./ad.js')

</script>

</body>

</html>

　　頁面文件到目前爲止很是簡單，接下來是js文件,暫未更新有add.js,稍後放出css

//index.js
const { ipcRenderer } = require('electron')
document.getElementById('add-music-button').addEventListener('click',()=>{
    ipcRenderer.send('add-music-window','添加音樂')
})

　　此時的main.jshtml

const {app, BrowserWindow,ipcMain } = require('electron')
const path = require('path')

let mainWindow
function createWindow () {
  console.log(123)
  mainWindow = new BrowserWindow({
    width: 900,
    height: 600,
    webPreferences: {
      preload: path.join(__dirname, 'preload.js'),
      nodeIntegration:true//設置此項以使用nodejs
    },
    frame:false
  })


  mainWindow.loadFile('./renderer/index.html')
  
  mainWindow.on('closed', function () {
    
    mainWindow = null
  })
  ipcMain.on('add-music-window',(event,arg)=>{//監聽index頁面添加歌曲事件
    //event.sender.send('reply','from main')
    //等同於 mainWindow.send('reply','from main')
    const addWindow = new BrowserWindow({
      width:500,
      height:400,
      webPreferences: {
        preload: path.join(__dirname, 'preload.js'),
        nodeIntegration:true//設置此項以使用nodejs
      },
      parent:mainWindow
    })
    addWindow.loadFile('./renderer/ad.html')
  })
}


app.on('ready', createWindow)

app.on('window-all-closed', function () {
  if (process.platform !== 'darwin') app.quit()
})

app.on('activate', function () {
  if (mainWindow === null) createWindow()
})

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。