Electron remote模块

南山隐士 2022年06月25日 26 0

remote 模块

正常来说,我们要使用electron的某些api我们只能在主进程中进行调用,但是, 如果==你需要在渲染进程中,使用electron的某些api方法, 你可以使用remoter模块==, 就可以使用了

使用remote 模块来创建一个新的window

// 引入path模块
var path = require('path')

// 引入 electron remote 模块中的 BrowserWindow
const { BrowserWindow } = require('electron').remote

// 创建一个窗口变量
var win = null

// 获取btn
const btn = document.querySelector('#btn')

btn.onclick = function() {
  win = new BrowserWindow({
    width: 400,
    height: 300,
    // frame:false, // 是否隐藏菜单栏
    // fullscreen:true // 是否全屏
  })

  // 窗口加载指定的html文件
  win.loadURL(path.join('file:', __dirname, 'newWindowContent.html'))
  // 窗口关闭至空
  win.on('closed', () => {
    win = null
  })
}

自定义菜单

可以通过 Menu 模块来 创建自定义菜单
详细的api: https://electronjs.org/docs/api/menu-item

const { Menu } = require('electron').remote
const remote = require('electron').remote

const template = [
  {
    label: '文件', // 文本信息
    submenu: [
      // 二级菜单
      {
        label: '新建窗口',
        click: () => {
          console.log('aaa')
        }
      },
      { type: 'separator' },
      {
        label: '打开文件',
        accelerator: 'ctrl+x', // 快捷键
        click: () => {
          console.log('bbb') // 点击后执行的函数
        }
      }
    ]
  },
  {
    label: '编辑',
    submenu: [
      { role: 'cut', label: '剪切' },
      {
        role: 'copy', // 作用
        label: '复制'
      }
    ]
  }
]

const m = Menu.buildFromTemplate(template)

Menu.setApplicationMenu(m)

window.addEventListener(
  'contextmenu',
  e => {
    e.preventDefault()
    m.popup({ window: remote.getCurrentWindow() })
  },
  false
)
Last Updated: 2022/06/25 19:01:49
Electron主进程和渲染进程 Electron通信, 打开页面