Electron中菜单的创建和绑定事件

最新推荐文章于 2024-05-19 09:45:00 发布

碑无名

最新推荐文章于 2024-05-19 09:45:00 发布

阅读量398

点赞数

文章标签： react.js javascript 前端

本文链接：https://blog.csdn.net/deep_zhuheihei/article/details/123898099

版权

这段代码展示了如何使用Electron框架创建一个桌面应用。在`main.js`中，它初始化了Electron的`app`和`BrowserWindow`，并设置了主窗口的大小和加载的HTML页面。此外，还引入了远程模块，并定义了一个菜单模板，该模板包含了两个子菜单，每个子菜单有不同的选项。菜单被设置为应用菜单，并在点击'精品SPA'时打开新的窗口加载`yellow.html`。

摘要由CSDN通过智能技术生成

main.js

var electron = require("electron");

var app = electron.app; //引用app

var BrowserWindow = electron.BrowserWindow; //窗口引用

var mainWindow = null; //声明要打开的主窗口

app.on("ready", () => {
  mainWindow = new BrowserWindow({
    width: 800,
    height: 800,
    webPreferences: { nodeIntegration: true,contextIsolation:false,enableRemoteModule: true, },
  });
  require('@electron/remote/main').initialize()
  require('@electron/remote/main').enable(mainWindow.webContents)
  require('./main/menu.js')
  mainWindow.loadFile("demo.html"); //加载html页面
  mainWindow.on("closed", () => {
    mainWindow = null;
  });
});

menu.js

const {BrowserWindow} = require('electron')
const {Menu} = require('electron')

var template = [
  {
    label: '凤来怡洗浴会所',
    submenu:[
      {
        label: '精品SPA',
        click: () => {
          var win = new BrowserWindow({
            width: 500,
            height: 500,
            webPreferences: {nodeIntegration: true,contextIsolation:false,enableRemoteModule: true,}
          })
          win.loadFile('yellow.html')
          win.on('close', () => {
            win = null
          })
        }
    },
      {label:'泰式按摩'}
    ]
  },
  {
    label: '大浪淘沙洗浴中心',
    submenu:[
      {label: '牛奶玫瑰瑜'},
      {label:'爱情拍拍收'}
    ]
  }
]

var m = Menu.buildFromTemplate(template)

Menu.setApplicationMenu(m)