Electron 自定义软件顶部菜单、右键菜单以及绑定快捷键

顶部菜单

main/menu.js

//创建菜单
/*

var electron=require('electron');

var Menu=electron.Menu;

vscode里面实现代码提示功能：
    在当前项目安装一下  electron模块。

      "dependencies": {
        "electron": "^2.0.4"
    }


https://electronjs.org/docs/api/menu-item
*/

const { Menu } = require('electron');


//订单菜单
var template = [
    {

        label: '文件',
        submenu: [
            {

                label: '新建文件',

                accelerator: 'ctrl+n',

                click: function () {
                    console.log('ctrl+n');
                }
            },
            {

                label: '新建窗口',
                click: function () {

                    console.log('new window');
                }
            }
        ]
    },
    {

        label: '编辑',
        submenu: [

            {

                label: '复制',
                role: 'copy'
            },
            {

                label: '截切',
                role: 'cut'
            }
        ]
    }


]
var m = Menu.buildFromTemplate(template);

Menu.setApplicationMenu(m);

引入menu.js到主进程index.js

//主进程

//引入electron模块
var electron =require('electron');

//nodejs中的path模块
var path=require('path');

//创建electron引用     控制应用生命周期的模块
var app=electron.app;     

//创建electron BrowserWindow的引用          窗口相关的模块
var BrowserWindow=electron.BrowserWindow;

//变量 保存对应用窗口的引用

var mainWindow=null;


function createWindow(){
    //创建BrowserWindow的实例 赋值给mainWindow打开窗口   
    //软件默认打开的宽度高度 {width:400,height:400}
    mainWindow=new BrowserWindow({width:800,height:600,webPreferences: {
        nodeIntegration: true
    }}); 

    mainWindow.loadURL(path.join('file:',__dirname,'index.html'));

    
    //开启渲染进程中的调试模式
    mainWindow.webContents.openDevTools();

    console.log(path.join('file:',__dirname,'index.html'));

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

    //执行设置菜单操作
    require('./main/menu.js');

}

app.on('ready',createWindow)


// 当所有的窗口被关闭后退出应用   Quit when all windows are closed.
app.on('window-all-closed', () => {
    // On OS X it is common for applications and their menu bar
    // to stay active until the user quits explicitly with Cmd + Q

    // 对于OS X系统，应用和相应的菜单栏会一直激活直到用户通过Cmd + Q显式退出
    if (process.platform !== 'darwin') {
      app.quit();
    }
  });
  
//macos
app.on('activate', () => {
// 对于OS X系统，当dock图标被点击后会重新创建一个app窗口，并且不会有其他
    if (mainWindow === null) {
        createWindow();
    }
});

右键菜单

render/menu.js

//创建菜单
/*
vscode里面实现代码提示功能：
    在当前项目安装一下  electron模块。

    "dependencies": {
        "electron": "^2.0.4"
    }


https://electronjs.org/docs/api/menu-item
*/

var remote=require('electron').remote;

const Menu=remote.Menu;


//定义菜单
var template=[
    {

        label:'文件',
        submenu:[
            {

                label:'新建文件',

                accelerator:'ctrl+n',

                click:function(){ 
                    console.log('ctrl+n');
                }
            },
            {

                label:'新建窗口',
                click:function(){ 

                    console.log('new window');
                }
            }
        ]
    },
    {

        label:'编辑',
        submenu:[

            {

                label:'复制',
                role:'copy'
            },
            {

                label:'截切',
                role:'cut'
            }
        ]
    }


]



var m=Menu.buildFromTemplate(template);

Menu.setApplicationMenu(m);


//右键菜单

window.addEventListener('contextmenu',function(e){

    // alert('1212')

    //阻止当前窗口默认事件
    e.preventDefault();
    //在当前窗口点击右键的时候弹出  定义的菜单模板
    m.popup({window:remote.getCurrentWindow()})
},false)

引入到：index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>

    <style>    
        .content{

            width: 100%;

            height: 400px;

            background: orange;


            overflow-y: auto;
        }
    </style>
  
</head>
<body>
       
    <button id="btn">
        打开新窗口
    </button>

    <input type="text" />

    <br>

    <p> 我是一个测试内容</p>
    
    <script src="renderer/menu.js"></script>   

    我是内容

</body>
</html>

 

posted on 2020-12-03 11:33  LoaderMan  阅读(3041)  评论(0)  编辑  收藏  举报

导航