Electron通信, 打开页面

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

主进程与渲染进程之间通信

渲染进程 ipcRenderer send(异步), on(接受主进程的数据), sendSync(同步发送)

主进程 ipcMain 的 on 方法监听渲染进程的方法

渲染进程:

// 同步
sync.onclick = function() {
  const replyMsg = ipcRenderer.sendSync('sync', '我发送了同步的数据给主进程')
  console.log(replyMsg) // 这是主进程返回的数据
}

// 异步
async.onclick = function() {
  ipcRenderer.send('async', '我发送了异步的数据')
  // 监听主进程返回的数据
  ipcRenderer.on('reply', (event, data) => {
    console.log(data)
  })
}

主进程:

// 同步
ipcMain.on('sync', function (event, data) {
  console.log(data)
  event.returnValue = '我收到了你的同步数据了' // 返回数据给渲染进程
})

// 异步
ipcMain.on('async', (event, data) => {
  console.log(data)
	// 发送数据给渲染进程
   event.sender.send('reply', '我收到了你的异步数据了')
})

渲染进程之间通信

在主进程中通过 BrowserWindow 实例的 webContents 方法发送事件, 渲染进程监听即可

渲染进程进程之间进行通信肯定有2个窗口, 所以在打开新的窗口的时候, 你需要通过 BrowserWindow.getFocusedWindow().id 获得当前窗口的id, 在新的窗口建立完成的时候, 在渲染进程中通过remote 模块来 使用 BrowserWindow.fromId(上个窗口的id) 来 获得窗口实例, 然后发送事件,旧的窗口监听即可

ipcMain.on('createwindow', (event, data) => {
  // 获取当前窗口的id
  const winId = BrowserWindow.getFocusedWindow().id
  win = new BrowserWindow({
    width: 400,
    height: 300,
    webPreferences: { nodeIntegration: true }
  })
  win.loadURL(path.join('file:', __dirname, '../src/newWindowContent.html'))
  // 将信息传递给新的窗口
  win.webContents.openDevTools()	
// 当新的窗口导航加载完成执行
  win.webContents.on('did-finish-load', function () {
    win.webContents.send('toNew', data, winId)
  })
})

// 新窗口的渲染进程
ipcRenderer.on('toNew', (event, data, id) => {
  console.log(data, '我接受到了,你给予我的数据')
  // 向之前的浏览器发送数据
  const formerWin = BrowserWindow.fromId(id)
  formerWin.webContents.send('toformer', '这是新浏览器给你的数据')
})

// 旧窗口监听新窗口给的数据
ipcRenderer.on('toformer', (event, data) => {
  console.log(data, '收到了新浏览器给予的数据')
})

shell

在electron中,想通过点击某个事件,来通过外部浏览器打开某些连接, 需要使用到shell模块, 通过调用 shell 模块中的 openExternal(href) 方法执行

var { shell } = require('electron').remote

var aDom = document.querySelector('#adom')

aDom.onclick = function(e) {
  // 阻止a标签的默认行为

  e.preventDefault()

  var href = this.getAttribute('href')

  //sheel模块打开外部浏览器
  shell.openExternal(href)
}
Last Updated: 2022/06/25 19:01:30
Electron remote模块 什么是闭包?