electron菜单的基本使用-阿里云开发者社区

开发者社区> 小周sir> 正文

electron菜单的基本使用

简介: electron菜单的基本使用
+关注继续查看

对electron了解之后,让我们学习创建一个窗口,使用自己的编写的窗口
搭建环境可以看 查看

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
                })
            },
        }

当我们点击国际新闻的时候
在这里插入图片描述
这就是菜单的时候效果

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
阿里云服务器怎么设置密码?怎么停机?怎么重启服务器?
如果在创建实例时没有设置密码,或者密码丢失,您可以在控制台上重新设置实例的登录密码。本文仅描述如何在 ECS 管理控制台上修改实例登录密码。
9494 0
讨喜的隔离可变性(十)使用Transactor
声明:本文是《Java虚拟机并发编程》的第五章,感谢华章出版社授权并发编程网站发布此文,禁止以任何形式转载此文。 Akka transactor或事务角色为我们提供了一种将多个角色的执行过程合并到一个事务中的方法。
1491 0
android的Menu使用
1。普通的Menu   先来看看最简单的Menu怎样实现。   在主Activity中覆盖onCreateOptionsMenu(Menu menu)方法。
404 0
electron菜单的基本使用
electron菜单的基本使用
96 0
阿里云服务器如何登录?阿里云服务器的三种登录方法
购买阿里云ECS云服务器后如何登录?场景不同,阿里云优惠总结大概有三种登录方式: 登录到ECS云服务器控制台 在ECS云服务器控制台用户可以更改密码、更换系.
13177 0
JavaScript进阶【二】JavaScript 严格模式(use strict)的使用
版权声明:本文为博主原创文章,未经博主允许不得转载。更多学习资料请访问我爱科技论坛:www.52tech.tech https://blog.csdn.net/m0_37981569/article/details/79249309 ...
876 0
VC/MFC ListCtrl 控件功能使用汇总(转)
以下未经说明,listctrl默认view 风格为report 相关类及处理函数 MFC:CListCtrl类 SDK:以 “ListView_”开头的一些宏。如 ListView_InsertColumn -------------------------------------------------------------------------------- 1.
1206 0
让程序使用自带的字体文件
转载请说明原出处,谢谢~·http://blog.csdn.net/zhuhongshu/article/details/39396223         我笔记本使用的是win7系统,开发的duilib程序一直都使用微软雅黑字体,昨天在xp系统下测试时发现由于xp下没有微软雅黑字体而导致duilib使用了默认的宋体字,瞬间感觉界面不协调了。
933 0
+关注
小周sir
面对过去,不要迷离;面对未来,不必彷徨;
55
文章
42
问答
文章排行榜
最热
最新
相关电子书
更多
《2021云上架构与运维峰会演讲合集》
立即下载
《零基础CSS入门教程》
立即下载
《零基础HTML入门教程》
立即下载