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

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

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

  

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

相关文章
阿里云服务器端口号设置
阿里云服务器初级使用者可能面临的问题之一. 使用tomcat或者其他服务器软件设置端口号后,比如 一些不是默认的, mysql的 3306, mssql的1433,有时候打不开网页, 原因是没有在ecs安全组去设置这个端口号. 解决: 点击ecs下网络和安全下的安全组 在弹出的安全组中,如果没有就新建安全组,然后点击配置规则 最后如上图点击添加...或快速创建.   have fun!  将编程看作是一门艺术,而不单单是个技术。
4407 0
React-Router入门使用
React-Router入门使用
403 0
JavaScript进阶【二】JavaScript 严格模式(use strict)的使用
版权声明:本文为博主原创文章,未经博主允许不得转载。更多学习资料请访问我爱科技论坛:www.52tech.tech https://blog.csdn.net/m0_37981569/article/details/79249309 ...
776 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 的使用
778 0
使用Electron开发基于Node.js的桌面应用
跨平台桌面应用很难吗?遇到node.js ,一切都变得如此简单...
6628 0
+关注
小周sir
面对过去,不要迷离;面对未来,不必彷徨;
51
文章
41
问答
文章排行榜
最热
最新
相关电子书
更多
文娱运维技术
立即下载
《SaaS模式云原生数据仓库应用场景实践》
立即下载
《看见新力量:二》电子书
立即下载