electron 编写自定义菜单实现重启、关闭、复制和粘贴功能

开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第2天，点击查看活动详情

electron 学习第二天

上次在使用electron后每次都需要手动重启这样很不方便，本次引入nodemon。

nodemon安装及使用

npm i nodemon -D

//package.json
 "scripts": {
    "start": "nodemon --watch src/*.* --exec electron-forge start",
},

新建src文件,将需要监听修改重启的文件放入其中。

• 在每次npm start后修改src文件夹下的文件不需要重启项目。

自定义主菜单

新建menuList.js

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

const template = [
  {
    label: '文件',
    submenu: [
      {
        label: '关闭',
        click: () => {
          app.quit()
        }
      },
      {
        label: '重启',
        click: () => {
          app.relaunch({ args: process.argv.slice(1).concat(['--relaunch']) })
          app.exit(0)
        }
      }
    ]
  }
]

const menu = Menu.buildFromTemplate(template)
Menu.setApplicationMenu(menu)

• 在点击关闭是便会关闭当前窗口
• 点击重启便会重启当前窗口 在主进程中引入

//main.js
  require('./menuList')//在创建完主进程后引入

效果图

为了方便调试在主进程中加入下面代码

win.webContents.openDevTools()

这样才启动后会直接打开调试工具

右键单击页面时显示菜单

//main.js
webPreferences: {
      // preload: path.join(__dirname, 'preload.js'),//contextIsolation开启时和预加载脚本冲突 先关闭
      enableRemoteModule: true,//开启remote模块
      nodeIntegration: true,//渲染进程使用nodeApi
      contextIsolation: false//上下文隔离关闭
}

新建events.js

//events.js
const { ipcMain, BrowserWindow, Menu } = require('electron')
ipcMain.on('show-context-menu', (event) => {
  const template = [
    {
      label: '复制',
      click: () => {
        event.sender.send('context-menu-command', 'copy')
      }
    },
    {
      label: '粘贴',
      click: () => {
        event.sender.send('context-menu-command', 'stickup')
      }
    }
  ]
  const menu = Menu.buildFromTemplate(template)
  menu.popup(BrowserWindow.fromWebContents(event.sender))
})

• 编写右击菜单模板

//main.js
 require('./events')//引入事件

修改index.html

<!-- html -->
<input id="text"/>

修改render.js

//render.js
const { ipcRenderer, clipboard } = require('electron')
const copy = () => {
  const { baseNode, anchorOffset, focusOffset } = this.getSelection()
  const data = baseNode.data.slice(anchorOffset, focusOffset)
  clipboard.writeText(data, 'selection')
}
const stickup = () => {
  const inputDom = document.getElementById('text')
  inputDom.value = clipboard.readText('selection')
}
const evens = {
  copy, stickup
}
window.addEventListener('contextmenu', (e) => {//添加菜单
  e.preventDefault()//阻止默认事件
  ipcRenderer.send('show-context-menu')//加载自定义菜单
})

ipcRenderer.on('context-menu-command', (e, command) => {
  evens[command]()//执行方法
})

• 通过getSelection获取选中的文本，通过clipboard复制到粘贴板中 效果图

结语

第二天，加油！