文章目录
- 相关笔记
- 笔记说明
- 七、系统
- 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'
}
