专栏首页前端技术开发electron菜单的基本使用

electron菜单的基本使用

对electron了解之后,让我们学习创建一个窗口,使用自己的编写的窗口 搭建环境可以看https://www.cnblogs.com/zhoulifeng/p/12306050.html

创建一个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
                })
            },
        }

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • web性能优化指南

    前端性能优化,是每个前端必备的技能,优化自己的代码,使自己的网址可以更加快速的访问打开,减少用户等待,今天就会从几个方面说起前端性能优化的方案,

    小周sri的码农
  • 快速搭建gulp项目实战

    gulp是前端开发过程中对代码进行构建的工具,是自动化项目的构建利器;她不仅能对网站资源进行优化,而且在开发过程中很多重复的任务能够使用正确的工具自动完成;使用...

    小周sri的码农
  • webpack4配置学习(一)

    webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时,它会递归地构建一...

    小周sri的码农
  • 深入Spring Boot (十一):整合Redis详解

    Spring Boot为Redis的Lettuce和Jedis客户端库提供了基本的自动配置,并且可以使用Spring Data Redis完成更多的操作。本篇将...

    JavaQ
  • electron 将pc端(vue)页面打包为桌面端应用

    版权声明:本文为博主原创文章,未经博主允许不得转载。 ...

    j_bleach
  • [日常] nginx与location规则

    ========================================================================= 2018年3...

    陶士涵
  • 剖析Java中HashMap数据结构的源码及其性能优化

    存储结构 首先,HashMap是基于哈希表存储的。它内部有一个数组,当元素要存储的时候,先计算其key的哈希值,根据哈希值找到元素在数组中对应的下标。如果这个位...

    凯哥Java
  • Redis的5个常见应用场景

    前言 Redis 是一个强大的内存型存储,具有丰富的数据结构,使其可以应用于很多方面,包括作为数据库、缓存、消息队列等等。 如果你的印象中Redis只是一个 k...

    dys
  • 数据分析利器 pandas 系列教程(四):对比 sql 学 pandas

    作为 pandas 教程的第四篇,本篇将对比 sql 语言,学习 pandas 中各种类 sql 操作,文章篇幅较长,可以先收藏后食用,但不可以收藏后积灰~

    月小水长
  • 2020预备春招BAT面试题汇总:MyBatis +微服务+多线程+Spring+分布式

    本文收集整理了各大厂常见面试题N道,你想要的这里都有内容涵盖:Java、MyBatis、ZooKeeper、Dubbo、Elasticsearch、Memcac...

    架构师修行之路

扫码关注云+社区

领取腾讯云代金券