Fork me on GitHub

electron开发小记

electron开发记录

首先根据官方文档的启动脚手架来先跑一波electron,注意这一步在npm i的时候有一个比较大的依赖在注入进来,所以会安装比较长的时间。

  • Electron本身是基于ChrominumNode.js
  • 开源
  • 跨平台

进程

以Chromium举例,它有两个进程,一个主进程,一个是渲染进程.

主进程(Main Process)

  • 可以使用和系统对接的Electron API 创建菜单,上传文件等
  • 可以创建渲染进程- Renderer Process
  • 全面支持Node.js

渲染进程(Renderer Process)

  • 可以有多个,每个对应一个窗口
  • 每个都是一个单独的进程
  • 全面支持Node.jsDOM API
  • 可以使用一部分Electron Api

比如官方提供的quick-electron这个脚手架里面的main.jsrenderer.js就分别代表主进程和渲染进程的代码。

相关API

首先先介绍一下主进程里面一个比较重要的api叫做BroswerWindow

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
const { app, BrowserWindow } = require('electron');
// 表示electron已经完成加载好了,准备运行了
app.on('ready', ()=> {
const mainWindow = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
// 表示我们在里面可以使用node的api
nodeIntegration: true,
}
})
// 这里的mainWindow回去下载的当前目录下面的index.html这个文件
mainWindow.loadFile('./index.html');
const secondWindow = new BrowserWindow({
width: 400,
height: 300,
webPreferences: {
nodeIntegration: true,
},
// 父窗口属性,当父窗口关闭的时候,子窗口也会跟着关闭
parent: mainWindow
})
secondWindow.loadFile('./second.html')
})

可以看到的是,在配置过webPreferences之后,我们在index.html里面的js代码中就可以使用相对应的node api以及一些相关的dom api

index.html的代码RT:

1
2
3
4
5
6
7
8
9
10
11
12
13
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Hello World!</title>
</head>
<body>
<h1>Hello World</h1>
<script>
require('./renderer.js')
</script>
</body>
</html>

然后在renderer.js里面写上对应的代码:

1
2
3
4
5
6
// 可以弹出nodejs的版本
alert(process.versions.node);
window.addEventListener('DOMContentLoaded', () => {
alert(`greeting from the DOM side`);
})

更多关于BroswerWindow相关

接下来介绍一下进程之前的通信工具,其实就比较类似于nodeJS里面的emiton这种通信方式:

我们在渲染进程里面给主进程发送一个message,然后在message这边进行接收即可:

1
2
3
4
5
6
7
8
9
10
const { ipcRenderer } = require('electron');
window.addEventListener('DOMContentLoaded', () => {
// 利用ipcRender以及send这个api发送一条消息
ipcRenderer.send('message', 'hello from renderer');
ipcRenderer.on('reply',(e,arg)=>{
// 把主进程返回回来的消息挂载到页面的对应节点上面去
document.getElementById('message').innerHTML = arg;
})
})

主进程这边接收到消息之后再replyrender进程这边回一个消息:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
const { app, BrowserWindow, ipcMain } = require('electron');
// 表示electron已经完成加载好了,准备运行了
app.on('ready', ()=> {
const mainWindow = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
// 表示我们在里面可以使用node的api
nodeIntegration: true,
},
})
mainWindow.loadFile('./index.html');
// 用这边来监听renderer那边的值
ipcMain.on('message',(e,arg) => {
console.log(arg);
// 可以在event里面利用发送者这个属性往渲染进程上再回复一组数据
e.sender.send('reply','hello from main')
mainWindow.send('reply','hello from main')
})
})

electron的应用发布与打包

electron打包方式:

这里使用electron-builder这个库来进行electron应用的一个打包。

1
npm install electron-builder -D

完成之后我们需要在package.json里面添加一份配置文件。用于打包生成对应的安装包。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
"build":{
"appId":"Music-Player",
"linux": {
"target": [
"AppImage",
"deb"
]
},
"dmg": {
"background": "build/appdmg.png",
"icon": "build/icon.icns",
"iconSize": 100,
"contents": [
{
"x": 380,
"y": 280,
"type": "link",
"path": "/Applications"
},
{
"x": 110,
"y": 280,
"type": "file"
}
],
"window": {
"width": 500,
"height": 500
}
}
},

然后新建一个启动脚本:

1
"script":"electron-builder"

这样就可以完成打包了。

-------------本文结束感谢您的阅读-------------