已完成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
<!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-outline-primary btn-lg btn-block mt-4″>
选择音乐
</button>
<button type=”button” id=”add-music” class=”btn btn-primary btn-lg btn-block mt-4″>
导入音乐
</button>
</div>
<script>
require(\’./ad.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()
})

　　

版权声明：本文为zxh2459917510原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://www.cnblogs.com/zxh2459917510/p/11024588.html