6、electron创建右键菜单

1、创建右键菜单，并添加到右键事件

 //右键菜单
        let rightTemplate = [
            {
                label:'复制',
                accelerator:'ctrl+c'
            },
            {
                label:'粘贴',
                accelerator:'ctrl+v'
            },
        ];
        var m = Menu.buildFromTemplate(rightTemplate);

        window.addEventListener('contextmenu',
            (e)=>{
                e.preventDefault();  //取消事件的默认动作。
                m.popup({
                    window:remote.getCurrentWindow()
                });
            }
        );

渲染进程“打开新窗口.html”完整代码：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7     <title>Document</title>
 8 </head>
 9 <body>
10     <input type="button" id="btn" value="打开新窗口" />
11 
12     <script>
13         
14         const remote = require("@electron/remote");   //引入remote模块
15         const Menu = remote.Menu;  //引入menu
16         const BrowserWindow = remote.BrowserWindow;
17 
18         const btn = document.querySelector("#btn");
19 
20         window.onload = function(){
21             btn.onclick = function(){
22                 newWin = new BrowserWindow({
23                     width:500,
24                     height:500
25                 });
26                 newWin.loadFile('子窗口.html');
27                 newWin.on("closed",()=>{
28                     newWin = null;
29                 })
30             }
31         }
32 
33         //右键菜单
34         let rightTemplate = [
35             {
36                 label:'复制',
37                 accelerator:'ctrl+c'
38             },
39             {
40                 label:'粘贴',
41                 accelerator:'ctrl+v'
42             },
43         ];
44         var m = Menu.buildFromTemplate(rightTemplate);
45 
46         window.addEventListener('contextmenu',
47             (e)=>{
48                 e.preventDefault();  //取消事件的默认动作。
49                 m.popup({
50                     window:remote.getCurrentWindow()
51                 });
52             }
53         );
54     </script>
55 </body>
56 </html>
View Code

 

2、主进程序index.js代码

 1 var electron = require('electron')
 2 
 3 var app = electron.app   //引用APP
 4 var BrowserWindow = electron.BrowserWindow;  //窗口引用
 5 var mainWindow = null;  //声明要打开的主窗口
 6 
 7 app.on('ready',()=>{
 8     mainWindow = new BrowserWindow({
 9         width:800,
10         height:800,
11         webPreferences:
12         {
13             nodeIntegration:true,
14             contextIsolation:false,
15             enableRemoteModule: true,  //允许使用remote模块
16         }
17     });
18 
19     require("@electron/remote/main").initialize();  //初始化remote模块
20     require("@electron/remote/main").enable(mainWindow.webContents);  //
21 
22     //mainWindow.loadFile('index.html');
23     require('./menu.js')
24     mainWindow.loadFile('打开新窗口.html');
25     mainWindow.openDevTools();
26     mainWindow.on('close',()=>{
27         mainWindow = null;   //关闭窗口释放资源
28     })
29 });
View Code

 

posted @ 2022-12-09 14:22  ziff123  阅读(688)  评论(0)  编辑  收藏  举报