electron菜单的基本使用

简介: electron菜单的基本使用


对electron了解之后,让我们学习创建一个窗口,使用自己的编写的窗口
搭建环境可以看electron环境搭建和使用 - 小周sri的码农 - 博客园

 

Menu菜单
创建一个menu.js文件,编写一下代码,结构相当于JSON格式的

const {

Menu

} = require('electron')
const template = [{

    label: '首页'
},
{
    label: '新闻资讯',
    submenu: [{
        label: '国内新闻',
        submenu: [{
            label: '北京新闻'
        }, {
            label: '河南新闻'
        }]
    }, {
        label: '国际新闻'
    }]
},
{
    label: '娱乐',
    submenu: [{
        label: '音乐'
    }, {
        label: '电影'
    }, {
        label: '综艺'
    }]
},
{
    label: '科技',
    submenu: [{
        label: 'Al'
    }, {
        label: '手机'
    }, {
        label: '互联网'
    }]
}

]

var list = Menu.buildFromTemplate(template)
Menu.setApplicationMenu(list)
创建主入口文件main.js文件
在ready生命周期中,直接加入下面的代码,

const electron = require('electron') //引入electron模块
var app = electron.app //创建electron引用
var BrowserWindow = electron.BrowserWindow; //创建窗口引用
  require(’./openMenu/menu.js’)

主入口js
var mainWindow = null; //声明要打开的主窗口
app.on('ready', () => {

//设置窗口的大小
mainWindow = new BrowserWindow({
    width: 900,
    height: 900,
    webPreferences: {
        nodeIntegration: true
    }
})
require('./openMenu/menu.js')
mainWindow.loadFile('menu.html'); //要加载的文件

//监听关闭事件,在把主窗口设置位null
mainWindow.on('closed', () => {
    mainWindow = null;
})

})
 这时候我们打开终端输入electron .之后,就可以看到效果了,

如果想给菜单绑定点击事件,在menu.js引入BrowserWindow模块
如果要打开新的窗口,就必须要创建新的html文件

const {

Menu,
BrowserWindow

} = require('electron')
  对需要的菜单绑定事件

{

        label: '国际新闻',
        click: () => {
            var open = new BrowserWindow({
                width: 500,
                height: 500,
                webPreferences: {
                    nodeIntegration: true
                }
            })
            open.loadFile('yellow.html')
            open.on('close', () => {
                open = null
            })
        },
    }

  

目录
相关文章
|
JSON 移动开发 缓存
20+个可视化搭建工具,一次玩个够
无论大公司还是小公司,我们开发前端工程时候,项目工程又很多类似的功能或者页面,开发经常是加班加点搬砖去做一些无成长反复操作的工作,看键盘上 ctrle 键已经被磨掉了漆,C 和V 也马上磨白了,那对于开发如何把这些重复的工作用机器去解决?在前端资源紧缺的情况下,是否可直接有工具直接就可以搭建出我想要的前端页面?于是业界的页面可视化搭建工具就出现了,本文会介绍目前最流行的页面可视化搭建工具,也会提供一些开源的可视化搭建项目供大家参考。
2615 0
20+个可视化搭建工具,一次玩个够
vue3进入页面全屏
vue3进入页面全屏
307 0
|
分布式计算 Hadoop Shell
|
10月前
|
机器学习/深度学习 人工智能 自然语言处理
深度学习的原理与应用:开启智能时代的大门
深度学习的原理与应用:开启智能时代的大门
589 16
|
缓存 资源调度 JavaScript
秒懂Yarn:从安装到配置的全流程详解
**Yarn**是Facebook推出的JavaScript包管理器,旨在提供更快、更安全的依赖管理。它通过并行安装、离线模式、版本锁定和友好的命令行界面提升效率。要安装Yarn,可以使用npm、Homebrew或Chocolatey。基本命令包括初始化项目(`yarn init`)、安装/移除/升级依赖(`yarn add/remove/upgrade`)。配置Yarn涉及设置`.yarnrc`文件,如更改registry。通过`yarn.lock`文件保证依赖一致性。文章还提供了使用Yarn进行API测试和项目管理的实战案例。
574 0
|
XML 开发框架 .NET
LabVIEW中加载.NET 2.0,3.0和3.5程序集
LabVIEW中加载.NET 2.0,3.0和3.5程序集
311 4
|
11月前
|
SQL 缓存 Java
【详细实用のMyBatis教程】获取参数值和结果的各种情况、自定义映射、动态SQL、多级缓存、逆向工程、分页插件
本文详细介绍了MyBatis的各种常见用法MyBatis多级缓存、逆向工程、分页插件 包括获取参数值和结果的各种情况、自定义映射resultMap、动态SQL
【详细实用のMyBatis教程】获取参数值和结果的各种情况、自定义映射、动态SQL、多级缓存、逆向工程、分页插件
|
11月前
|
IDE 开发工具 Android开发
Flutter 框架的优点
综上所述,Flutter框架以其跨平台一致性、高性能表现、丰富的组件和插件生态、热重载等诸多优点,为移动应用开发带来了全新的体验和强大的开发能力,成为了越来越多开发者的首选框架。
|
12月前
ThreeJs通过射线获取自己的点击位置坐标
这篇文章详细说明了如何使用Three.js来绘制线条,包括创建线几何体、设置材质以及将线条添加到3D场景中的具体步骤。
433 1
ThreeJs通过射线获取自己的点击位置坐标
|
前端开发 JavaScript
纯css动画 —— 展开、收起
纯css动画 —— 展开、收起
744 2