electron开发跨多平台Mac、Windows 和 Linux的桌面应用之自定义头部菜单以及右键菜单（八）

1.在主进程中自定义头部菜单：

//创建main/menu.js文件
const electron=require("electron");
let Menu=electron.Menu;

let template=[
    {
        label:"文件",
        submenu:[
            {
                label:"打开",
                click:()=>{
                    console.log("我点击了")
                }
            }
        ]
    },
    {
        label:"编辑",
        submenu:[
            {
                label:"复制",
                role:'copy'
            },
            {
                label:"粘贴",
                accelerator:'ctrl+v'
            },
        ]
    }
]

let m=Menu.buildFromTemplate(template);
Menu.setApplicationMenu(m);

//在主进程main.js中
const electron=require("electron");
let app=electron.app;
let BrowserWindow=electron.BrowserWindow;
let win=null;
app.on("ready",()=>{
    win=new BrowserWindow({
        width:800,
        height:800,
        webPreferences: {
            nodeIntegration: true  //设置该属性为true，否则可能报错ReferenceError: require is not defined
        }
    })
    win.loadFile("index.html");
    win.webContents.openDevTools();
    win.on("closed",()=>{
        win=null;
    })
    require("./main/menu.js")   //引入./main/menu.js自定义头部菜单文件
})

2.在渲染进程中自定义头部菜单并自定义右键菜单：

//render/render-menu.js
const remote=require("electron").remote;  //渲染进程通过remote模块调用主进程方法
let Menu=remote.Menu;

let template=[
    {
        label:"文件",
        submenu:[
            {
                label:"打开",
                click:()=>{
                    console.log("我点击了")
                }
            }
        ]
    },
    {
        label:"编辑",
        submenu:[
            {
                label:"复制",
                role:'copy'
            },
            {
                label:"粘贴",
                accelerator:'ctrl+v'
            },
        ]
    }
]

let m=Menu.buildFromTemplate(template);
Menu.setApplicationMenu(m);

window.addEventListener('contextmenu',(e)=>{
    e.preventDefault();
    m.popup({window:remote.getCurrentWindow()})
})

<!--在index.html中引入render/render-menu.js-->
<!DOCTYPE html>
    <body>
        <div>
            测试
        </div>
        <script src="render/render-menu.js"></script>     
    </body>
</html>

Ace.斗皇

发布了200 篇原创文章 · 获赞 37 · 访问量 11万+

私信关注

electron开发跨多平台Mac、Windows 和 Linux的桌面应用之自定义头部菜单以及右键菜单（八）

猜你喜欢