学习electron第十二章全局快捷键

electron 版本号 v15.3.0

第一步

修改main.js

var electron = require('electron') // 加载全局electron

const {ipcMain, Menu,BrowserWindow, BrowserView} = require('electron')
var globalShortcut = electron.globalShortcut


var app = electron.app // 引用 app
// var BrowserWindow = electron.BrowserWindow  // 窗口引用

var mainWindow = null // 声明要打开的主窗口

app.on('ready',()=>{
    mainWindow = new BrowserWindow({
        width:1200, 
        height:1200,
        webPreferences: {
            nodeIntegration: true, //设置开启nodejs环境
            contextIsolation: false,
            enableRemoteModule:true
        }
    }); // 设置主窗口大小
    require('@electron/remote/main').initialize()
    require('@electron/remote/main').enable(mainWindow.webContents)
    require('./main/Menu.js')
    // mainWindow.webContents.openDevTools() // 启动打开调试器

    mainWindow.loadFile('demo6.html')  //加载html 页面

    globalShortcut.register('ctrl+e', () => {
        mainWindow.loadURL('https://www.jianshu.com/u/e9a31a3c3bdb')
    })

    let isRegister = globalShortcut.isRegistered('ctrl+e')? 'register sucess!' : 'register fail!'
    console.log(isRegister)

    
    // BrowserView
    // const view = new BrowserView()
    // mainWindow.setBrowserView(view)
    // view.setBounds({
    //     x:0,
    //     y:150,
    //     width:800, 
    //     height:800
    // })
    // view.webContents.loadURL('https://www.jianshu.com/u/e9a31a3c3bdb')

    mainWindow.on('closed',()=>{
        mainWindow = null
    })
})


// main  show-menu 自定义名称，与demo2.js中的名称保持一致

ipcMain.on('show-menu', (event) => {
const template = [

    {

    label: '复制',
    // type: 'checkbox', checked: true 选中的菜单前面会有√
    type: 'checkbox', checked: true,
    // 点击事件 调用方法 menu-method1 与 demo2.js 中 ipcRenderer.on('menu-method1') 为对应关系
    click: () => { event.sender.send('menu-method1', '123213') }

    },

    //  type: 'separator' 分割线 加上之后两个按钮之间有一条分割线
    { type: 'separator' },
    { label: '粘贴'}
]
const menu = Menu.buildFromTemplate(template)
menu.popup(BrowserWindow.fromWebContents(event.sender))
})

第二步

验证测试

electron .

打开窗口后 ctrl + e 显示以下页面表示操作成功!

image.png

红色为本次新增或修改的内容

image.png