electron学习

app 常用事件，生命周期

ready 完成初始化
window-all-closed 关闭所有窗口
before-quit 关闭窗口触发
will-quit 关闭所有窗口并退出
quit 退出事件

did-finish-load 子页面导航完成
dom-ready 子页面全部完成

进程

子进程打印，process 进程信息
nodeIntegration:true  是否继承node 

file 对象，文件对象

```html
<div id="holder">
  Drag your file here
</div>

<script>
  document.addEventListener('drop', (e) => {
    e.preventDefault(); //阻止默认事件
    e.stopPropagation();//阻止冒泡

    for (const f of e.dataTransfer.files) {
      console.log('File(s) you dragged here: ', f.path)
    }
  });
  document.addEventListener('dragover', (e) => { //阻止抬起事件 这些是html5事件
    e.preventDefault();
    e.stopPropagation();
  });
</script>
```

webview 组件，内嵌网站

默认是不能使用的，需要手动开启
webviewTag:true
事件，非常强大
	[拥有很多api](https://www.electronjs.org/docs/api/webview-tag)

window.open和BrowserWindow 管理子窗口

window.open 开启子窗口
数据传递 //这里不详细写，具体百度
window.opener.postMessage(message, targetOrigin)

父窗口也可以操作子窗口

BrowserWindow 管理窗口，子进程

优雅显示窗口

const { BrowserWindow } = require('electron')
let win = new BrowserWindow({ show: false })
win.once('ready-to-show', () => {
  win.show()
})
	```
### 	父子窗口
	
```javascript
const { BrowserWindow } = require('electron')

let top = new BrowserWindow()
let child = new BrowserWindow({ parent: top })
child.show()
top.show()

模态窗口

const { BrowserWindow } = require('electron')

let child = new BrowserWindow({ parent: top, modal: true, show: false })
child.loadURL('https://github.com')
child.once('ready-to-show', () => {
  child.show()
})

对话框，提示，需要打开的文件

const { dialog } = require(‘electron’).remote //在子进程使用方法
点击查看

快捷键

[查看手册](https://www.electronjs.org/docs/api/global-shortcut)

	const { app, globalShortcut } = require('electron')
	
	app.on('ready', () => {
	  // 注册一个 'CommandOrControl+X' 的全局快捷键
	  const ret = globalShortcut.register('CommandOrControl+X', () => {
	    console.log('CommandOrControl+X is pressed')
	  })
	
	  if (!ret) {
	    console.log('registration failed')
	  }
	
	  // 检查快捷键是否注册成功
	  console.log(globalShortcut.isRegistered('CommandOrControl+X'))
	})
	
	app.on('will-quit', () => {
	  // 注销快捷键
	  globalShortcut.unregister('CommandOrControl+X')
	
	  // 注销所有快捷键
	  globalShortcut.unregisterAll()
	})

进程之间通信

子进程向主进程通信

// 在主进程中.
const { ipcMain } = require('electron')
ipcMain.on('asynchronous-message', (event, arg) => {
  console.log(arg) // prints "ping"
  event.reply('asynchronous-reply', 'pong')
})

ipcMain.on('synchronous-message', (event, arg) => {
  console.log(arg) // prints "ping"
  event.returnValue = 'pong'
})

//在渲染器进程 (网页) 中。
const { ipcRenderer } = require('electron')
console.log(ipcRenderer.sendSync('synchronous-message', 'ping')) // prints "pong"

ipcRenderer.on('asynchronous-reply', (event, arg) => {
  console.log(arg) // prints "pong"
})
ipcRenderer.send('asynchronous-message', 'ping')

主进程主动向子进程通信

setTimeout(function(){
mainWindow.webContents.send(‘ping1111’, ‘sdfsaf sdaf as’)
},2000);

//这个里面是，w3c案例，应该查看官方案例，估计有点老
// In main process. 主进程里面
const ipcMain = require('electron').ipcMain;
ipcMain.on('asynchronous-message', function(event, arg) {
  console.log(arg);  // prints "ping"
  event.sender.send('asynchronous-reply', 'pong');
});

ipcMain.on('synchronous-message', function(event, arg) {
  console.log(arg);  // prints "ping"
  event.returnValue = 'pong';
});



// In renderer process (web page). 子进程里面
const ipcRenderer = require('electron').ipcRenderer;
console.log(ipcRenderer.sendSync('synchronous-message', 'ping')); // prints "pong"

ipcRenderer.on('asynchronous-reply', function(event, arg) {
  console.log(arg); // prints "pong"
});
ipcRenderer.send('asynchronous-message', 'ping');

原生菜单

查看手册

网络模版 net 类似 http 调用远程 api 和后端交互

默认库不好用，但是需要了解