const { BrowserWindow } = require('electron');
const path = require('path');

// 主进程创建web页面
let win = new BrowserWindow({...});

// 加载本地文件
// win.loadURL(path.join('file://',__dirname, './index.html'))  // mac
win.loadURL(path.join(__dirname, './index.html'))
  

渲染进程

在主进程创建的每一个web页面也都运行着自己的进程，页面引入的js文件就属于渲染进程。

渲染进程各自管理自己的页面，可以想象是浏览器的一个个的tab。

electron核心可以分成2个部分，主进程和渲染进程。主进程连接着操作系统和渲染进程，可以看做页面和计算机沟通的桥梁。渲染进程就是我们所熟悉前端环境了。只是载体改变了，从浏览器变成了window。传统的web环境我们是不能对用户的系统进行操作的。而electron相当于node环境，可以在项目里使用所有的node api 。

简单理解：
给web项目套上一个node环境的壳。

四、在渲染进程中创建一个子窗口

1. 创建渲染进程对应render.js文件

2. 渲染进程引入BrowserWindow模块，需要借助于remote模块，

   • 渲染进程不能直接使用 BrowserWindow ，因为该模块默认是主进程允许使用的
   • 借助 remote ,从中引入主进程中的模块,需要在主进程窗口中配置 enableRemoteModule,允许渲染进程 调用主进程模块

3. 并在index.html中引入render.js,两种引入方法及区别

   <!-- 1.引入render.js -->
   <script src="./render-process/render.js"></script>
    
   <!-- 2.electron 基于node -->
   <script>
       require('./render-process/render.js');
   </script>
     
   <--   
    区别:
    	src： 是全局变量
    	require： 引入的文件的最外层的变量，不是全局变量，注：为了在渲染进程中使用require()，还需在主进程窗口配置中启用 nodeIntegration 。
    	//main.js
        win = new BrowserWindow({
           width:330,
           height:355,
           resizable:false, // 是否可改变宽高，默认true
           movable:false,   // 是否可拖拽，默认true
           webPreferences: {
                 nodeIntegration: true, // 是否集成 Nodejs
                 enableRemoteModule: true, // 是否允许渲染进程 调用主进程模块
             }
        })    
     使用：
        1.元素绑定onclick事件 ==== src引入
        2.require  ==== 给元素绑定一个ID ,在render.js获取元素并绑定事件
   -->
   

五、进程间通信

在electron下，主进程与渲染进程相互通信要通过ipc(Inter-Process Communication),进程间通讯模块来完成，

主进程与渲染进程调用的ipc模块是不一样的：

• 主进程调用ipcMain

• 渲染进程调用ipcRenderer

A. 渲染进程 给 主进程 发送指令

1. ipcRenderer模块：渲染进程引入，用于发送事件给主进程，和监听主进程返回的回复事件

   • const { ipcRenderer } = require('electron');

   • 发送事件：ipcRenderer.send('事件名称',传递的数据);

   • 监听事件：ipcRenderer.on('监听事件名称',接收的数据);

2. ipcMain模块：主进程引入，用于接收渲染进程发送的事件并进行回复

   • const { ipcMain } = require('electron');

   • 监听事件：ipcMain.on('监听事件名称',接收的数据);

index.html：

<h1>Hello Electron!</h1>
<button onclick="ny_click()">click me</button>

<!-- 引入render.js 渲染进程-->
<script src="./render-process/render.js"></script>

function ny_click(){
  console.log('Render:','Echoyya')
  ipcRenderer.send('myName','Echoyya');
}

ipcMain.on('myName',function(event,msg){
  console.log('Main:',msg);
})

ipcMain.on('dataToMain',function(event,data){
	win.webContents.send('dataToRender',data);
})

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

<button >改变数据</button>
<button >获取数据</button>
	
<script>
	require('./render-process/a.js');
	require('./render-process/b.js');
</script>

// 全局变量
global.shareObject = {
  name:'上海'
}

const remote = require('electron').remote;

let btn1 = document.getElementById('btn1');

btn1.onclick = function(){
  
  remote.getGlobal('shareObject').name = '北京';
  
  console.log('has changed');

}

const remote = require('electron').remote;

let btn2 = document.getElementById('btn2');

btn2.onclick = function(){

  let msg = remote.getGlobal('shareObject').name

  console.log(msg)

}

const { dialog ,nativeImage} = require('electron');
const path = require('path');
 
// 1.信息对话框
dialog.showMessageBox({
  title:'温馨提示',
  message:'XXXXX XXXXX XXXXX XXXXX XXXXX',
  buttons:['Yes','No'],
  icon:nativeImage.createFromPath(path.join(__dirname,'../src/img/icon1.png'))
}).then(function(index){
  if(index.response == 0){ // 点击了Yes按钮
    console.log('I want you !');
  }else{ // 点击了No按钮
    console.log('no no no');
  }
});

// 2.错误提示框
dialog.showErrorBox('1213','访问错误')

"scripts": {
	"start": "electorn main.js", 
	"pack":"electron-packager ./  test --platform=win32 --out=./dist --arch=x64 --app-version=1.0.0 --ignore=node_modules --icon=./src/img/hrbb.ico --overwrite "
},