Electron中设置菜单(Menu),主进程向渲染进程共享数据

7 篇文章 0 订阅
5 篇文章 0 订阅

需求分析:设置主窗口的应用菜单以及鼠标的右击菜单,同时要求实现在应用菜单中开启打开调试工具(当用户自定义应用菜单时,应用菜单中的打开调试工具便会被取代),并设置快捷键F12

实现看看主进程main.js:

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

var app = electron.app   // 创建electron引用

var BrowserWindow = electron.BrowserWindow;  // 创建窗口引用

var mainWindow = null ;  // 声明要打开的主窗口
app.on('ready',()=>{
    mainWindow = new BrowserWindow({    //设置打开的窗口大小
    	width:400,
    	height:400,
    	webPreferences: {     
        	nodeIntegration: true,   // 集成node环境
        	enableRemoteModule: true   // 开启remote,默认不能使用remote模块
    	}
    })   
    mainWindow.loadFile('index2.html')  // 加载那个页面

    // 监听关闭事件,把主窗口设置为null
    mainWindow.on('closed',()=>{
        mainWindow = null
    })
    // 分享主进程的数据
    global.sharedObject = {
    	mainWindow: mainWindow
    };

})

main.js中需要把mainWindow设置为分享数据,因为在渲染进程中,我们需要通过mainWindow打开调试工具

一、创建Menu.js

设置窗口的主菜单

var template = [
    {
        label:'文件',    // 一级标题
        submenu:[        // 二级标题
            {
                label:'新建文件',
                accelerator:'ctrl+n',
                submenu: [          // 三级标题
                    {
                        label: 'HTML文件'
                    },
                    {
                        label: 'JS文件'
                    },
                    {
                        label: 'CSS文件'
                    }
                ],
                click:()=>{
    
                }
            },
            {
                label:'打开文件',
                accelerator: 'ctrl+o',
                click:()=>{
    
                }
            }
        ]

    },
    {
        label:'编辑',
        submenu:[
            {
                label: '撤销',
                accelerator: 'ctrl+z',
                click:()=>{

                }
            },
            {
                label: '重做',
                accelerator: 'ctrl+y',
                click:()=>{
                }
            }
        ]
    },
    {
        label: '工具',
        submenu: [
            {
                label: '打开调试工具',
                accelerator: 'f12',
                click: ()=>{
                    mainWindow.webContents.openDevTools();   // 通过主进程共享的mainWindow打开调试工具
                } 
            }
        ]
        
    }
]

// 构建菜单模板
var m = Menu.buildFromTemplate(template)
// 设置菜单模板为当前应用的菜单
Menu.setApplicationMenu(m)

二、在渲染进程中引入menu.js文件

const { remote } = require('electron');
const { Menu } = remote;
const mainWindow = remote.getGlobal('sharedObject').mainWindow;   // 获取主进程中共享的mainWindow
/* 设置应用程序菜单 */
require('./renders/menu.js');

// 菜单变量
const menu = [
    {label: '复制'},
    {label: '粘贴'}
]

/* 设置右键菜单 */
// 得到菜单模板
const menuTemp = Menu.buildFromTemplate(menu);

// 右击菜单
window.addEventListener('contextmenu',function(e){
    // 阻止默认右击事件
    e.preventDefault();
    // 把菜单模板设置为当前右击菜单
    menuTemp.popup({window:remote.getCurrentWindow()});
})

获取mainWindow必须在导入菜单之前,否则menu.js中将无法使用mainWindow打开调试工具。

运行效果:
在这里插入图片描述

  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值