electron菜单的基本使用

小周sir

发布于 2020-02-24 15:58:21

8220

发布于 2020-02-24 15:58:21

文章被收录于专栏：前端技术开发前端技术开发

对electron了解之后，让我们学习创建一个窗口，使用自己的编写的窗口

搭建环境可以看https://cloud.tencent.com/developer/article/1586258

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

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2020-02-19 ，如有侵权请联系 cloudcommunity@tencent.com 删除

javascript