做网站没有高清图片怎么办,大连建设网信息公开行政审批专栏,网站建设市场需求分析,搜外seo文章目录 相关笔记笔记说明 七、系统1、系统对话框2、自定义窗口菜单3、系统右键菜单4、快捷键(1)、监听网页按键事件 #xff08;窗口需处于激活状态#xff09;(2)、监听全局按键事件 #xff08;窗口无需处于激活状态#xff09;(3)、补充#xff1a;自定义窗口菜单快捷… 文章目录 相关笔记笔记说明 七、系统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 文件内容如下
bodybutton idopen_dialog_btn选择文件/buttonscriptconst { 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 文件内容如下
bodyscriptconst menu require(./MyMenu);window.oncontextmenu function(e) {e.preventDefault();menu.popup();}/script
/bodyindex.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 文件内容如下
方法一
bodyscriptwindow.onkeydown function(e) {// 监听 ctrls 组合键if(e.ctrlKey e.keyCode 83) {console.log(保存文件);}}/script
/body方法二使用 mousetrap 作为按键事件监听库来监听网页按键事件
安装yarn add mousetrap
bodyscriptlet Mousetrap require(mousetrap);Mousetrap.bind(ctrls,function() {console.log(--保存文件--);});Mousetrap.bind(ctrla,function() {console.log(--全选--);})/script
/bodymousetrap 更多详情参见
https://github.com/ccampbell/mousetraphttps://www.npmjs.com/package/mousetrap?activeTabreadme
(2)、监听全局按键事件 窗口无需处于激活状态
更新 index.js 文件如下
const { globalShortcut } require(electron);app.on(ready, function() {win new BrowserWindow({// ...});globalShortcut.register(CommandOrControlK, () {console.log(abc);})// ...
});(3)、补充自定义窗口菜单快捷键设置
在自定义菜单文件 MyMenu.js 中利用 accelerator 属性设置快捷键
{label: Dev Tools,role: toggleDevTools,// 设置快捷键 accelerator: AltR
}
