第六章：Electron 主进程与渲染进程之间的通信

渲染进程 和 主进程通信（异步）

• 渲染进程发送并接受广播数据 ipcRender

//渲染进程

import { ipcRenderer } from 'electron';

var sendDom = document.querySelector('#send');

sendDom.onclick = function () {
    // alert('1235')

    //渲染进程给主进程广播数据
    ipcRenderer.send('sendMessage', 'wo shi xuan ran jin cheng guang bo shu ju')
}

//接收主进程广播的数据

ipcRenderer.on('replay', function (event, data) {
    console.log(data);
})

• 主进程接收并发送数据 ipcMain

//主进程  广播数据

import { ipcMain } from 'electron';

//接收异步广播数据
ipcMain.on('sendMessage',function(event,data){
    console.log(data);

    //主进程给渲染进程广播数据
    event.sender.send('replay','ok replay')
})

• 注册主进程ipc通信

• 效果

---

渲染进程 和 主进程通信（同步）

• 渲染进程发送数据并有返回值 ipcRender

// 渲染进程 和 主进程通信（同步）

var sendsyncDom = document.querySelector('#sendsync');

sendsyncDom.onclick = function () {
    var msg = ipcRenderer.sendSync('sendSyncMessage', 'fa song shu ju tong bu')
    console.log(msg);
}

• 主进程接收数据并返回返回值

//接收同步广播

ipcMain.on('sendSyncMessage',function(event,data){
    console.log(data);

    //主进程给渲染进程广播同步数据
    event.returnValue='wo shi yi ge tong bu shu ju';
})

---

渲染进程直接通过localStorage传值

• 打开新窗口

• 渲染进程存值

const btn1 =document.querySelector('#btn_open_new')

import { ipcRenderer } from 'electron';


btn1.onclick=()=>{
    var aid=123456;

    ipcRenderer.send('openWindow');

    //通过localStorage实现页面传值
    localStorage.setItem('aid',aid);
}

• 主进程打开新窗口

import { ipcMain ,BrowserWindow} from 'electron';
//打开新窗口，并传递数据
var newWin = null; 
ipcMain.on('openWindow',function(){
     //调用 BrowserWindow打开新窗口
     newWin =new BrowserWindow({
        width:1200,
        height:800,
        frame:true,//是否显示边缘框
        fullscreen:false //是否全屏显示
    })
    //打开一个新的窗口
    newWin.loadURL(path.join(`file:`,__dirname,'../otherWin.html'));
    //新建窗口
    // newWin.loadURL(path.join(`file:`,__dirname,'../index.html'));

    //开启渲染进程中的调试模式
    newWin.webContents.openDevTools();

    newWin.on('close',()=>{
        newWin=null
    })
})

• 新窗口渲染进程取值

//获取localStorage的数据

var aid = localStorage.getItem('aid');

console.log(aid);

---

渲染进程直接通信

• 打开新窗口

• 渲染进程发送广播通知主进程，并接收新窗口广播室数据

const btn1 =document.querySelector('#btn_open_new')

import { ipcRenderer } from 'electron';


btn1.onclick=()=>{
    var aid=123456;

    ipcRenderer.send('openWindow',aid);

    //通过localStorage实现页面传值
    // localStorage.setItem('aid',aid);
}
//接收 新窗口 数据
ipcRenderer.on('toIndex',function(event,data){
    console.log(data);
})

• 主进程打开新窗口并发送广播到新窗口

import { ipcMain ,BrowserWindow} from 'electron';

var path=require('path')

//打开新窗口，并传递数据
var newWin = null; 
ipcMain.on('openWindow',function(event,data){

    //1.获取当前窗口的对象

    var winId = BrowserWindow.getFocusedWindow().id;


     //调用 BrowserWindow打开新窗口
     newWin =new BrowserWindow({
        width:1200,
        height:800,
        webPreferences: { nodeIntegration: true },//使用node功能
        frame:true,//是否显示边缘框
        fullscreen:false //是否全屏显示
    })

    
    //打开一个新的窗口
    newWin.loadURL(path.join(`file:`,__dirname,'../otherWin.html'));
    //新建窗口
    // newWin.loadURL(path.join(`file:`,__dirname,'../index.html'));

    //开启渲染进程中的调试模式
    newWin.webContents.openDevTools();



    //通过newWin.webContents.send把当前数据广播给新窗口

    newWin.webContents.on('did-finish-load',(event) => {
        newWin.webContents.send('toOtherWin',data,winId)
     })


    newWin.on('close',()=>{
        newWin=null
    })
})

• 新窗口渲染进程接收数据并发送广播到前页面渲染进程

import { ipcRenderer } from 'electron';

var BrowserWindow = require('electron').remote.BrowserWindow;
//获取localStorage的数据

// var aid = localStorage.getItem('aid');

// console.log(aid);



ipcRenderer.on('toOtherWin', function (event, data, winId) {
    //获取上一个窗口的id
    let win = BrowserWindow.fromId(winId);
    win.webContents.send('toIndex','this is newwin')
    console.log(data);

})

• 效果