Electron学习-菜单栏（2021.1.30&31）

注意：

• 真的从0开始，只有一点C/C++基础，所以js这方面完全是真·零基础，完全亦步亦趋跟着老师走的。看的是b站上“技术胖”老师的视频，学成必谢555(老师的网站是jspang.com,视频、文章都是免费的，太良心了555)
  但是看了几集发现这个老师举例不太恰当，望注意哈。（一开始我看到评论里有人说哗众取宠我还不信来着，结果...起反作用了，这些例子确实让我感觉有点恶心）
• 之前的学习记录都在电脑里，之后有空慢慢传上来
• 学的是electron，用的是vs code
• 写这个的主要目的是怕自己之后忘了，方便捡起来
• 说句题外话，我26号出门的时候手机被偷了，搞的我这两天不得安宁。这事非常离谱，大家一定注意莫名其妙往你身上靠的人。
• 另外一句题外话，做什么都别着急。我丢了手机之后立马买了一部。上午买的，下午就打电话给我说找到了。不得不说这真离谱。
• 不知不觉2021年的第一个月就过去了，感觉自己啥都没干，要加油啊！（这不是你自己给自己点赞的理由）

--学习内容：菜单创建（包括顶部和右键菜单）&事件绑定&快捷键绑定

一、菜单创建：electron的一个主线程模块menu
1.（上节课代码的基础上）再新建一个文件夹（我管他叫littlethings小东西）
里面新建一个menu.js，用于写有关菜单的逻辑

const {Menu} = require('electron')//引入electron
//声明一个模板,就是一个菜单数组（每一个数组元素都是一个菜单
var template = [
    {
        //每个菜单都要有label（就是名称
        //每个菜单当成一个餐厅
        //一号餐厅（第一项）
        label:'刺身料理餐厅',
        //可以添加子菜单，也是数组的形式
        submenu:[
            {label:'北极贝'},//子菜单里也是每一项的名称
            {label:'三文鱼大腩'}
        ]
    },
    {
        label:'日式家庭餐厅',
        submenu:[
            {label:'猪排饭'},
            {label:'荞麦面'}
        ]
    }
]

以上是菜单内容的构建，构建完内容之后还需要创建和使可用

var m = Menu.buildFromTemplate(template)//按照模板构建菜单
Menu.setApplicationMenu(m)//使菜单处于可用状态

2.回到main.js，在app监听到ready消息的响应中，创建窗口之后，loadFile之前加上：

require('./littlethings/menu.js')

有点像C++的内联函数，其实也可以不用新建文件夹以及文件，直接把那些代码全部写在这句话的位置也行。但这可读性不太好，可维护性也不咋地。

然后效果如下：

二、给菜单里的项目绑定事件
1.其实很简单，只要在menu.js里,template数组里每一项的submenu下的每项添加对click事件的响应就好了（请说人话）
直接上代码（更改的地方加了注释）

const {Menu, BrowserWindow} = require('electron')//引入BrowserWindow

var template = [
    {
        label:'刺身料理餐厅',
        submenu:[
            {
                label:'北极贝',
                //对click事件做反应
                click:()=>{
                    var bjbWin = new BrowserWindow({
                        width:500,height:500,
                        webPreferences:{nodeIntegration:true}
                    })
                    bjbWin.loadFile('beijibei.html')
                    bjbWin.on('close',()=>{
                        bjbWin=null
                    })
                }
            },
            {label:'三文鱼大腩'}
        ]
    },
    {
        label:'日式家庭餐厅',
        submenu:[
            {label:'猪排饭'},
            {label:'荞麦面'}
        ]
    }
]

var m = Menu.buildFromTemplate(template)
Menu.setApplicationMenu(m)

然后效果如下：

三、绑定快捷键

非常简单，只要在menu.js里,template数组里每一项的submenu下的每项添加accelerator（其实就是在上一项的位置）

{
                label:'北极贝',
                accelerator:'ctrl+b',//就是这里！
                click:()=>{
                    var bjbWin = new BrowserWindow({
                        width:500,height:500,
                        webPreferences:{nodeIntegration:true}
                    })
                    bjbWin.loadFile('beijibei.html')
                    bjbWin.on('close',()=>{
                        bjbWin=null
                    })
                }
            },

效果：

四、右键菜单：

1、在渲染进程中添加一个右键单击事件
在render文件夹的demo3.js最后加一句

window.addEventListener('contextmenu',function(){
    alert(111)//弹出警告，内容为111
})

不得不说真是比win32的MessageBox要简单太多了呜呜呜

奇怪的小总结增加了！：
渲染层是html，也就是在html中几乎只负责ui，而渲染层的具体业务逻辑（比如说按键响应）会被写在render文件里的对应js文件内，在html中用script组件联系。

2.得弹出菜单

//Menu是主进程下的，所以需要remote。
const {remote}=require('electron')

//建立菜单模板
var rTemplate = [
    {label:'粘贴'},
    {label:'复制'}
]
//建立菜单
var rm=remote.Menu.buildFromTemplate(rTemplate)

//e：contextmunu事件
window.addEventListener('contextmenu',function(e){
    e.preventDefault()//阻止默认响应事件
    rm.popup({window:remote.getCurrentWindow()})//弹出菜单
})

tips:当自己整了顶部菜单后，调试按键就没了。于是可以在main.js里loadFile前加一句

mainWin.webContents.openDevTools()

这样打开窗口时就会自动弹出调试台。

--这节课（包括之前）的全代码放到github上了，自取哟（说的好像自己真的会用github一样）：https://github.com/Junko-Zhou/learning-Electron
Demo3是这节课的，Demo2是之前读取文件的。
感谢大家捧场啦~