first commit
This commit is contained in:
BIN
day01-customize-window-title/c.png
Normal file
BIN
day01-customize-window-title/c.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 105 KiB |
93
day01-customize-window-title/index.html
Normal file
93
day01-customize-window-title/index.html
Normal file
@@ -0,0 +1,93 @@
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Document</title>
|
||||
<style>
|
||||
* {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: #fbeaff;
|
||||
}
|
||||
|
||||
.menu-container {
|
||||
display: flex;
|
||||
padding: 0.75rem;
|
||||
border-bottom: 0.125rem solid #00c9a7;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.menu-container .left {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.menu-container .right {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.logo {
|
||||
background-image: url('./c.png');
|
||||
width: 1.5rem;
|
||||
height: 1.5rem;
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
.function {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-items: center;
|
||||
color: #845ec2;
|
||||
padding: 0.25rem;
|
||||
border-radius: 100%;
|
||||
transition: all 0.1s ease-in-out;
|
||||
}
|
||||
|
||||
.function:hover {
|
||||
background-color: #b39cd0;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.app {
|
||||
padding: 0.75rem;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="menu-container">
|
||||
<div class="left">
|
||||
<div class="logo"></div>
|
||||
<div class="title">Electron 自定义标题栏</div>
|
||||
</div>
|
||||
<div class="right">
|
||||
<div class="function min">
|
||||
<svg width="1rem" height="1rem" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" fill="#845ec2">
|
||||
<path d="M432 256c0 17.7-14.3 32-32 32L48 288c-17.7 0-32-14.3-32-32s14.3-32 32-32l352 0c17.7 0 32 14.3 32 32z"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="function max">
|
||||
<svg width="1rem" height="1rem" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" fill="#845ec2">
|
||||
<path d="M32 288c-17.7 0-32 14.3-32 32s14.3 32 32 32l384 0c17.7 0 32-14.3 32-32s-14.3-32-32-32L32 288zm0-128c-17.7 0-32 14.3-32 32s14.3 32 32 32l384 0c17.7 0 32-14.3 32-32s-14.3-32-32-32L32 160z"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="function close">
|
||||
<svg width="1rem" height="1rem" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512" fill="#845ec2">
|
||||
<path d="M342.6 150.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L192 210.7 86.6 105.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L146.7 256 41.4 361.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L192 301.3 297.4 406.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L237.3 256 342.6 150.6z"/>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="app">
|
||||
<h2>主体内容</h2>
|
||||
</div>
|
||||
|
||||
<script src="index.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
24
day01-customize-window-title/index.js
Normal file
24
day01-customize-window-title/index.js
Normal file
@@ -0,0 +1,24 @@
|
||||
const { remote } = require('electron')
|
||||
|
||||
window.addEventListener('DOMContentLoaded', () => {
|
||||
// 利用 remote 获取当前窗口对象
|
||||
let mainWin = remote.getCurrentWindow()
|
||||
|
||||
// 获取元素添加点击操作的监听
|
||||
let aBtns = document.getElementsByClassName('function')
|
||||
|
||||
aBtns[0].addEventListener('click', () => {
|
||||
// 最小化
|
||||
mainWin.minimize()
|
||||
})
|
||||
|
||||
aBtns[1].addEventListener('click', () => {
|
||||
// 最大化
|
||||
mainWin.isMaximized() ? mainWin.restore() : mainWin.maximize()
|
||||
})
|
||||
|
||||
aBtns[2].addEventListener('click', () => {
|
||||
// 关闭窗口操作
|
||||
mainWin.close()
|
||||
})
|
||||
})
|
||||
36
day01-customize-window-title/main.js
Normal file
36
day01-customize-window-title/main.js
Normal file
@@ -0,0 +1,36 @@
|
||||
const { app, BrowserWindow } = require('electron')
|
||||
|
||||
function createWindow() {
|
||||
let mainWin = new BrowserWindow({
|
||||
show: false, // 防止首页白屏
|
||||
width: 800,
|
||||
height: 400,
|
||||
frame: false,
|
||||
icon: 'c.png',
|
||||
webPreferences: {
|
||||
nodeIntegration: true,
|
||||
enableRemoteModule: true
|
||||
}
|
||||
})
|
||||
|
||||
mainWin.webContents.openDevTools({mode:'detach'})
|
||||
|
||||
// 防止首页白屏，否则不显示
|
||||
mainWin.on('ready-to-show', () => {
|
||||
mainWin.show()
|
||||
})
|
||||
|
||||
mainWin.loadFile('index.html')
|
||||
|
||||
mainWin.on('close', () => {
|
||||
mainWin = null // 删除引用，释放空间
|
||||
})
|
||||
}
|
||||
|
||||
app.on('ready', () => {
|
||||
createWindow()
|
||||
})
|
||||
|
||||
app.on('window-all-closed', () => {
|
||||
app.quit()
|
||||
})
|
||||
1396
day01-customize-window-title/package-lock.json
generated
Normal file
1396
day01-customize-window-title/package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
17
day01-customize-window-title/package.json
Normal file
17
day01-customize-window-title/package.json
Normal file
@@ -0,0 +1,17 @@
|
||||
{
|
||||
"name": "electron-life-cycle",
|
||||
"version": "1.0.0",
|
||||
"description": "",
|
||||
"main": "main.js",
|
||||
"scripts": {
|
||||
"start": "nodemon --watch main.js --exec npm run build",
|
||||
"build": "electron ."
|
||||
},
|
||||
"keywords": [],
|
||||
"author": "",
|
||||
"license": "ISC",
|
||||
"devDependencies": {
|
||||
"electron": "^11.2.1",
|
||||
"nodemon": "^3.1.9"
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user