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

已完成index和add页面的构建，

// 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
<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>

　　页面文件到目前为止非常简单，接下来是js文件,暂未更新有add.js,稍后放出

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

　　此时的main.js

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

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

猜你喜欢