Electron菜单的构建，内嵌浏览器

破晓书生
886 阅读2分钟

「这是我参与2022首次更文挑战的第3天，活动详情查看：2022首次更文挑战」

1, 菜单的构建

（1） 从electron中引入菜单Menu类

（2） 构建菜单模板template

（3） 将模板进行编译

（4） 把通过模板编译的对象设置到应用程序中

# 从electron中引入菜单Menu类
const { Menu, BrowserWindow } = require('electron')
# 构建菜单模板template
var template = [
  {
    label: '读书馆',
    submenu: [
      { 
        label: 'Vue',
        accelerator:'ctrl+n',
        click: ()=> { 
          var win = new BrowserWindow({
            width: 500,
            height: 500,
            webPreferences: { nodeIntegration: true }
          })
          debugger
          win.loadFile('yellow.html')
          win.on('closed', () => {
             win = null;
          })
        } 
      },
      { label: 'React' },
      { label: 'Java' }
    ]
  },
  {
    label: '休息室',
    submenu: [
      { label: '桌子' },
      { label: '椅子' }
    ]
  }
]
# 将模板进行编译
var menu = Menu.buildFromTemplate(template)
# 把通过模板编译的对象设置到应用程序中
    Menu.setApplicationMenu(menu)

注意： loadFile的文件路径：直接写文件名称即可。

（5) 快捷键

# 加速器
accelerator:'ctrl+n',

1642700896366.png

2, 右键菜单

右键菜单的响应事件是写在渲染进程中的, 随着Electron版本的更新，网上给出的教程很多都是基于底版本的API方法，下面是Electron 16+版本的写法。

渲染进程方法需要通过@electron/remote引入

const { BrowserWindow, getCurrentWindow, Menu} = require('@electron/remote')

const btn = this.document.querySelector('#btn')
window.onload = function() {
  btn.onclick = () => {
    var newWin = new BrowserWindow({
      width: 500,
      height: 500,
      webPreferences: { 
        nodeIntegration: true,// 启用node功能
        contextIsolation: false, // 防止require 未定义
        enableRemoteModule: true,
      }
    })
    newWin.loadFile('yellow.html')
    newWin.on('close', () => {
      newWin = null
    })
  }
}
var rightTemplate = [
  { label: '粘贴' , accelerator: 'ctrl+c' },
  { label: '复制' , accelerator: 'ctrl+v'},
  { label: '删除' , accelerator: 'ctrl+d'}
]
var menu = Menu.buildFromTemplate(rightTemplate)
window.addEventListener('contextmenu', (e) => {
  e.preventDefault()
  menu.popup({window: getCurrentWindow()})
})

1642700853157.png

3, 打开外部浏览器

默认情况，通过electron点击一个外部链接地址，会在electron内部浏览器中进行调整，如果有需求，需要打开原生外部的浏览器，可以通过electron提供的shell功能实现

const { shell } = require('electron')

具体的代码实现：

html页面

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <a id="ahref" href="https://juejin.cn/user/2225067265891902">贰拾壹先生的博客</a>
  <button id="btn">打开新的窗口</button>
  <script src="./shell/shell.js"></script>
</body>
</html>

shell.js脚本

var { shell } = require('electron')

var ahref = document.querySelector('#ahref')

ahref.onclick = function(e) {
  e.preventDefault()
  var href = this.getAttribute('href')
  shell.openExternal(href)
}

4, 嵌入网页

效果： 类似iframe的效果，可以在指定的位置，指定的大小，显示指定的URL页面，

如果要实现这个功能，需要使用主进程中的BrowserView

在main.js中添加代码

 // BrowserView
  var BrowserView = electron.BrowserView
  var view = new BrowserView()
  mainWindow.setBrowserView(view)
  view.setBounds({
    x: 0, y: 120, width: 400, height: 400
  })
  view.webContents.loadURL('http://www.baidu.com')

实现的效果：

1642702679506.png 如果想打开子窗口，也可通过window.open实现

代码如下：

var mybtn = document.querySelector('#btn2')
mybtn.onclick = function(e) {
  window.open('https://jspang.com')
}

5, 项目地址

项目代码地址和文档中的截图都是同步的，都已经实现

[持续更新中]

gitee.com/jamiedawn/e…

avatar
文章
阅读
粉丝