electron入门
electron代码地址
一 :先来几个练习热热身
如何在渲染进程中打开新窗口
- 首先electron是用node搭建的，所以在electron中无论是主进程还是渲染进程，都可以使用node语法。
- 渲染进程，也就是我们的html,css页中，也可以使用node预发，但是无法直接使用electron模块，需要间接调用remote模块。
- 来个点击按钮打开窗口的小栗子：如图
快速搭建项目
- 克隆示例项目的仓库 git clone github.com/electron/el…
- 进入这个仓库 cd electron-quick-start
- 安装依赖并运行 npm install && npm start
更改后的目录地址
核心代码
// index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Hello World!</title>
</head>
<body>
<h1>sadddddddddddddddd</h1>
<button id="openWindow">点我打开窗口</button>
<script src='./index.js'></script>
<script>
</script>
</body>
</html>
// index.js 页面
var btn=document.querySelector('#openWindow');
//渲染进程没法直接调用主进程中的模块，但是我们可以通过
// electron中的remote模块间接的调用主进程中的模块
var path=require('path');
var BrowserWindow=require('electron').remote.BrowserWindow;
var win=null;
btn.onclick=function(){
// alert('点击了');
//调用 BrowserWindow打开新窗口
win=new BrowserWindow({
width:400,
height:300,
// frame:false,
// fullscreen:true
})
win.loadURL(path.join('file:',__dirname,'test.html'));
win.on('closed',()=>{
win=null;
})
}
通过调用node的path模块和electron 的remote和BrowserWindow完成点击按钮,打开新窗口
二 ：渲染进程和渲染进程的通信
1. 简单粗暴的方法，通过localstorage
当然了，大多数开发是使用electron-vue进行开发的，其中，用props，vuex，eventBus等等方法，也是支持的。但凡是vue支持的，electron-vue也会支持。简单说一下非electron-vue的
由于太过于简单粗暴，就不进行演示了，直接说第二种
2. ipcMain---ipcRenderer 通信
一看名字，就知道ipcMain---ipcRenderer 肯定是一对基友，ipcMain用于主进程，ipcRenderer用于渲染进程，看演示！
核心代码
在渲染进程中，通过调用ipcRenderer模块，写一个发布订阅
// 渲染进程 index.js目录下
// 发送
var {ipcRenderer} =require('electron');
var sendBtn=document.querySelector('#openSend');
sendBtn.onclick=function(params) {
ipcRenderer.send('openWindow','我是index页面的值啊');
}
// 渲染进程接收:
ipcRenderer.on('replay',function(event,data){
console.log(data,'通信后，主进程传来的啊');
})
// 主进程 receive。js目录下
// 用于接收值的相关操作
//接收到广播
var {ipcMain} =require('electron');
ipcMain.on('openWindow',function(event,aid){
console.log('我接收到值了')
event.sender.send('replay','ok了大哥，我还给你');
})
// html代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Hello World!</title>
</head>
<body>
<button id="openSend">我要传值</button>
<script src='./index.js'></script>
<script>
</script>
</body>
</html>
其实简单概括，就是用ipcMain---ipcRenderer 完成了一个发布订阅。
整个数据流程的走向是 A页面--> 主进程---> A页面
项目目录结构 :
但是，真实的项目中通信，往往没有这么简单，通常是 A页面--> 主进程 ---> B页面，完成发送，然后同归B页面 --- > 主进程 --- > A页面，那么我们改怎么做呢？
