文章目录
- 相关笔记
- 笔记说明
- 七、系统
- 1、系统对话框
- 2、自定义窗口菜单
- 3、系统右键菜单
- 4、快捷键
- (1)、监听网页按键事件 （窗口需处于激活状态）
- (2)、监听全局按键事件 （窗口无需处于激活状态）
- (3)、补充：自定义窗口菜单快捷键设置
相关笔记
- Electron学习笔记（一）
- Electron学习笔记（二）
- Electron学习笔记（三）
- Electron学习笔记（四）
- Electron学习笔记（五）
- Electron学习笔记（六）
- 使用 electron-vite-vue 构建 electron + vue3 项目并打包
笔记说明
文本为学习《Electron 实战 入门、进阶与性能优化 刘晓伦 著》时所记录的笔记 主要将书本上的案例运行一遍，针对原理部分并无相关记录。笔记记录于 2023年9月。
七、系统
在搭建完基本的环境后
安装 remote 模块：
yarn add @electron/remote
1、系统对话框
修改 index.js 文件内容如下：
const {app,BrowserWindow} = require('electron');
let win = null;
app.on('ready', function() {
win = new BrowserWindow({
// 为页面集成Node.js环境
webPreferences: {
nodeIntegration: true,
contextIsolation: false,
enableRemoteModule: true,
}
});
require("@electron/remote/main").initialize();
require("@electron/remote/main").enable(win.webContents);
// 访问资源文件
win.loadFile('index.html');
// 程序启动后开启 开发者工具
win.webContents.openDevTools();
win.on('close',function() {
win = null;
})
});
app.on('window-all-closed',function() {
app.quit();
})
修改 index.html 文件内容如下：
<body>
<button id="open_dialog_btn">选择文件</button>
<script>
const { dialog, app } = require('@electron/remote');
function openDialog() {
dialog.showOpenDialog({
title: "选择文件",
buttonLabel: "打开文件",
defaultPath: app.getPath('desktop'),
properties: ['multiSelections'],
filters: [
{ name: "图片", extensions: ["jpg", "png", "gif"] },
{ name: "视频", extensions: ["mkv", "avi", "mp4"] }
]
}).then((result) => {
console.log(result);
}).catch((err) => {
console.log(err);
});
}
// 点击按钮 弹出文件选择对话框
let open_dialog_btn = document.querySelector('#open_dialog_btn');
open_dialog_btn.addEventListener('click',function() {
openDialog();
})
</script>
</body>
配置对象参数说明：
title：对话框标题
buttonLabel：确认按钮显示的文本
defaultPath：对话框打开后默认显示的路径
properties：设置 multiSelections，表示允许多选
filters：允许打开的文件类型
点击按钮后，效果如下：
canceled：如若关闭了文件选择对话框，则为 true
filePaths：选择后的文件的路径
更多对话框详情参见(Electron官网)：https://www.electronjs.org/zh/docs/latest/api/dialog
2、自定义窗口菜单
新建一个文件 MyMenu.js 用于保存自定义菜单规则：
let { Menu } = require('electron');
let templateArr = [{
label: "菜单1",
submenu: [
{
label: "菜单1-1",
type: 'checkbox'
},
// 添加分隔条
{ type: 'separator' },
{
label: "菜单1-2",
tyep: 'radio'
}
]
}, {
label: "菜单2",
click() {
console.log('hello menu')
},
},
{
label: "菜单3",
// 为菜单设置 role 属性
// role 属性可选值：undo、redo、cut、copy、delete、selectAll、paste、minimize、
// close、quit等，一个菜单项只能设置一个role值。
role: 'reload'
},
{ label: "菜单4" }
];
let menu = Menu.buildFromTemplate(templateArr);
module.exports = menu;
在 index.js 文件中进行设置：
const {app,BrowserWindow} = require('electron');
const {Menu} = require('electron');
// 导入自定义菜单规则
const menu = require('./MyMenu');
// 应用自定义菜单
Menu.setApplicationMenu(menu);
let win = null;
app.on('ready', function() {
win = new BrowserWindow({
// 为页面集成Node.js环境
webPreferences: {
nodeIntegration: true,
contextIsolation: false,
},
// 隐藏系统菜单，但是按 Alt 键依然可以显示
// autoHideMenuBar: true
});
// 访问资源文件
win.loadFile('index.html');
// 程序启动后开启 开发者工具
win.webContents.openDevTools();
win.on('close',function() {
win = null;
})
});
app.on('window-all-closed',function() {
app.quit();
})
效果展示：
3、系统右键菜单
右键菜单的内容我们沿用上面窗口菜单的内容，只需修改一下导入的模块即可 MyMenu.js 文件内容如下：
// 修改导入的模块 因为现在需要在渲染进程中使用
let { Menu } = require('@electron/remote');
let templateArr = [
// 右键菜单内容
// ...
];
let menu = Menu.buildFromTemplate(templateArr);
module.exports = menu;
index.html 文件内容如下：
<body>
<script>
const menu = require('./MyMenu');
window.oncontextmenu = function(e) {
e.preventDefault();
menu.popup();
}
</script>
</body>
index.js 文件内容如下：
const {app,BrowserWindow} = require('electron');
let win = null;
app.on('ready', function() {
win = new BrowserWindow({
// 为页面集成Node.js环境
webPreferences: {
nodeIntegration: true,
contextIsolation: false,
enableRemoteModule: true,
},
// autoHideMenuBar: true
});
require("@electron/remote/main").initialize();
require("@electron/remote/main").enable(win.webContents);
// 访问资源文件
win.loadFile('index.html');
// 程序启动后开启 开发者工具
win.webContents.openDevTools();
win.on('close',function() {
win = null;
})
});
app.on('window-all-closed',function() {
app.quit();
})
运行结果：
4、快捷键
(1)、监听网页按键事件 （窗口需处于激活状态）
index.html 文件内容如下：
方法一：
<body>
<script>
window.onkeydown = function(e) {
// 监听 ctrl+s 组合键
if(e.ctrlKey && e.keyCode == 83) {
console.log('保存文件');
}
}
</script>
</body>
方法二：使用 mousetrap 作为按键事件监听库来监听网页按键事件
安装：yarn add mousetrap
<body>
<script>
let Mousetrap = require('mousetrap');
Mousetrap.bind('ctrl+s',function() {
console.log('--保存文件--');
});
Mousetrap.bind('ctrl+a',function() {
console.log('--全选--');
})
</script>
</body>
mousetrap 更多详情参见：
- https://github.com/ccampbell/mousetrap
- https://www.npmjs.com/package/mousetrap?activeTab=readme
(2)、监听全局按键事件 （窗口无需处于激活状态）
更新 index.js 文件如下：
const { globalShortcut } = require('electron');
app.on('ready', function() {
win = new BrowserWindow({
// ...
});
globalShortcut.register('CommandOrControl+K', () => {
console.log('abc');
})
// ...
});
(3)、补充：自定义窗口菜单快捷键设置
在自定义菜单文件 MyMenu.js 中利用 accelerator 属性设置快捷键：
{
label: 'Dev Tools',
role: 'toggleDevTools',
// 设置快捷键
accelerator: 'Alt+R'
}
