14、 Electron菜单

index.js

/**
 * 使用模板创建原生应用菜单
 * 1、应用菜单（窗口菜单）
 * Window、Linux和Mac OS X
 * 2、上下文菜单
 * 
 * 1、模板 
 * 2、代码
 * electron-packager
 * npm install electron-packager -g
 * electron-packager . firstmenu --electron-version=3.0.0
 * dmg(Mac OX X) exe(Window)
 * 
 * 
 * 通用role
undo
redo
cut
copy
paste
pasteAndMatchStyle
selectAll
delete
minimize:最小化当前窗口
close:关闭当前窗口
quit:退出应用程序
reload:重新装载当前窗口
forceReload:重新装载当前窗口（不考缓存）
toggleDevTools:在当前窗口显示开发者工具
toggleFullScreen:全屏显示当前窗口
resetZoom:重新设置当前页面的尺寸为最初的尺寸
zoomIn:将当前页面放大10%
zoomOut:将当前页面缩小10%
editMenu:整个“Edit”菜单，包括Undo、Copy等。
windowMenu:整个“Window”菜单，包括Minimize、Close等。
下面的角色仅用于Mac OS X系统。
Mac OS X独有的role
about:显示“关于”对话框
hide:隐藏
hideOthers:隐藏其他应用程序。
unhide:取消隐藏其他应用程序。
startSpeaking:开始说话。
stopSpeaking:停止说话。
front:映射arrangeInFront动作
zoom:映射performZoom动作
taggleTabBar:显示TabBar.
selectNextTab:选择下一个Tab
selectPreviousTab:选择前一个Tab
mergeAllWindows:合并所有的窗口
moveTabToNewWindow:移动Tab到新有窗口
window:Window的子菜单
help:Help的子菜单
services:Services的子菜单
recentDocuments:Open Recent菜单的子菜单
clearRecentDocuments:清除最近打开的文档
 */

/**
 * 菜单类型
 * 1、normal:默认的菜单类型
 * 2、separator:分割线
 * 3、submenu:子菜单
 * 4、checkbox:多选菜单
 * 5、radio:单选菜单
 */

/**
 * 为菜单项添加图标
 * windows 
 * ico
 * 其他系统
 * png
 * icon设置图标
 * 图标会按照实际大小显示
 */
/**
 * 动态创建菜单
 */
/**
 * 上下文菜单
 * 
 */
// const electron = require('electron');
// const app=electron.app;
// const BrowserWindow=electron.BrowserWindow;
// const Menu=electron.Menu;
const {app,BrowserWindow,Menu} = require('electron');
function createWindow(){
    win = new BrowserWindow({
        //show:false,
        webPreferences:{
            nodeIntegration: true, // 是否集成 Nodejs
            enableRemoteModule: true,
            contextIsolation: false,
        }
    });
    win.loadFile('index.html');
    //定义菜单模板
    // const template=[
    //     {label:"文件",submenu:[
    //         {label:"关于",
    //         //role:'about',
    //         click:()=>{
    //             var aboutWin=new BrowserWindow({300,height:200,parent:win,modal:true});
    //             aboutWin.loadURL("https://www.baidu.com");
    //         }},
    //         {type:"separator"},
    //         {label:"关闭",accelerator:"Ctrl+Q",click:()=>{win.close();}}
    //     ]},
    //     {label:"编辑",submenu:[
    //         {label:"复制",click:()=>{win.webContents.insertText('复制');}},
    //         {label:"粘贴",click:()=>{win.webContents.insertText('粘贴');}},
    //         {type:"separator"},
    //         {label:"查找",accelerator:"Ctrl+F",click:()=>{win.webContents.insertText('查找');}},
    //         {label:"替换",accelerator:"Ctrl+H",click:()=>{win.webContents.insertText('替换');}}
    //     ]},
    // ]
    // if(process.platform=="darwin"){
    //     //添加Mac OS X特有的菜单
    // }
    //菜单角色
    // const template=[
    //     {label:"编辑",submenu:[
    //         {label:"撤销",role:"undo"},
    //         {label:"重做",role:"redo"},
    //         {label:"剪切",role:"cut"},
    //         {label:"复制",role:"copy"},
    //         {label:"粘贴",role:"paste"},
    //     ]},
    //     {label:"调试",submenu:[
    //         {label:"显示调试工具",role:"toggleDevTools"},
    //     ]},
    //     {label:"窗口",submenu:[
    //         {label:"全屏显示窗口",role:"toggleFullScreen"},
    //         {label:"窗口放大10%",role:"zoomIn"},
    //         {label:"窗口缩小10%",role:"zoomOut"},
    //     ]},
    // ]
    // if(process.platform=="darwin"){
    //     //添加Mac OS X特有的菜单
    //     template.unshift(
    //         {label:"Mac",submenu:[
    //             {label:"关于",role:"about"},
    //             {label:"开始说话",role:"startSpeaking"},
    //             {label:"停止说话",role:"stopSpeaking"},
    //         ]}
    //     )
    // }
    //菜单类型
    // const template=[
    //     {label:"编辑",submenu:[
    //         {label:"撤销",role:"undo"},
    //         {label:"重做",role:"redo"},
    //         {type:"separator"},
    //         {label:"剪切",role:"cut"},
    //         {label:"复制",role:"copy"},
    //         {label:"粘贴",role:"paste"},
    //     ]},
    //     {label:"我的菜单",submenu:[
    //         {label:"多选1",type:"checkbox"},
    //         {label:"多选2",type:"checkbox"},
    //         {label:"多选3",type:"checkbox"},
    //         {label:"单选1",type:"radio"},
    //         {label:"单选2",type:"radio"},
    //         {label:"Windows",type:"submenu",role:"windowMenu"}
    //     ]},
    // ]
    //菜单图标
    // var icon="";
    // if(process.platform=="win32"){
    //     icon="./images/logn.jpg";//.ico
    // }else{
    //     icon="./images/folder.png";//.png
    // }
    // const template=[
    //     {label:"文件",submenu:[
    //         {label:"打开",icon:icon,role:"undo"},
    //         {label:"重做",role:"redo"},
    //     ]},
    // ]
    // console.info(Menu);
    // const menu=Menu.buildFromTemplate(template);
    // Menu.setApplicationMenu(menu);
    win.on("ready-to-show",()=>{
        win.show();
    });
    if(process.platform!="darwin"){
        win.setIcon("images\logn.jpg");
    }
    win.on('closed',()=>{
        console.log('closed')
        win=null;
    });
}
app.on('ready',createWindow);
app.on('window-all-closed',()=>{
    console.log('window-all-closed');
    if(process.platform!='darwin'){

    }
});
app.on('activate',()=>{
    console.log('activate');
    if(win==null){
        createWindow();
    }
});

index.html

<!DOCTYPE html>
<html>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>菜单、菜单角色、动态创建菜单</title>
<script src="event.js"></script>
<body onload="onLoad()"> 
    <button onclick="onClick_ProgressBar()">在任务栏上添加进度条</button>
    <textarea></textarea>
    <h1>菜单角色</h1>
    <textarea style="400px;height:300px;"></textarea>
    <h1>动态创建菜单</h1>
    <button onclick="onClick_AddOriginMenu()">添加最初菜单</button>
    <br>
    菜单文本：<input id="menuitem" type="text"/>
    <br>
    <input id="radio" name="radio" type="radio"/>单选
    <input id="checkbox" name="radio" type="radio"/>多选
    <br>
    <button onclick="onClick_AddMenuItem()">动态添加菜单项</button>
    <h1>上下文菜单</h1>
    <div id="panel" style="background-color:brown;300px;height:200px"></div>
</body>
</html>

event.js

//const{webFrame}=window.require('electron');
const electron= window.require('electron');
const app=electron.app;
const remote=electron.remote;
const BrowserWindow=remote.BrowserWindow;
const Menu=remote.Menu;
const MenuItem=remote.MenuItem;
const dialog=remote.dialog;
function onClick_ProgressBar()
{
    const win=remote.getCurrentWindow();
    win.setProgressBar(0.3);
}

function saveClick(){
    var win=new BrowserWindow({300,height:200});
    win.loadURL("https://www.baidu.com");
}

const customMenu=new Menu();
function onClick_AddOriginMenu(){
    const menu=new Menu();
    var icon="";
    if(process.platform=="win32"){
        icon="./images/logn.jpg";//.ico
    }else{
        icon="./images/folder.png";//.png
    }

    const menuitemOpen=new MenuItem({label:"打开",icon:icon});
    const menuitemSave=new MenuItem({label:"保存",saveClick});
    const menuitemDebug=new MenuItem({label:"显示调试工具",role:"toggleDevTools"});
    const menuitemFile=new MenuItem({label:"文件",submenu:[menuitemOpen,menuitemSave,menuitemDebug]});

    menuitemCustom=new MenuItem({label:"我的菜单",submenu:customMenu});
    menu.append(menuitemFile);
    menu.append(menuitemCustom);
    Menu.setApplicationMenu(menu);
}

function onClick_AddMenuItem()
{
    var type="normal";
    if(radio.checked){
        type="radio"
    }
    if(checkbox.checked){
        type="checkbox"
    }
    customMenu.append(new MenuItem({label:menuitem.value,type:type}));
    menuitem.value="";
    radio.checked=false;
    checkbox.checked=false;
    Menu.setApplicationMenu(Menu.getApplicationMenu());
}

function onLoad(){
    const menu=new Menu();
    var icon="";
    if(process.platform=="win32"){
        icon="./images/logn.jpg";//.ico
    }else{
        icon="./images/folder.png";//.png
    }
    const win=remote.getCurrentWindow();
    var menuitemOpen=new MenuItem({label:"打开",icon:icon,click:()=>{
        var paths=dialog.showOpenDialog({properties:['openFile']});
        if(paths!=undefined){
            alert(paths[0])
            win.setTitle(paths[0]);
        }
    }});
    var menuitemSave=new MenuItem({label:"保存",saveClick});
    var menuitemFile=new MenuItem({label:"文件",submenu:[menuitemOpen,menuitemSave]});

    var menuitemInsertImage=new MenuItem({label:"插入图像"});
    var menuitemRemoveImage=new MenuItem({label:"删除图像"});
    menu.append(menuitemFile);
    menu.append(menuitemInsertImage);
    menu.append(menuitemRemoveImage);
    panel.addEventListener("contextmenu",function(event){
        event.preventDefault();
        x=event.x;
        y=event.y;
        menu.popup({x:x,y:y});
        return false;
    });
}