Electron笔记

保存代码自动刷新

安装electron-reloader。

npm install --save-dev electron-reloader

在main.js（Electron项目入口文件）文件中增加如下代码，引入electron-reloader。

const { app, BrowserWindow } = require('electron')

// 热加载
try {
  require('electron-reloader')(module,{});
} catch (_) {}

菜单定制

定制应用菜单，应用菜单只能在 Electron 的主进程中进行访问。例如：

// main.js
const { app, Menu } = require('electron');

app.on('ready', () => {
    const appMenu = Menu.buildFromTemplate(menuTemplate);
    Menu.setApplicationMenu(appMenu);
});

应用菜单通过 Menu.setApplicationMenu 进行设置。

菜单模板：

菜单的 template 是一个对象数组，每个对象会定义一个独立的菜单，它会显示在应用菜单的 Bar 位置，显示的文字通过 label 属性进行定义。

以这段代码为例，我们定义了两个菜单，每个菜单都包含两个菜单项，菜单项就是我们点击菜单时下拉出来的内容。

// 1.导入 electron 中的 Menu
const { Menu, BrowserWindow } = require('electron')

// 2.创建菜单模板,数组里的每一个对象都是一个菜单
const template = [
  {
    label: '菜单一',
    // submenu 代表下一级菜单
    submenu: [
      {
        label: '子菜单一',
        // 添加点击事件
        click: () => {
          // 创建一个新的窗口
          let sonWin = new BrowserWindow({
            width: 200,
            height: 200,
          })
          sonWin.loadFile('./index2.html')
          // 为关闭的时候进行清空
          sonWin.on('close', () => {
            sonWin = null
          })
        },
      },
      { label: '子菜单二' },
      { label: '子菜单三' },
      { label: '子菜单四' },
    ],
  },
  {
    label: '菜单二',
    // submenu 代表下一级菜单
    submenu: [
      { label: '子菜单一' },
      { label: '子菜单二' },
      { label: '子菜单三' },
      { label: '子菜单四' },
    ],
  },
]

// 3.从模板中创建菜单
const myMenu = Menu.buildFromTemplate(template)

// 4.设置为应用程序菜单
Menu.setApplicationMenu(myMenu)
  

参考：学透 Electron 自定义菜单 - 掘金 (juejin.cn)

进程间通信

主线程 到 渲染线程 通过 webContents.send 来发送 --->ipcRenderer.on 来监听

渲染线程 到 主线程 需要通过 ipcRenderer.send发送 ---> ipcMain.on来监听