Electron免费视频教程-从基础到实战
Electron免费视频教程-从基础到实战
Electron基础：https://www.bilibili.com/video/BV177411s7Lt
1 2
01_课程介绍和Electron简介_
electron e lai 存
02_Electron开发环境搭建
npm install electron -D
npx electron -v
v41.3.0
视频v8.x
03_Electron编写一个HelloWorld
electron .
main.js
var electron = require('electron');
var app = electron.app; //引用app
var BrowserWindow = electron.BrowserWindow; //窗口引用
var mainWindow = null; // 声明要打开的主窗口
app.on('ready',()=>{
mainWindow = new BrowserWindow({
width: 800,
height: 800,
});
mainWindow.loadFile('index.html'); // 加载index.html
mainWindow.on('closed',()=>{
mainWindow = null; // 关闭窗口时，清空窗口对象
});
})
04_Electron编写邀请小姐姐程序
05_Electron中Remote模块讲解
const BrowerWindow=require('electron').remote.BrowerWindow
https://wizardforcel.gitbooks.io/electron-doc/content/index.html
remote错误解决: https://blog.csdn.net/LIangell/article/details/122192709
main.js
var electron = require('electron');
var app = electron.app; //引用app
var BrowserWindow = electron.BrowserWindow; //窗口引用
var mainWindow = null; // 声明要打开的主窗口
app.on('ready',()=>{
mainWindow = new BrowserWindow({
width: 800,
height: 800,
webPreferences: {
enableRemoteModule: true, // 允许使用remote模块
webSecurity:false, // 禁用Web安全策略
nodeIntegration: true, // 允许在渲染进程中使用Node.js API
contextIsolation: false // 禁用上下文隔离
}
});
mainWindow.loadFile('index.html'); // 加载index.html
require('@electron/remote/main').initialize() //添加语句
require('@electron/remote/main').enable(mainWindow.webContents) //添加语句
mainWindow.on('closed',()=>{
mainWindow = null; // 关闭窗口时，清空窗口对象
});
})
index.js
const btn=this.document.querySelector('#btn');
const { BrowserWindow } = require('@electron/remote')
window.onload=function(){
btn.onclick=function(){
newWindow = new BrowserWindow({
width: 800,
height: 600,
});
newWindow.loadFile('red.html');
newWindow.on('closed',()=>{
newWindow=null;
});
}
}
06_Electron中菜单的创建和绑定事件
main.js
var electron = require('electron');
var app = electron.app; //引用app
var BrowserWindow = electron.BrowserWindow; //窗口引用
var mainWindow = null; // 声明要打开的主窗口
app.on('ready',()=>{
mainWindow = new BrowserWindow({
width: 800,
height: 800,
webPreferences: {
enableRemoteModule: true, // 允许使用remote模块
webSecurity:false, // 禁用Web安全策略
nodeIntegration: true, // 允许在渲染进程中使用Node.js API
contextIsolation: false // 禁用上下文隔离
}
});
require('./main/menu.js'); // 引入菜单模块
mainWindow.loadFile('index.html'); // 加载index.html
require('@electron/remote/main').initialize() //添加语句
require('@electron/remote/main').enable(mainWindow.webContents) //添加语句
mainWindow.on('closed',()=>{
mainWindow = null; // 关闭窗口时，清空窗口对象
});
})
menu.js
const {Menu,BrowserWindow} = require('electron');
const template = [
{
label:'广州',
submenu:[
{
label:'天河',
click:()=>{
let win = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
nodeIntegration: true, // 允许在渲染进程中使用Node.js API
contextIsolation: false // 禁用上下文隔离
}
});
win.loadFile('red.html');
win.on('closed',()=>{
win=null;
});
}
},
{
label:'越秀'
}
]
},
{
label:'茂名',
}
]
var menu = Menu.buildFromTemplate(template);
Menu.setApplicationMenu(menu);
07_Electron中右键菜单的制作
https://blog.csdn.net/qq_37325972/article/details/124130483
main.js
var electron = require('electron');
var app = electron.app; //引用app
var BrowserWindow = electron.BrowserWindow; //窗口引用
var mainWindow = null; // 声明要打开的主窗口
app.on('ready',()=>{
mainWindow = new BrowserWindow({
width: 800,
height: 800,
webPreferences: {
enableRemoteModule: true, // 允许使用remote模块
webSecurity:false, // 禁用Web安全策略
nodeIntegration: true, // 允许在渲染进程中使用Node.js API
contextIsolation: false // 禁用上下文隔离
}
});
mainWindow.webContents.openDevTools(); // 打开开发者工具
require('./main/menu.js'); // 引入菜单模块
mainWindow.loadFile('index.html'); // 加载index.html
require('@electron/remote/main').initialize() //添加语句
require('@electron/remote/main').enable(mainWindow.webContents) //添加语句
mainWindow.on('closed',()=>{
mainWindow = null; // 关闭窗口时，清空窗口对象
});
})
render/index.js
const btn=this.document.querySelector('#btn');
const remote = require("@electron/remote")
const { BrowserWindow, } = remote
window.onload=function(){
btn.onclick=function(){
newWindow = new BrowserWindow({
width: 800,
height: 600,
});
newWindow.loadFile('red.html');
newWindow.on('closed',()=>{
newWindow=null;
});
}
}
let rightTemplete=[
{label:'粘贴',accelerator:'Ctrl+V'},
{label:'复制',accelerator:'Ctrl+C'},
]
let m=remote.Menu.buildFromTemplate(rightTemplete);
window.addEventListener('contextmenu',(e)=>{
e.preventDefault();
m.popup({window:remote.getCurrentWindow()});
})
08_Electron中通过链接打开浏览器
render/index.js
const aHref=this.document.querySelector('#aHref');
const { shell } = require('electron');
aHref.onclick=function(e){
e.preventDefault();
let url=aHref.getAttribute('href');
shell.openExternal(url);
}
html
<a id="aHref" href="http://jspang.com">jspang.com</a>
09_Electron中嵌入网页和打开子窗口
main.js
var electron = require('electron');
var app = electron.app; //引用app
var BrowserWindow = electron.BrowserWindow; //窗口引用
var mainWindow = null; // 声明要打开的主窗口
app.on('ready',()=>{
mainWindow = new BrowserWindow({
width: 800,
height: 800,
webPreferences: {
enableRemoteModule: true, // 允许使用remote模块
webSecurity:false, // 禁用Web安全策略
nodeIntegration: true, // 允许在渲染进程中使用Node.js API
contextIsolation: false // 禁用上下文隔离
}
});
mainWindow.webContents.openDevTools(); // 打开开发者工具
require('./main/menu.js'); // 引入菜单模块
mainWindow.loadFile('index.html'); // 加载index.html
require('@electron/remote/main').initialize() //添加语句
require('@electron/remote/main').enable(mainWindow.webContents) //添加语句
// BrowserView
var BrowserView=electron.BrowserView;
var view=new BrowserView();
mainWindow.setBrowserView(view);
view.setBounds({x:0,y:120,width:800,height:300});
view.webContents.loadURL('https://www.bilibili.com/');
// window.open browserWindow
mainWindow.on('closed',()=>{
mainWindow = null; // 关闭窗口时，清空窗口对象
});
})
10_Electron子窗口向父窗口传递信息
render/index.js
<button id="childBtn">打开子窗口</button>
<div id="mytext"></div>
const childBtn=this.document.querySelector('#childBtn');
childBtn.onclick=function(){
window.open('./popup.html')
}
window.addEventListener('message',(e)=>{
document.querySelector('#mytext').innerHTML=JSON.stringify(e.data);
})
popup.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=`">
<title>子窗口</title>
</head>
<body>
<h1>这是一个子窗口</h1>
<button id="btn">向父窗口发送消息</button>
</body>
<script>
var btn=document.querySelector('#btn');
btn.addEventListener('click',function(){
window.opener.postMessage('我是子窗口传递过来的信息');
})
</script>
</html>
11_Electron选择文件对话框使用
render/index.js
<button id="selectImg">选择图片</button>
<img style="width:100%;height:auto;" id="showImg">
const remote = require("@electron/remote")
const selectImg=this.document.querySelector('#selectImg');
selectImg.onclick=function(){
remote.dialog.showOpenDialog({
title: '选择图片',
// defaultPath: 'xiao.jpg',
filters: [
{ name: 'Images', extensions: ['jpg', 'png', 'gif'] }
],
buttonLabel: '选择图片',
}).then(result => {
let img = document.querySelector('#showImg');
img.src = result.filePaths[0];
}).catch(err => {
console.log(err);
})
}
12_Electron保存文件对话框使用
<button id="saveBtn">保存文件</button>
const remote = require("@electron/remote")
const fs = require('fs');
const saveBtn=this.document.querySelector('#saveBtn');
saveBtn.onclick=function(){
remote.dialog.showSaveDialog({
title: '保存文件',
}).then(result => {
fs.writeFileSync(result.filePath, 'Hello, Electron!');
}).catch(err => {
console.log(err);
})
}
13_Electron消息对话框操作
<button id="msgBtn">消息对话框</button>
const remote = require("@electron/remote")
const msgBtn=this.document.querySelector('#msgBtn');
msgBtn.onclick=function(){
remote.dialog.showMessageBox({
type: 'warning',
title: '消息对话框',
message: '这是消息对话框的内容。',
buttons: ['确定', '取消']
}).then(result => {
console.log(result);
}).catch(err => {
console.log(err);
})
}
14_Electron断网提醒功能制作
<script>
window.addEventListener('online', () => {
alert('网络已连接');
});
window.addEventListener('offline', () => {
alert('网络已断开');
});
</script>
15_Electron底部通知消息制作
<button id="notifyBtn">通知</button>
const notifyBtn=this.document.querySelector('#notifyBtn');
let option={
title:'这是通知的标题',
body:'这是通知的内容',
}
notifyBtn.onclick=function(){
new window.Notification(option.title,option);
}
16_Electron注册全局快捷键
var electron = require('electron');
var app = electron.app; //引用app
var BrowserWindow = electron.BrowserWindow; //窗口引用
var globalShortcut = electron.globalShortcut; //全局快捷键引用
var mainWindow = null; // 声明要打开的主窗口
app.on('ready',()=>{
mainWindow = new BrowserWindow({
width: 800,
height: 800,
webPreferences: {
enableRemoteModule: true, // 允许使用remote模块
webSecurity:false, // 禁用Web安全策略
nodeIntegration: true, // 允许在渲染进程中使用Node.js API
contextIsolation: false // 禁用上下文隔离
}
});
globalShortcut.register('ctrl+e',()=>{
// mainWindow.loadUrl('https://www.bilibili.com/');
mainWindow.loadFile('red.html');
});
let isRegister=globalShortcut.isRegistered('ctrl+e')?'注册成功':'注册失败';
console.log(isRegister);
mainWindow.webContents.openDevTools(); // 打开开发者工具
require('./main/menu.js'); // 引入菜单模块
mainWindow.loadFile('index.html'); // 加载index.html
require('@electron/remote/main').initialize() //添加语句
require('@electron/remote/main').enable(mainWindow.webContents) //添加语句
// BrowserView
// var BrowserView=electron.BrowserView;
// var view=new BrowserView();
// mainWindow.setBrowserView(view);
// view.setBounds({x:0,y:120,width:800,height:300});
// view.webContents.loadURL('https://www.bilibili.com/');
// window.open browserWindow
mainWindow.on('closed',()=>{
mainWindow = null; // 关闭窗口时，清空窗口对象
});
})
app.on('will-quit',()=>{
globalShortcut.unregister('ctrl+e'); // 注销快捷键
globalShortcut.unregisterAll(); // 注销所有快捷键
})
17_剪切板功能的使用
<p>激活码: <span id="code">XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX</span></p>
<button id="cBtn">复制激活码</button>
const remote = require("@electron/remote")
// var electron = require('electron');
//electron.clipboard
const cBtn=this.document.querySelector('#cBtn');
cBtn.onclick=function(){
let code=document.querySelector('#code').innerText;
remote.clipboard.writeText(code);
alert('激活码已复制到剪贴板');
}
浙公网安备 33010602011771号