添加音乐窗口
首页样式
renderer/index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16 | <!DOCTYPE html>
<html lang="zh">
<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>
<button type="button" class="btn btn-primary btn-lg btn-block mt-4">
添加歌曲到曲库
</button>
</div>
</body>
</html>
|
main.js
1
2
3
4
5
6
7
8
9
10
11
12 | const { app, BrowserWindow, ipcMain } = require('electron')
app.on('ready', () => {
const mainWindow = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
nodeIntegration: true
}
})
mainWindow.loadFile('renderer/index.html')
})
|
添加音乐窗口
renderer/index.js
| const { ipcRenderer } = require('electron')
document.getElementById('add-music-button').addEventListener('click', () => {
ipcRenderer.send('add-music-window')
})
|
renderer/index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19 | <!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>Electron 音乐播放器</title>
<link rel="stylesheet" href="../node_modules/bootstrap/dist/css/bootstrap.min.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>
<script>
require('./index.js')
</script>
</body>
</html>
|
add.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16 | <!DOCTYPE html>
<html lang="zh">
<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>
<button type="button" class="btn btn-primary btn-lg btn-block mt-4">
选择音乐
</button>
</div>
</body>
</html>
|
main.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23 | const { app, BrowserWindow, ipcMain } = require('electron')
app.on('ready', () => {
const mainWindow = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
nodeIntegration: true
}
})
mainWindow.loadFile('renderer/index.html')
ipcMain.on('add-music-window', () => {
const addWindow = new BrowserWindow({
width: 500,
height: 400,
webPreferences: {
nodeIntegration: true
},
parent: mainWindow
})
addWindow.loadFile('./renderer/add.html')
})
})
|
创建窗口类
main.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26 | const { app, BrowserWindow, ipcMain } = require('electron')
class AppWindow extends BrowserWindow {
constructor(config, fileLocation) {
const basicConfig = {
width: 800,
height: 600,
webPreferences: {
nodeIntegration: true
}
}
// const finalConfig = Object.assign(basicConfig, config)
const finalConfig = { ...basicConfig, ...config }
super(finalConfig)
this.loadFile(fileLocation)
}
}
app.on('ready', () => {
const mainWindow = new AppWindow({}, 'renderer/index.html')
ipcMain.on('add-music-window', () => {
const addWindow = new AppWindow({
width: 500,
height: 400,
parent: mainWindow
}, 'renderer/add.html')
})
})
|
优雅地显示窗口
添加
| this.once('ready-to-show', () => {
this.show()
})
|
main.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29 | const { app, BrowserWindow, ipcMain } = require('electron')
class AppWindow extends BrowserWindow {
constructor(config, fileLocation) {
const basicConfig = {
width: 800,
height: 600,
webPreferences: {
nodeIntegration: true
}
}
// const finalConfig = Object.assign(basicConfig, config)
const finalConfig = { ...basicConfig, ...config }
super(finalConfig)
this.loadFile(fileLocation)
this.once('ready-to-show', () => {
this.show()
})
}
}
app.on('ready', () => {
const mainWindow = new AppWindow({}, 'renderer/index.html')
ipcMain.on('add-music-window', () => {
const addWindow = new AppWindow({
width: 500,
height: 400,
parent: mainWindow
}, 'renderer/add.html')
})
})
|
使用Dialog模块添加音乐文件
renderer/helper.js
| exports.$ = (id) => {
return document.getElementById(id)
}
|
add.html的button添加id="select-music"
| <button type="button" id="select-music" class="btn btn-outline-primary btn-lg btn-block mt-4">
选择音乐
</button>
|
renderer/add.js
| const { $ } = require('./helper')
const { ipcRenderer } = require('electron')
$('select-music').addEventListener('click', () => {
ipcRenderer.send('open-music-file')
})
|
renderer/index.js
| const { ipcRenderer } = require('electron')
const { $ } = require('./helper')
$('add-music-button').addEventListener('click', () => {
ipcRenderer.send('add-music-window')
})
|
main.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40 | const { app, BrowserWindow, ipcMain, dialog } = require('electron')
class AppWindow extends BrowserWindow {
constructor(config, fileLocation) {
const basicConfig = {
width: 800,
height: 600,
webPreferences: {
nodeIntegration: true
}
}
// const finalConfig = Object.assign(basicConfig, config)
const finalConfig = { ...basicConfig, ...config }
super(finalConfig)
this.loadFile(fileLocation)
this.once('ready-to-show', () => {
this.show()
})
}
}
app.on('ready', () => {
const mainWindow = new AppWindow({}, 'renderer/index.html')
ipcMain.on('add-music-window', () => {
const addWindow = new AppWindow({
width: 500,
height: 400,
parent: mainWindow
}, 'renderer/add.html')
})
ipcMain.on('open-music-file', () => {
dialog.showOpenDialog({
properties: ['openFile', 'multiSelections'],
filters: [{
name: 'Music', extensions: ['mp3']
}]
}).then(result => {
console.log(result.canceled)
console.log(result.filePaths)
})
})
})
|