Electron学习笔记（五）

阿莫、

已于 2024-05-12 13:16:29 修改

阅读量1k

点赞数 22

文章标签： electron 学习笔记

于 2024-05-12 13:06:21 首次发布

本文链接：https://blog.csdn.net/qq_45897239/article/details/138752784

版权

文章目录

笔记说明

文本为学习《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 更多详情参见：

(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'
}

阿莫、

关注

22
点赞
踩
14

收藏

觉得还不错? 一键收藏
0
评论
Electron学习笔记（五）

七、系统1、系统对话框2、自定义窗口菜单3、系统右键菜单4、快捷键(1)、监听网页按键事件（窗口需处于激活状态）(2)、监听全局按键事件（窗口无需处于激活状态）(3)、补充：自定义窗口菜单快捷键设置
复制链接

扫一扫