cantyonion/electron-study
Archived
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

first commit

Browse Source
This commit is contained in:
Jeffrey Hsu 2025-01-09 18:30:49 +08:00
commit ead83056ff
99 changed files with 27286 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
.gitignore vendored Normal file
View File

@ -0,0 +1,6 @@
.vscode
.idea
**/.vscode
**/.idea
**/node_modules

1041
README.md Normal file
View File

File diff suppressed because it is too large Load Diff

12
day01-app-title/index.html Normal file
View File

@ -0,0 +1,12 @@
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
</head>
<body>
<h1>Window Title</h1>
<button id="btn">点击打开新窗口</button>
<script src="index.js"></script>
</body>
</html>

19
day01-app-title/index.js Normal file
View File

@ -0,0 +1,19 @@
const { remote } = require('electron')
window.addEventListener('DOMContentLoaded', () => {
// 点击按钮打开新窗口
const oBtn = document.getElementById('btn')
oBtn.addEventListener('click', () => {
// 创建窗口
let indexMain = new remote.BrowserWindow({
width: 200,
height: 200
})
indexMain.loadFile('list.html')
indexMain.on('close', () => {
indexMain = null
})
})
})

10
day01-app-title/list.html Normal file
View File

@ -0,0 +1,10 @@
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>新窗口</title>
</head>
<body>
<h2>新窗口</h2>
</body>
</html>

37
day01-app-title/main.js Normal file
View File

@ -0,0 +1,37 @@
const { app, BrowserWindow } = require('electron')
function createWindow() {
let mainWin = new BrowserWindow({
width: 800,
height: 600,
show: false,
title: "标题", // 要在网页里的标题去除
icon: "w.png", // 设置图标
frame: true, // 是否显示标题栏
transparent: false, // 透明窗体
autoHideMenuBar: true, // 隐藏菜单
webPreferences: {
nodeIntegration: true, // Node集成环境
enableRemoteModule: true, // 开启远程模块 remote
}
})
// 防止首页白屏，否则不显示
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-app-title/package-lock.json generated Normal file
View File

File diff suppressed because it is too large Load Diff

17
day01-app-title/package.json Normal file
View 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"
}
}

BIN
day01-app-title/w.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 11 KiB

10
day01-app-window-size/index.html Normal file
View File

@ -0,0 +1,10 @@
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>Window Size</h1>
</body>
</html>

35
day01-app-window-size/main.js Normal file
View File

@ -0,0 +1,35 @@
const { app, BrowserWindow } = require('electron')
function createWindow() {
let mainWin = new BrowserWindow({
x: 100, // 相对于屏幕左上角
y: 100,
show: false, // 防止首页白屏
width: 800,
height: 400,
maxHeight: 600, // 最大值
maxWidth: 1000,
minHeight: 200, // 最小值
minWidth: 300,
resizable: false // 固定大小，禁止缩放
})
// 防止首页白屏，否则不显示
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-app-window-size/package-lock.json generated Normal file
View File

File diff suppressed because it is too large Load Diff

17
day01-app-window-size/package.json Normal file
View 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"
}
}

10
day01-customize-menu/index.html Normal file
View File

@ -0,0 +1,10 @@
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
</head>
<body>
<h2>自定义菜单</h2>
</body>
</html>

60
day01-customize-menu/main.js Normal file
View File

@ -0,0 +1,60 @@
const { app, BrowserWindow, Menu } = require("electron");
console.log(process.platform) // 平台判断
const createWindow = () => {
let mainWin = new BrowserWindow({
show: false,
width: 800,
height: 400,
title: "自定义菜单",
webPreferences: {
nodeIntegration: true,
enableRemoteModule: true,
},
});
// 定义自己需要的菜单项
let menuTemp = [
{
label: "文件",
submenu: [
{
label: "打开文件",
click() {
console.log("打开文件夹")
}
},
{
type: 'separator'
},
{
label: "关闭文件夹"
},
{
label: "关于",
role: 'about'
},
],
},
{ label: "编辑" },
];
// 利用上述模板生成一个菜单项
let menu = Menu.buildFromTemplate(menuTemp);
// 添加到应用里
Menu.setApplicationMenu(menu);
mainWin.loadFile("index.html");
mainWin.on("ready-to-show", () => {
mainWin.show();
});
mainWin.on("close", () => {
mainWin = null;
});
};
app.on("ready", createWindow);
app.on("window-all-closed", () => {
app.quit();
});

1396
day01-customize-menu/package-lock.json generated Normal file
View File

File diff suppressed because it is too large Load Diff

17
day01-customize-menu/package.json Normal file
View 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"
}
}

BIN
day01-customize-window-title/c.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 105 KiB

93
day01-customize-window-title/index.html Normal file
View 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
View 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
View 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
View File

File diff suppressed because it is too large Load Diff

17
day01-customize-window-title/package.json Normal file
View 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"
}
}

10
day01-electron-life-cycle/index.html Normal file
View File

@ -0,0 +1,10 @@
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>Life Cycle</h1>
</body>
</html>

45
day01-electron-life-cycle/main.js Normal file
View File

@ -0,0 +1,45 @@
const { app, BrowserWindow } = require('electron')
function createWindow() {
let mainWin = new BrowserWindow({
width: 600,
height: 400
})
mainWin.loadFile('index.html')
mainWin.webContents.on('did-finish-load', () => {
console.log('3 - did finish load')
})
mainWin.webContents.on('dom-ready', () => {
console.log('2 - dom ready')
})
mainWin.on('close', () => {
console.log('8 - win closed') // 多窗口时最后触发
mainWin = null // 删除引用，释放空间
})
}
app.on('ready', () => {
console.log('1 - ready')
createWindow()
})
app.on('window-all-closed', () => {
console.log('4 - window all closed')
app.quit()
})
app.on('before-quit', () => {
console.log('5 - before quit')
})
app.on('will-quit', () => {
console.log('6 - will-quit')
})
app.on('quit', () => {
console.log('7 - quit')
})

1034
day01-electron-life-cycle/package-lock.json generated Normal file
View File

File diff suppressed because it is too large Load Diff

15
day01-electron-life-cycle/package.json Normal file
View File

@ -0,0 +1,15 @@
{
"name": "electron-life-cycle",
"version": "1.0.0",
"description": "",
"main": "main.js",
"scripts": {
"start": "electron ."
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"electron": "^11.2.1"
}
}

10
day01-new-project-manual/index.html Normal file
View File

@ -0,0 +1,10 @@
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>标题</title>
</head>
<body>
<h1>啦啦啦啦</h1>
</body>
</html>

18
day01-new-project-manual/main.js Normal file
View File

@ -0,0 +1,18 @@
const { app, BowserWindow } = require('electron')
app.whenReady().then(() => {
const mainWin = new BowserWindow({
width: 600,
height: 400
})
mainWin.loadFile('index.html')
mainWin.on('close', () => {
console.log(111);
})
})
app.on('window-all-closed', () => {
app.quit()
})

1034
day01-new-project-manual/package-lock.json generated Normal file
View File

File diff suppressed because it is too large Load Diff

15
day01-new-project-manual/package.json Normal file
View File

@ -0,0 +1,15 @@
{
"name": "xxxx",
"version": "x.x.x",
"description": "",
"main": "main.js",
"scripts": {
"start": "electron ."
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"electron": "^11.2.1"
}
}

BIN
day01-prevent-window-close/c.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 105 KiB

132
day01-prevent-window-close/index.html Normal file
View File

@ -0,0 +1,132 @@
<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;
position: relative;
}
.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;
}
.dialog {
display: none;
width: 20rem;
height: 5rem;
padding: 2rem;
position: absolute;
background-color: white;
top: 40%;
left: 50%;
transform: translateX(-11rem) translateY(-2.5rem);
}
.confirm {
position: absolute;
bottom: 1.25rem;
right: 1.25rem;
width: 5rem;
height: 2rem;
line-height: 2rem;
text-align: center;
border: 1px solid #b39cd0;
border-radius: 999px;
cursor: pointer;
}
.dialog .yes {
right: 6.75rem;
background-color: #b39cd0;
}
</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>
<div class="dialog">
<div class="message">
是否关闭？
</div>
<span class="confirm yes">是</span>
<span class="confirm no">否</span>
</div>
<script src="index.js"></script>
</body>
</html>

43
day01-prevent-window-close/index.js Normal file
View File

@ -0,0 +1,43 @@
const { remote } = require('electron')
window.addEventListener('DOMContentLoaded', () => {
window.onbeforeunload = function () {
let oBox = document.getElementsByClassName('dialog')[0]
oBox.style.display = 'block'
let yBtn = oBox.getElementsByClassName('confirm')[0]
let nBtn = oBox.getElementsByClassName('confirm')[1]
yBtn.addEventListener('click', () => {
mainWin.destroy() // 不用 close 防止死循环
})
nBtn.addEventListener('click', () => {
oBox.style.display = 'none'
})
return false
}
// 利用 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-prevent-window-close/main.js Normal file
View 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-prevent-window-close/package-lock.json generated Normal file
View File

File diff suppressed because it is too large Load Diff

17
day01-prevent-window-close/package.json Normal file
View 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"
}
}

12
day01-sub-window/index.html Normal file
View File

@ -0,0 +1,12 @@
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>主界面</title>
</head>
<body>
<h2>子窗口及模态窗口</h2>
<button id="btn">新增窗口</button>
<script src="index.js"></script>
</body>
</html>

18
day01-sub-window/index.js Normal file
View File

@ -0,0 +1,18 @@
const { remote } = require('electron')
window.addEventListener('DOMContentLoaded', () => {
let oBtn = document.getElementById('btn')
oBtn.addEventListener('click', () => {
let subWin = new remote.BrowserWindow({
width: 200,
height: 200,
parent: remote.getCurrentWindow(), // 设置父窗口
modal: true, // 设置模态窗口
})
subWin.loadFile('sub.html')
subWin.on('close', () => {
subWin = null
})
})
})

27
day01-sub-window/main.js Normal file
View File

@ -0,0 +1,27 @@
const { app, BrowserWindow } = require('electron')
const createWindow = () => {
let mainWin = new BrowserWindow({
show: false,
width: 800,
height: 400,
webPreferences: {
nodeIntegration: true,
enableRemoteModule: true
}
})
mainWin.loadFile('index.html')
mainWin.on('ready-to-show', () => {
mainWin.show()
})
mainWin.on('close', () => {
mainWin = null
})
}
app.on('ready', createWindow)
app.on('window-all-closed', () => {
app.quit()
})

1396
day01-sub-window/package-lock.json generated Normal file
View File

File diff suppressed because it is too large Load Diff

17
day01-sub-window/package.json Normal file
View 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"
}
}

10
day01-sub-window/sub.html Normal file
View File

@ -0,0 +1,10 @@
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>xxx窗口</title>
</head>
<body>
<h2>子窗口</h2>
</body>
</html>

18
day02-correspond-between-render-thread/index.html Normal file
View File

@ -0,0 +1,18 @@
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>渲染进程间通信</title>
<style>
* {
margin: 0.75rem 0.25rem;
}
</style>
</head>
<body>
<h2>渲染进程间通信</h2>
<button id="btn">打开窗口2</button>
<script src="index.js"></script>
</body>
</html>

18
day02-correspond-between-render-thread/index.js Normal file
View File

@ -0,0 +1,18 @@
const { ipcRenderer } = require('electron')
window.onload = () => {
// 先获取元素
let oBtn = document.getElementById('btn')
oBtn.addEventListener('click', () => {
ipcRenderer.send('openWin2', '来自于 index 进程')
// 打开窗口2之后，保存数据至。。。
// localStorage.setItem('name', '啦啦啦啦')
})
// 接受消息
ipcRenderer.on('mti', (_, data) => {
alert(data)
})
}

58
day02-correspond-between-render-thread/main.js Normal file
View File

@ -0,0 +1,58 @@
const { app, BrowserWindow, ipcMain } = require('electron')
// 定义全局变量存放主窗口 Id
let mainWinId = null
const createWindow = () => {
let mainWin = new BrowserWindow({
show: false,
width: 800,
height: 400,
webPreferences: {
nodeIntegration: true,
enableRemoteModule: true
}
})
mainWin.loadFile('index.html')
mainWinId = mainWin.id
mainWin.on('ready-to-show', () => {
mainWin.show()
})
mainWin.on('close', () => {
mainWin = null
})
}
// 接受其他进程发送的数据，完成后续的逻辑
ipcMain.on('openWin2', (_, data) => {
// 接收到渲染进程中按钮点击信息之后完成窗口2的打开
let subWin1 = new BrowserWindow({
width: 400,
height: 300,
parent: BrowserWindow.fromId(mainWinId), // 或定义全局变量
webPreferences: {
nodeIntegration: true,
enableRemoteModule: true
}
})
subWin1.loadFile('subWin1.html')
subWin1.on('close', () => {
subWin1 = null
})
// 转交给进程
subWin1.webContents.on('did-finish-load', () => {
subWin1.webContents.send('its', data)
})
})
ipcMain.on('stm', (ev, data) => {
// 转交给进程
let mainWin = BrowserWindow.fromId(mainWinId)
mainWin.webContents.send('mti', data)
})
app.on('ready', createWindow)
app.on('window-all-closed', () => {
app.quit()
})

1396
day02-correspond-between-render-thread/package-lock.json generated Normal file
View File

File diff suppressed because it is too large Load Diff

17
day02-correspond-between-render-thread/package.json Normal file
View 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"
}
}

14
day02-correspond-between-render-thread/subWin1.html Normal file
View File

@ -0,0 +1,14 @@
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>subWin1</title>
</head>
<body>
<h2>当前窗口2</h2>
获取到index.html的数据：<input type="text" name="" id="txt">
<br><br>
<button id="btn">发送数据</button>
<script src="subWin1.js"></script>
</body>
</html>

20
day02-correspond-between-render-thread/subWin1.js Normal file
View File

@ -0,0 +1,20 @@
const { ipcRenderer } = require('electron')
window.onload = () => {
let oInput = document.getElementById('txt')
let val = localStorage.getItem('name')
oInput.value = val
// 在 sub 中发送数据给 index.js
let oBtn = document.getElementById('btn')
oBtn.addEventListener('click', () => {
ipcRenderer.send('stm', '来自于sub进程')
})
// 接收数据
ipcRenderer.on('its', (_, data) => {
alert(data)
})
}

22
day02-create-menu-dynamically/index.html Normal file
View File

@ -0,0 +1,22 @@
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>自定义菜单</title>
<style>
* {
margin: 0.75rem 0.25rem;
}
</style>
</head>
<body>
<h2>自定义菜单</h2>
<button id="addMenu">创建自定义菜单</button>
<br>
<input type="text" placeholder="输入自定义菜单项内容" id="menuCon">
<br>
<button id="addItem">添加菜单项</button>
<script src="index.js"></script>
</body>
</html>

40
day02-create-menu-dynamically/index.js Normal file
View File

@ -0,0 +1,40 @@
const { remote } = require('electron')
const Menu = remote.Menu
const MenuItem = remote.MenuItem
window.addEventListener('DOMContentLoaded', () => {
// 获取相应的元素
let addMenu = document.getElementById('addMenu')
let menuCon = document.getElementById('menuCon')
let addItem = document.getElementById('addItem')
// 自定义全局变量存放菜单项
let menuItem = new Menu()
// 生成自定义的菜单
addMenu.addEventListener('click', () => {
// 创建菜单
let menuFile = new MenuItem({ label: '文件', type: 'normal' })
let menuEdit = new MenuItem({ label: '编辑', type: 'normal' })
let customMenu = new MenuItem({ label: '自定义菜单项', submenu: menuItem })
// 将创建好的自定义菜单添加至 menu
let menu = new Menu()
menu.append(menuFile)
menu.append(menuEdit)
menu.append(customMenu)
// 将 menu 添加至 app 中显示
Menu.setApplicationMenu(menu)
})
// 动态添加菜单项
addItem.addEventListener('click', () => {
// 获取当前 input 输入框中的元素
let con = menuCon.value.trim()
if (con) {
menuItem.append(new MenuItem({ label: con, type: 'normal' }))
menuCon.value = ''
}
})
})

29
day02-create-menu-dynamically/main.js Normal file
View File

@ -0,0 +1,29 @@
const { app, BrowserWindow } = require('electron')
const createWindow = () => {
let mainWin = new BrowserWindow({
show: false,
width: 800,
height: 600,
webPreferences: {
nodeIntegration: true,
enableRemoteModule: true
}
})
mainWin.loadFile('index.html')
mainWin.on('ready-to-show', () => {
mainWin.show()
})
mainWin.on('close', () => {
mainWin = null
})
}
app.on('ready', createWindow)
app.on('window-all-closed', () => {
app.quit()
})

1396
day02-create-menu-dynamically/package-lock.json generated Normal file
View File

File diff suppressed because it is too large Load Diff

17
day02-create-menu-dynamically/package.json Normal file
View 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"
}
}

12
day02-create-right-click-menu/index.html Normal file
View File

@ -0,0 +1,12 @@
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>右键菜单</title>
</head>
<body>
<h2>右键菜单</h2>
<script src="index.js"></script>
</body>
</html>

29
day02-create-right-click-menu/index.js Normal file
View File

@ -0,0 +1,29 @@
const { remote } = require('electron')
const Menu = remote.Menu
let contextTemp = [
{lable: 'Run Code'},
{lable: '转到定义'},
{type: 'separator'},
{
lable: '其他功能',
click() {
alert('其他功能选项');
}
},
]
let menu = Menu.buildFromTemplate(contextTemp)
// 给鼠标添加监听
window.addEventListener('DOMContentLoaded', () => {
window.addEventListener('contextmenu', (ev) => {
ev.preventDefault()
menu.popup({window: remote.getCurrentWindow()})
}, false)
})
/**
* 01 创建一个自定义的菜单内容
* 02 在鼠标右击行为发生后显示出来
*/

26
day02-create-right-click-menu/main.js Normal file
View File

@ -0,0 +1,26 @@
const { app, BrowserWindow } = require('electron')
const createWindow = () => {
let mainWin = new BrowserWindow({
show: false,
width: 800,
height: 400,
webPreferences: {
nodeIntegration: true,
enableRemoteModule: true
}
})
mainWin.loadFile('index.html')
mainWin.on('ready-to-show', () => {
mainWin.show()
})
mainWin.on('close', () => {
mainWin = null
})
}
app.on('ready', createWindow)
app.on('window-all-closed', () => {
app.quit()
})

1396
day02-create-right-click-menu/package-lock.json generated Normal file
View File

File diff suppressed because it is too large Load Diff

17
day02-create-right-click-menu/package.json Normal file
View 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"
}
}

14
day02-dialog-module/index.html Normal file
View File

@ -0,0 +1,14 @@
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dialog 模块</title>
</head>
<body>
<h2>Dialog 模块</h2>
<button id="btn">显示对话框</button>
<br><br>
<button id="btnErr">显示错误对话框</button>
<script src="index.js"></script>
</body>
</html>

26
day02-dialog-module/index.js Normal file
View File

@ -0,0 +1,26 @@
const { remote } = require('electron')
window.onload = () => {
let oBtn = document.getElementById('btn')
let oBtnErr = document.getElementById('btnErr')
oBtn.addEventListener('click', () => {
remote.dialog.showOpenDialog({
defaultPath: __dirname, // 默认打开目录
buttonLabel: '请选择', // 按钮上的文字
title: '啦啦啦啦', // 对话框标题
properties: ['openFiles', 'multiSelections'], // 文件类型
filters: [ // 文件类型过滤
{'name': '代码文件', extensions: ['js', 'json', 'html']},
{'name': '图片文件', extensions: ['ico', 'jpeg', 'png']},
{'name': '媒体类型', extensions: ['avi', 'mp4', 'mp3']},
],
}).then(ret => {
alert(ret)
})
})
oBtnErr.addEventListener('click', () => {
remote.dialog.showErrorBox('自定义标题', '当前错误内容')
})
}

29
day02-dialog-module/main.js Normal file
View File

@ -0,0 +1,29 @@
const { app, BrowserWindow } = require('electron')
function createWindow() {
let mainWin = new BrowserWindow({
show: false, // 防止首页白屏
width: 800,
height: 400,
webPreferences: {
nodeIntegration: true,
enableRemoteModule: true
}
})
// 防止首页白屏，否则不显示
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
day02-dialog-module/package-lock.json generated Normal file
View File

File diff suppressed because it is too large Load Diff

17
day02-dialog-module/package.json Normal file
View 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"
}
}

21
day02-main-thread-correspond-with-render-thread/index.html Normal file
View File

@ -0,0 +1,21 @@
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>渲染进程与主进程通信</title>
<style>
* {
margin: 0.75rem 0.25rem;
}
</style>
</head>
<body>
<h2>渲染进程与主进程通信</h2>
<button>渲到主异步操作</button>
<br>
<button>渲到主同步操作</button>
<script src="index.js"></script>
</body>
</html>

26
day02-main-thread-correspond-with-render-thread/index.js Normal file
View File

@ -0,0 +1,26 @@
const { ipcRenderer } = require('electron')
window.onload = () => {
// 获取元素
let aBtn = document.getElementsByTagName('button')
// 01 采用异步的 API 在渲染进程中给主进程发送信息
aBtn[0].addEventListener('click', () => {
ipcRenderer.send('msg1', '来自于渲染进程的一条异步消息')
})
// 02 采用同步的 API 在渲染进程中给主进程发送信息
aBtn[1].addEventListener('click', () => {
let val = ipcRenderer.sendSync('msg2', '来自于渲染进程的一条同步消息')
alert(val)
})
// 接收消息的区域
ipcRenderer.on('msg1Re', (ev, data) => {
alert(data)
})
ipcRenderer.on('mtp', (ev, data) => {
alert(data)
})
}

52
day02-main-thread-correspond-with-render-thread/main.js Normal file
View File

@ -0,0 +1,52 @@
const { app, BrowserWindow, ipcMain, Menu } = require('electron')
const createWindow = () => {
let mainWin = new BrowserWindow({
show: false,
width: 800,
height: 400,
webPreferences: {
nodeIntegration: true,
enableRemoteModule: true
}
})
let temp = [
{
label: 'send',
click() {
// 主进程主动与渲染进程发送消息
BrowserWindow.getFocusedWindow().webContents.send('mtp', '来自于主进程的消息')
}
}
]
let menu = Menu.buildFromTemplate(temp)
Menu.setApplicationMenu(menu)
mainWin.loadFile('index.html')
mainWin.webContents.openDevTools()
mainWin.on('ready-to-show', () => {
mainWin.show()
})
mainWin.on('close', () => {
mainWin = null
})
}
app.on('ready', createWindow)
app.on('window-all-closed', () => {
app.quit()
})
// 主进程接收消息操作
ipcMain.on('msg1', (ev, data) => {
console.log(data)
ev.sender.send('msg1Re', '来自于主进程的异步消息')
})
ipcMain.on('msg2', (ev, data) => {
console.log(data)
ev.returnValue = '来自于主进程的同步消息'
})

1396
day02-main-thread-correspond-with-render-thread/package-lock.json generated Normal file
View File

File diff suppressed because it is too large Load Diff

17
day02-main-thread-correspond-with-render-thread/package.json Normal file
View 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"
}
}

12
day02-menu-role-and-type/index.html Normal file
View File

@ -0,0 +1,12 @@
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
</head>
<body>
<h1>菜单角色及类型</h1>
<input type="text" name="" id="">
<p>test</p>
</body>
</html>

79
day02-menu-role-and-type/main.js Normal file
View File

@ -0,0 +1,79 @@
const { app, BrowserWindow, Menu } = require('electron')
function createWindow() {
let mainWin = new BrowserWindow({
width: 800,
height: 600,
show: false,
title: "标题", // 要在网页里的标题去除
icon: "w.png", // 设置图标
webPreferences: {
nodeIntegration: true, // Node集成环境
enableRemoteModule: true, // 开启远程模块 remote
}
})
// 01 自定义菜单的内容
let menuTemp = [
{
label: '角色',
submenu: [
{ label: '复制', role: 'copy' },
{ label: '剪切', role: 'cut' },
{ label: '粘贴', role: 'paste' },
{ label: '最小化', role: 'minimize' }
]
},
{
label: '类型',
submenu: [
{ label: '选项1', type: 'checkbox' },
{ label: '选项2', type: 'checkbox' },
{ label: '选项3', type: 'checkbox' },
{ type: 'separator' },
{ label: 'item1', type: 'radio' },
{ label: 'item2', type: 'radio' },
{ type: 'separator' },
{ label: 'windows', type: 'submenu', role: 'windowMenu'}
]
},
{
label: '其他',
submenu: [
{
label: '打开',
icon: 'open.png',
accelerator: 'ctrl + o',
click() {
console.log('open 执行了')
}
}
]
}
]
// 02 依据上述数据创建一个 menu
let menu = Menu.buildFromTemplate(menuTemp)
// 03 将上述的菜单添加至 app 中
Menu.setApplicationMenu(menu)
mainWin.loadFile('index.html')
// 防止首页白屏，否则不显示
mainWin.on('ready-to-show', () => {
mainWin.show()
})
mainWin.on('close', () => {
mainWin = null // 删除引用，释放空间
})
}
app.on('ready', () => {
createWindow()
})
app.on('window-all-closed', () => {
app.quit()
})

BIN
day02-menu-role-and-type/open.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.6 KiB

1396
day02-menu-role-and-type/package-lock.json generated Normal file
View File

File diff suppressed because it is too large Load Diff

17
day02-menu-role-and-type/package.json Normal file
View 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"
}
}

BIN
day02-menu-role-and-type/w.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 11 KiB

BIN
day03-clipboard/c.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 105 KiB

18
day03-clipboard/index.html Normal file
View File

@ -0,0 +1,18 @@
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>剪切板</title>
</head>
<body>
<h2>剪切板</h2>
<input type="text" placeholder="输入需要复制的内容">
<button>复制</button>
<br><br>
<input type="text" placeholder="将内容粘贴至此处">
<button>粘贴</button>
<br><br>
<button id="clipImg">将图片拷贝至剪切板再粘贴至界面</button>
<script src="index.js"></script>
</body>
</html>

31
day03-clipboard/index.js Normal file
View File

@ -0,0 +1,31 @@
const { clipboard, nativeImage } = require('electron')
window.onload = () => {
// 获取元素
let aBtn = document.getElementsByTagName('button')
let aInput = document.getElementsByTagName('input')
let oBtn = document.getElementById('clipImg')
let ret = null
aBtn[0].onclick = () => {
// 复制内容
ret = clipboard.writeText(aInput[0].value)
}
aBtn[1].onclick = () => {
// 粘贴内容
aInput[1].value = clipboard.readText(ret)
}
oBtn.onclick = () => {
// 将图片放置于剪切板的时候要求图片类型属于 nativeImage 类型
let oImage = nativeImage.createFromPath('c.png')
clipboard.writeImage(oImage)
// 将剪切板中的图片作为 DOM 元素显示在界面上
let oImg = clipboard.readImage()
let oImgDom = new Image()
oImgDom.src = oImg.toDataURL() // 转换为base64
document.body.appendChild(oImgDom)
}
}

22
day03-clipboard/main.js Normal file
View File

@ -0,0 +1,22 @@
const { app, BrowserWindow } = require('electron')
const createWindow = () => {
let mainWin = new BrowserWindow({
width: 800,
height: 400,
show: false,
webPreferences: {
enableRemoteModule: true,
nodeIntegration: true
}
})
mainWin.loadFile('index.html')
mainWin.on('ready-to-show', mainWin.show)
mainWin.on('close', () => {
mainWin = null
})
}
app.on('ready', createWindow)
app.on('window-all-closed', app.quit)

1396
day03-clipboard/package-lock.json generated Normal file
View File

File diff suppressed because it is too large Load Diff

17
day03-clipboard/package.json Normal file
View 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"
}
}

BIN
day03-global-shotcut/c.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 105 KiB

11
day03-global-shotcut/index.html Normal file
View File

@ -0,0 +1,11 @@
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>全局快捷键</title>
</head>
<body>
<h2>全局快捷键</h2>
<script src="index.js"></script>
</body>
</html>

3
day03-global-shotcut/index.js Normal file
View File

@ -0,0 +1,3 @@
window.onload = () => {
}

44
day03-global-shotcut/main.js Normal file
View File

@ -0,0 +1,44 @@
const { app, BrowserWindow, globalShortcut } = require('electron')
const createWindow = () => {
let mainWin = new BrowserWindow({
width: 800,
height: 400,
show: false,
webPreferences: {
enableRemoteModule: true,
nodeIntegration: true
}
})
mainWin.loadFile('index.html')
mainWin.on('ready-to-show', mainWin.show)
mainWin.on('close', () => {
mainWin = null
})
}
app.on('ready', createWindow)
app.on('ready', () => {
// 注册
let ret = globalShortcut.register('ctrl + q', () => {
console.log("快捷键注册成功")
})
if (!ret) {
console.log('注册失败')
}
console.log(globalShortcut.isRegistered('ctrl + q'))
console.log(ret, '~~~~~')
})
app.on('will-quit', () => {
globalShortcut.unregister('ctrl + q')
globalShortcut.unregisterAll()
})
app.on('window-all-closed', app.quit)

1396
day03-global-shotcut/package-lock.json generated Normal file
View File

File diff suppressed because it is too large Load Diff

17
day03-global-shotcut/package.json Normal file
View 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"
}
}

BIN
day03-notification/c.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 105 KiB

12
day03-notification/index.html Normal file
View File

@ -0,0 +1,12 @@
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>消息通知</title>
</head>
<body>
<h2>基于 H5 实现消息通知</h2>
<button id="btn">触发消息</button>
<script src="index.js"></script>
</body>
</html>

17
day03-notification/index.js Normal file
View File

@ -0,0 +1,17 @@
window.onload = () => {
let oBtn = document.getElementById('btn')
oBtn.addEventListener('click', () => {
let option = {
title: '啦啦啦',
body: 'ok,哈哈哈哈',
icon: 'c.png'
}
let mayNotification = new window.Notification(option.title, option)
mayNotification.onclick = () => {
alert("点击了消息页卡")
}
})
}

22
day03-notification/main.js Normal file
View File

@ -0,0 +1,22 @@
const { app, BrowserWindow } = require('electron')
const createWindow = () => {
let mainWin = new BrowserWindow({
width: 800,
height: 400,
show: false,
webPreferences: {
enableRemoteModule: true,
nodeIntegration: true
}
})
mainWin.loadFile('index.html')
mainWin.on('ready-to-show', mainWin.show)
mainWin.on('close', () => {
mainWin = null
})
}
app.on('ready', createWindow)
app.on('window-all-closed', app.quit)

1396
day03-notification/package-lock.json generated Normal file
View File

File diff suppressed because it is too large Load Diff

17
day03-notification/package.json Normal file
View 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"
}
}

29
day03-shell-and-iframe/index.html Normal file
View File

@ -0,0 +1,29 @@
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>shell && iframe</title>
<style>
* {
margin: 0;
padding: 0;
}
iframe {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
</style>
</head>
<body>
<!-- <h2>shell and iframe</h2>
<a id="openUrl" href="https://cantyonion.site">打开url</a>
<br><br>
<button id="openFolder">打开目录</button> -->
<iframe src="https://cantyonion.site" frameborder="0" id="webview"></iframe>
<script src="index.js"></script>
</body>
</html>

27
day03-shell-and-iframe/index.js Normal file
View File

@ -0,0 +1,27 @@
const { shell, ipcRenderer } = require("electron")
const path = require('path')
// window.onload = () => {
// // 1 获取元素
// let oBtn1 = document.getElementById('openUrl')
// let oBtn2 = document.getElementById('openFolder')
// oBtn1.addEventListener('click', (ev) => {
// ev.preventDefault()
// let urlPath = oBtn1.getAttribute('href')
// // 打开外部浏览器
// shell.openExternal(urlPath)
// })
// oBtn2.addEventListener('click', () => {
// // 打开当前目录
// shell.showItemInFolder(path.resolve(__filename))
// })
// }
ipcRenderer.on('open', () => {
let iframe = document.getElementById('webview')
iframe.src = 'https://cantyonion.site/git/'
})

45
day03-shell-and-iframe/main.js Normal file
View File

@ -0,0 +1,45 @@
const { app, BrowserWindow, shell, Menu } = require('electron')
const createWindow = () => {
let mainWin = new BrowserWindow({
width: 800,
height: 400,
show: false,
webPreferences: {
enableRemoteModule: true,
nodeIntegration: true
}
})
let tmp = [
{
label: '菜单',
submenu: [
{
label: '关于',
click() {
shell.openExternal('https://cantyonion.site')
}
},
{
label: '打开',
click() {
BrowserWindow.getFocusedWindow().webContents.send('open')
}
},
]
}
]
let menu = Menu.buildFromTemplate(tmp)
Menu.setApplicationMenu(menu)
mainWin.loadFile('index.html')
mainWin.on('ready-to-show', mainWin.show)
mainWin.on('close', () => {
mainWin = null
})
}
app.on('ready', createWindow)
app.on('window-all-closed', app.quit)

1396
day03-shell-and-iframe/package-lock.json generated Normal file
View File

File diff suppressed because it is too large Load Diff

17
day03-shell-and-iframe/package.json Normal file
View 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"
}
}