一. 基础代码
1.创建 package.json 文件
npm init -y
2.安装 electron
npm i electron -D
如果 提示 timeout 的错误,可以用淘宝镜像安装
sudo npm install -g cnpm --registry=https://registry.npmmirror.com
cnpm i electron -D
3.创建 main.js 文件
const {app , BrowserWindow} = require('electron')
const createWindow = () => {
const win = new BrowserWindow({
width: 1000,
height: 800
})
}
app.whenReady().then(createWindow);
4.package.json 文件中修改
"main": "main.js",
"scripts": {
"start": "electron ."
},
5.终端输入
npm start
6.安装 nodemon 便于更改后监听更新
cnpm i nodemon -D
7.package.json 文件中修改
"scripts": {
"start": "nodemon --exec electron ."
},
8.创建 index.html 文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
//这边是引入的js文件
<script src="./renderer/app.js"></script>
<body>
Hello
</body>
</html>
创建一个 app.js 文件并引入
console.log(100)
在main.js 中打开开发者工具
//打开开发者工具
win.webContents.openDevTools()
9.在 index.html 中配置 CSP 关闭开发者工具中的警告
<meta http-equiv="Content-Security-Policy" content="default-src 'self' ; img-src 'self' data:; script-src 'self'; style-src 'self' 'unsafe-inline'">
二.进程通信
1.app.js
document.querySelector('#btn').addEventListener('click',()=>{
console.log('点击')
myApi.handleSend()
})
2.proload.js
const { contextBridge ,ipcRenderer } = require('electron')
const handleSend = async () => {
let fallback = await ipcRenderer.invoke('send-event','hhhh')
console.log('fallback:',fallback);
}
contextBridge.exposeInMainWorld('myApi',{
platform:'process.platform',
handleSend
})
3.main.js
const {app, BrowserWindow,ipcMain} = require('electron')
ipcMain.handle('send-event',(event,msg)=>{
return msg
})
4.index.html
<button id="btn">send</button>
三.优雅的关闭重新打开窗口(再次打开默认恢复在上次关闭位置)
1.安装 electron-win-state
cnpm i electron-win-state -S
2.main.js
const WinState = require('electron-win-state').default
const winState = new WinState({
defaultWidth: 800,
defaultHeight: 600,
})
const createWindow = () => {
const win = new BrowserWindow({
...winState.winOptions,
width: 1000, //这部分有些版本需要注释掉,不注释会没有效果
height: 800,
})
winState.manage(win);
}
四.dialog
1.index.html
<div>Hello</div>
2.main.js
const {dialog} = require('electron')
wc.on('context-menu',(e,params)=>{
//打开窗口
dialog.showOpenDialog({
buttonLabel: '选择',
defaultPath: app.getPath('desktop'),
properties: ['multiSelections','createDirectory','openFile','openDirectory']
}).then((result) => {
console.log('result:',result.filePaths)
})
//存储窗口
dialog.showSaveDialog({}).then(result => {
console.log('result:',result.filePath)
})
//显示一个 dialog
const answers = ['Yes','No','Maybe']
dialog.showMessageBox({
title: 'Message Box',
message: 'Please select an option',
detail: 'Message details',
buttons: answers
}).then(({response}) => {
console.log(`User selected: ${answers[response]}`)
})
})
五.快捷键
main.js
const {globalShortcut} = require('electron')
const createWindow = () => {
//快捷键
globalShortcut.register('CommandOrControl+Y',()=>{
console.log('CommandOrControl + Y');
//注销快捷键
globalShortcut.unregister('CommandOrControl+Y')
})
}
六.菜单
main.js
const {Menu} = require('electron')
const mainMenu = Menu.buildFromTemplate([
{
label: 'electron',
submenu: [
{
label: 'menu-1',
submenu: [
{
label: 'submenu-1'
}
]
},
{
label: 'menu-2',
}
]
},
//使用系统提供的
{
label: 'Edit',
submenu: [
{role: 'undo'},
{role: 'redo'},
{role: 'copy'},
{role: 'paste'},
]
},
{
label: 'Action',
submenu: [
{
label: 'DevTools', //打开or关闭开发者工具
role: 'toggleDevTools'
},
{
role: 'toggleFullScreen' //全屏or取消全屏
},
{
label: 'Greet',
click: () => {
console.log('100')
},
accelerator: 'Shift+Alt+G'//定义快捷键
}
]
}
])
const createWindow = () => {
Menu.setApplicationMenu(mainMenu);
}
拆分传参数
mainMenu.js
const {Menu} = require('electron')
const mainMenu = (args,callback) => {
return Menu.buildFromTemplate([
{
label: 'electron',
submenu: [
{
label: 'menu-1',
submenu: [
{
label: 'submenu-1'
}
]
},
{
label: 'menu-2',
}
]
},
//使用系统提供的
{
label: 'Edit',
submenu: [
{role: 'undo'},
{role: 'redo'},
{role: 'copy'},
{role: 'paste'},
]
},
{
label: 'Action',
submenu: [
{
label: 'DevTools', //打开or关闭开发者工具
role: 'toggleDevTools'
},
{
role: 'toggleFullScreen' //全屏or取消全屏
},
{
label: 'Greet',
click: () => {
console.log('args:',args);
callback('hello electron')
},
accelerator: 'Shift+Alt+G'//定义快捷键
}
]
}
])
}
module.exports = mainMenu
main.js
const mainMenu = require('./mainMenu')
const createWindow = () => {
Menu.setApplicationMenu(mainMenu('我的消息窗口',(args)=>{
console.log('main.js args',args)
}));
}
七.托盘
tray.js
const {Tray,app,Menu} = require('electron')
function createTray(app,win) {
const tray = new Tray('icon.png');
tray.setToolTip('我的应用')
tray.on('click',(e)=>{
//按住 shift 键并单击托盘
if (e.shiftKey) {
app.quit()
} else {
win.isVisible() ? win.hide() : win.show();
}
})
tray.setContextMenu(Menu.buildFromTemplate([
{label: 'item1'},
{
label: 'item2',
// click: () => {
// win.isVisible() ? win.hide() : win.show();
// }
},
]))
}
module.exports = createTray;
main.js
const createTray = require('./tray')
const createWindow = () => {
//定义托盘
createTray(app,win)
}