为了展示ipc 和 remote的使用 我们在pages下 新建 一个目录 叫 ipc_remote 并创建相应的 js 和 html 文件
目录结构如下
在这里插入图片描述
在 index/index.html 中 我们创建两个button 并引入 index.js文件 ( 这里使用require是为了强调我们可以使用node的一切功能 )

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>hello world</title>
</head>
<body>
  <button type="button" id='ipc'>ipc</button>
  <button type="button" id='remote'>remote</button>
  <script type="text/javascript">
   require('index.js')
 </script>
</body>
</html>

在 index/index.js 中 我们获取dom元素并绑定点击事件

document.getElementById('ipc').onclick=function(){
  //do something
}
document.getElementById('remote').onclick=function(){
  //do something
}

一 、 ipc

electron 封装了操作系统的 ipc 功能 并在主进程以ipcMain 在渲染进程以ipcRender 的方式 提供给我们
在主进程的index.js中我们引入ipcMain 并 调用 ipcMain.on 方法( 为了节省篇幅 只展示新增的代码 )

const {  ipcMain ,BrowserWindow } = require('electron');
  ipcMain.on('createWindowByIpc',(event,arg)=>{
    //arg是渲染进程传来的参数
    console.log(arg);//print 我要创建新窗口
    let ipcWindow=new BrowserWindow ({
  		  width: 500,
  	    height: 400,
  	    frame:true,
  	    parent:mainWindow,
  	    modal:true,//表示模态
  	    autoHideMenuBar:true
  	});
  	ipcWindow.loadFile('./pages/ipc_remote/index.html');
    event.sender.send('createWindowByIpc-reply', 'window created');
  });

在ipc_remote/index.html中 我们插入以下 html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <h2>通过ipc或remote方式创建的窗口</h2>
</body>
</html>

在index/index.js中 我们引入 ipcRender 完善点击事件

const { ipcRenderer }=require('electron');
const remote=require('electron').remote
document.getElementById('ipc').onclick=function(){
  //do something
  ipcRenderer.send("createWindowByIpc",'我要创建新窗口');
}
ipcRenderer.on('createWindowByIpc-reply',function(event,arg){
  console.log(arg);//print window created
})
document.getElementById('remote').onclick=function(){
  //do something
}

运行结果如下
在这里插入图片描述

二 、 remote

electron 封装了操作系统的 Romote Procedure Call 以remote对象提供给渲染进程使用
在index/index.js 中我们继续完善 #remote button 的点击事件

document.getElementById('remote').onclick=function(){
  //do something
  let mainWindow=remote.getCurrentWindow();
  let ipcWindow=new remote.BrowserWindow ({
      width: 500,
      height: 400,
      frame:true,
      parent:mainWindow,
      modal:true,//表示模态
      autoHideMenuBar:true
  });
  ipcWindow.loadFile('./pages/ipc_remote/index.html');
}

需要注意的是 loadFile 传入的 相对地址 是相对 主进程 ( 也就是最外层的index.js )的地址 而不是 相对于/index/index.js的

运行结果如下
在这里插入图片描述
总结 :本文 给出了 使用 ipc 和rpc的 一个简单例子 希望可以起到抛砖引玉的效果
ipc 和rpc 的更多详细介绍可参考 官方文档

next : 下节我们将调整目录结构 引入react 并介绍 搭配webpack 的使用方法