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 管理控制台上修改实例登录密码。
4148 0
android的Menu使用
1。普通的Menu   先来看看最简单的Menu怎样实现。   在主Activity中覆盖onCreateOptionsMenu(Menu menu)方法。
389 0
阿里云服务器端口号设置
阿里云服务器初级使用者可能面临的问题之一. 使用tomcat或者其他服务器软件设置端口号后,比如 一些不是默认的, mysql的 3306, mssql的1433,有时候打不开网页, 原因是没有在ecs安全组去设置这个端口号. 解决: 点击ecs下网络和安全下的安全组 在弹出的安全组中,如果没有就新建安全组,然后点击配置规则 最后如上图点击添加...或快速创建.   have fun!  将编程看作是一门艺术,而不单单是个技术。
4620 0
electron菜单的基本使用
electron菜单的基本使用
87 0
JavaScript进阶【二】JavaScript 严格模式(use strict)的使用
版权声明:本文为博主原创文章,未经博主允许不得转载。更多学习资料请访问我爱科技论坛:www.52tech.tech https://blog.csdn.net/m0_37981569/article/details/79249309 ...
781 0
阿里云服务器如何登录?阿里云服务器的三种登录方法
购买阿里云ECS云服务器后如何登录?场景不同,阿里云优惠总结大概有三种登录方式: 登录到ECS云服务器控制台 在ECS云服务器控制台用户可以更改密码、更换系.
5838 0
VC/MFC ListCtrl 控件功能使用汇总(转)
以下未经说明,listctrl默认view 风格为report 相关类及处理函数 MFC:CListCtrl类 SDK:以 “ListView_”开头的一些宏。如 ListView_InsertColumn -------------------------------------------------------------------------------- 1.
1206 0
PHP 7.2 abstract function override 的使用
PHP 7.2 abstract function override 的使用
780 0
+关注
小周sir
面对过去,不要迷离;面对未来,不必彷徨;
51
文章
41
问答
文章排行榜
最热
最新
相关电子书
更多
文娱运维技术
立即下载
《SaaS模式云原生数据仓库应用场景实践》
立即下载
《看见新力量:二》电子书
立即下载