(五)Electron 菜单（Menu）

最新推荐文章于 2024-06-18 11:03:47 发布

此心勿动

最新推荐文章于 2024-06-18 11:03:47 发布

阅读量2.7w

点赞数 3

分类专栏： electron学习文章标签： chromium node Hybrid electron

本文链接：https://blog.csdn.net/ch15196637370/article/details/51147980

版权

electron学习专栏收录该内容

5 篇文章 1 订阅

订阅专栏

这一章对electron的菜单初体验，做一个简单的用例,点击菜单加载网页。

electron的菜单被封装之后使用起来非常方便。

var template = [{
label: 'Edit',
submenu:[
        {
        label:'item1',
        click:function(){}
        }，
        {
        type: 'separator'
        }
        ],
}];

label : 菜单名字
submenu：子菜单项
click: 点击事触发
type: ‘separator’ 分隔条

更多信息参考官方文档MenuItem,Menu.

然后调用Menu.buildFromTemplate加载模板，Menu.setApplicationMenu去设置窗口的菜单。
代码:

var remote = require('electron').remote;
var Menu = remote.Menu;
var menu = Menu.buildFromTemplate(template);
Menu.setApplicationMenu(menu);

说明：由于在render进程，不能直接使用UI资源，需要通过remote模块来使用Menu。remote的更多信息参考这里

由于我们要加载网页，需要内嵌一个webview.

<webview id="webview" src="https://github.com/chengang4505" style="position: fixed; width:100%; height:100%"></webview>

一个工具方法：

    function loadUrl(url) {
        return function () {
            webview.src = url;
        }
    }

html中的完整代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body style="margin: 0px">
<webview id="webview" src="https://github.com/chengang4505" style="position: fixed; width:100%; height:100%"></webview>
<script>
    var webview = document.getElementById('webview');
    var Menu = require('electron').remote.Menu;
    function loadUrl(url) {
        return function () {
            webview.src = url;
        }
    }
    var template = [
        {
            label: '加载网页1',
            submenu: [
                {
                    label: '优酷',
                    click:loadUrl('http://www.youku.com')
                },
                {
                    type: 'separator'
                },
                {
                    label: '百度',
                    click:loadUrl('http://www.baidu.com')
                }

            ]
        },
        {
            label: '加载网页2',
            submenu:[
                {
                    label: 'github',
                    click:loadUrl('http://www.github.com')
                },
                {
                    type: 'separator'
                },
                {
                    label: 'CSDN',
                    click:loadUrl('http://www.csdn.net')
                }
            ]
        },
        {
            label: '我的信息',
            submenu:[
                {
                    label: '我的github',
                    click:loadUrl('https://github.com/chengang4505')
                },
                {
                    label: '欢迎star ●▂●',
                }
            ]
        }
    ];
    var menu = Menu.buildFromTemplate(template);
    Menu.setApplicationMenu(menu);
</script>
</body>
</html>

结果1：

结果2：

结果3：

此心勿动

关注

3
点赞
踩
10

收藏

觉得还不错? 一键收藏
7
评论
(五)Electron 菜单（Menu）

这一章对electron的菜单初体验，做一个简单的用例,点击菜单加载网页。electron的菜单被封装之后使用起来非常方便。var template = [{label: 'Edit',submenu:[ { label:'item1', click:function(){} }， { type: '
复制链接

扫一扫